Layouts - Skeleton

Skeleton
  1. guides
  2. ›
  3. layouts

Layouts

Learn best practices for creating responsive layouts using semantic HTML and Tailwind.

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.

ElementDescriptionSource
<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:

  1. Mobile browser’s “pull to refresh” feature will not work as expected.
  2. The Mobile Safari’s browser interface will not auto-hide when scrolling vertically.
  3. CSS print styles may not work as expected.
  4. Accessbility may be adversely affected, especially on touch screen devices.
  5. 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.

UtilityDescription
ColumnsUtilities for specifying the columns in a grid layout.
Colum Start/EndUtilities for controlling how elements are sized and placed across grid columns.
RowsUtilities for specifying the rows in a grid layout.
Row Start/EndUtilities for controlling how elements are sized and placed across grid rows.
Auto FlowUtilities for controlling how elements in a grid are auto-placed.
Auto ColumnsUtilities for controlling the size of implicitly-created grid columns.
Auto RowsUtilities for controlling the size of implicitly-created grid rows.
GapUtilities for controlling gutters between grid and flexbox items.

Alignment

The following options are available for both Flexbox and Grid styles.

UtilityDescription
Justify ContentUtilities for controlling how flex and grid items are positioned along a container’s main axis.
Justify ItemsUtilities for controlling how grid items are aligned along their inline axis.
Justify SelfUtilities for controlling how an individual grid item is aligned along its inline axis.
Align ContentUtilities for controlling how rows are positioned in multi-row flex and grid containers.
Align ItemsUtilities for controlling how flex and grid items are positioned along a container’s cross axis.
Align SelfUtilities for controlling how an individual flex or grid item is positioned along its container’s cross axis.
Place ContentUtilities for controlling how content is justified and aligned at the same time.
Place ItemsUtilities for controlling how items are justified and aligned at the same time.
Place SelfUtilities 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

(header)

Paragraph 1

Paragraph 2

Paragraph 3

(footer)

Preview and Source →

Two Column

(header)

Paragraph 1

Paragraph 2

Paragraph 3

(footer)

Preview and Source →

Three Column

(header)

Paragraph 1

Paragraph 2

Paragraph 3

(footer)

Preview and Source →

Sticky Positioning

If you wish for your header or sidebar to remain fixed while scrolling, try the following techniques.

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.

(header)

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Paragraph 5

(footer)

Preview and Source →

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>
  1. Sets the height value using an abitrary syntax
  2. The initial value is set to 100vh (100% of the viewport height)
  3. 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.