Skeleton supports a variety of web-based frameworks and meta-frameworks, and this guide serves as a universal reference when implementing page layouts. These techniques utilize native HTML and Tailwind, meaning Skeleton is supported but not required. The only prerequisite is Tailwind itself.
Real World Example
See our real world three column example, which implements many of the concepts introduced below.
View Real World Example →
Semantic Markup
When creating custom layouts, it’s recommended to use semantic HTML to denote each region of the page.
| Element | Description | Source |
|---|---|---|
<header> | Represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements. | MDN |
<main> | Represents the dominant content within the document <body>. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. | MDN |
<footer> | Represents a footer for its nearest ancestor sectioning content or sectioning root element. Typically contains information about the author of the section, copyright data or links to related documents. | MDN |
<aside> | Represents a portion of a document whose content is only indirectly related to the document’s main content. Asides are frequently presented as sidebars or call-out boxes. | MDN |
<article> | Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. | MDN |
Using Body Scroll
Prioritize the <body> element as the scrollable page element over child elements. Otherwise you risk the following pitfalls:
- Mobile browser’s “pull to refresh” feature will not work as expected.
- The Mobile Safari’s browser interface will not auto-hide when scrolling vertically.
- CSS print styles may not work as expected.
- Accessbility may be adversely affected, especially on touch screen devices.
- May introduce inconsistent behavior between your app framework’s layout solution.
Tailwind Utilities
Tailwind provides several utility classes that may be helpful when generating custom layouts.
Grid
Learn more about CSS grid.
| Utility | Description |
|---|---|
| Columns | Utilities for specifying the columns in a grid layout. |
| Colum Start/End | Utilities for controlling how elements are sized and placed across grid columns. |
| Rows | Utilities for specifying the rows in a grid layout. |
| Row Start/End | Utilities for controlling how elements are sized and placed across grid rows. |
| Auto Flow | Utilities for controlling how elements in a grid are auto-placed. |
| Auto Columns | Utilities for controlling the size of implicitly-created grid columns. |
| Auto Rows | Utilities for controlling the size of implicitly-created grid rows. |
| Gap | Utilities for controlling gutters between grid and flexbox items. |
Alignment
The following options are available for both Flexbox and Grid styles.
| Utility | Description |
|---|---|
| Justify Content | Utilities for controlling how flex and grid items are positioned along a container’s main axis. |
| Justify Items | Utilities for controlling how grid items are aligned along their inline axis. |
| Justify Self | Utilities for controlling how an individual grid item is aligned along its inline axis. |
| Align Content | Utilities for controlling how rows are positioned in multi-row flex and grid containers. |
| Align Items | Utilities for controlling how flex and grid items are positioned along a container’s cross axis. |
| Align Self | Utilities for controlling how an individual flex or grid item is positioned along its container’s cross axis. |
| Place Content | Utilities for controlling how content is justified and aligned at the same time. |
| Place Items | Utilities for controlling how items are justified and aligned at the same time. |
| Place Self | Utilities for controlling how an individual item is justified and aligned at the same time. |
Responsive Design
We recommend you utilize Tailwind’s built-in responsive breakpoints for handling responsive design.
<!-- Use a single column on small screens; show multiple columns at the medium breakpoit or wider --><div class="grid grid-cols-1 md:grid-cols-[auto_1fr]"> <!-- Hide the sidebar on small screens; show at the medium breakpoint or wider --> <aside class="hidden md:block">(sidebar)</aside> <!-- Remains visible at all breakpoints --> <main>(main)</main></div>By default, your <html> and <body> may collapse vertically and not extend to full height of the viewport. Consider a reset:
html,body { @apply h-full;}The Basics
Let’s start by creating traditional layouts using a combination of semantic HTML and Tailwind utility classes.
One Column
Paragraph 1
Paragraph 2
Paragraph 3
Preview and Source →
Two Column
Paragraph 1
Paragraph 2
Paragraph 3
Preview and Source →
Three Column
Paragraph 1
Paragraph 2
Paragraph 3
Preview and Source →
Sticky Positioning
If you wish for your header or sidebar to remain fixed while scrolling, try the following techniques.
Sticky Header
For <header>, we’ll implement a few specific utlity classes:
- sticky - Sets the CSS display to a value of sticky.
- top-0 - Sets the top offset to a value of 0px.
- z-10 - Sets the z-index stacking to a value of 10.
TIP: Use backdrop-blur to produce the hazy glass-like effect for overlapped semi-transparent elements.
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5
Preview and Source →
Sticky Sidebar
For <aside>, we introduce two addition utility classes:
- col-span-1 - we must define our columns explicitly to ensure all styles are display as expected.
- h-screen - ensures our sidebar matches the viewport height. See Calculate Offsets below for more complex layouts.
Preview and Source →
Advanced Techniques
Calculate Offsets
You may use the calc property to calculate numeric amounts, which can be handy when you have multiple sticky elements.
<aside class="... sticky top-0 h-[calc(100vh-100px)]">(sidebar)</aside>- Sets the
heightvalue using an abitrary syntax - The initial value is set to 100vh (100% of the viewport height)
- Finally we subtrack the offset for our header (ex: 100px)
Smart Grid Rows
Combine the grid arbitrary syntax with minmax to dynamically set a min and max range for your columns or rows. This is useful when creating a three column layout that need to adhere to a max container width.
<div class="container mx-auto grid grid-cols-[200px_minmax(0px,_1fr)_300px]"> <aside>(sidebar)</aside> <main>(main)</main> <aside>(sidebar)</aside></div>Grid Template
If you wish to go beyond Tailwind, native CSS also offers grid-template. This provides a declarative shorthand for defining grid columns, rows, and areas. Take care to match your media query breakpoints configured by Tailwind by default, or extended within your application’s Tailwind configuration.