Docs

Layout Guide

Layout utilities for the Fluid Theme CSS framework. All layout utilities live in src/layouts/positioning.css.

Layout Philosophy

Fluid uses data attributes on HTML elements to control layout. No CSS classes needed for most layout tasks. This keeps HTML semantic and readable.

Containers

<div class="container">         <!-- Default max-width: 1280px -->
<div class="container--sm">     <!-- 512px -->
<div class="container--md">     <!-- 768px -->
<div class="container--lg">     <!-- 1024px -->
<div class="container--xl">     <!-- 1280px -->
<div class="container--2xl">    <!-- 1536px -->

All containers auto-center and have responsive padding.

Grid Layouts

Fixed Column Grids

<div data-grid="2">  <!-- 2 equal columns -->
<div data-grid="3">  <!-- 3 equal columns -->
<div data-grid="4">  <!-- 4 equal columns -->

Responsive Auto-fit Grids

<div data-grid="auto-sm">  <!-- Min 200px per item -->
<div data-grid="auto">     <!-- Min 250px per item -->
<div data-grid="auto-lg">  <!-- Min 300px per item -->

These automatically adjust column count based on available space.

Grid Spanning

<div data-grid="3">
  <div data-span="2">I span 2 columns</div>
  <div>I span 1</div>
</div>

Grid Gaps

<div data-grid="3" data-gap="lg">

Gap values: none, sm, md, lg, xl

Flexbox Layouts

<div data-flex="row">           <!-- Horizontal -->
<div data-flex="col">           <!-- Vertical -->
<div data-flex="row-reverse">   <!-- Horizontal reversed -->
<div data-flex="col-reverse">   <!-- Vertical reversed -->

Alignment

<div data-flex="row" data-justify="between" data-items="center">
  • data-justify: start, center, end, between
  • data-items: start, center, end

Wrapping

<div data-flex="row" data-wrap>           <!-- Wrap enabled -->
<div data-flex="row" data-wrap="nowrap">  <!-- No wrap -->

Flex Children

<div data-grow>              <!-- flex-grow: 1 -->
<div data-shrink="0">        <!-- flex-shrink: 0 -->
<div data-basis="half">      <!-- flex-basis: 50% -->
<div data-basis="third">     <!-- flex-basis: 33.333% -->
<div data-basis="quarter">   <!-- flex-basis: 25% -->

Structural Layouts

Stack (Vertical Rhythm)

<div class="stack">
  <p>First</p>
  <p>Second</p>
  <p>Third</p>
</div>

Cluster (Horizontal Flow)

<div class="cluster">
  <span>Tag 1</span>
  <span>Tag 2</span>
  <span>Tag 3</span>
</div>

Sidebar Layout

<div data-layout="sidebar">
  <aside>Sidebar content</aside>
  <main>Main content</main>
</div>

<div data-layout="sidebar-right">
  <main>Main content</main>
  <aside>Sidebar content</aside>
</div>

Holy Grail Layout

<div data-layout="holy-grail">
  <aside>Left sidebar</aside>
  <main>Main content</main>
  <aside>Right sidebar</aside>
</div>

Dashboard Layout

<div data-layout="dashboard">
  <div>Widget 1</div>
  <div>Widget 2</div>
  <div>Widget 3</div>
  <!-- Auto-fills in a dense grid -->
</div>

Split Layouts

<div data-layout="split">          <!-- 50/50 -->
  <div>Left</div>
  <div>Right</div>
</div>

<div data-layout="split-reverse">  <!-- Right content first visually -->
  <div>Left</div>
  <div>Right</div>
</div>

Centered Content

<div data-layout="center">
  <div>Centered both horizontally and vertically</div>
</div>

Content Width Control

<section data-width="narrow">    <!-- Narrow content -->
<section data-width="default">   <!-- Standard width -->
<section data-width="wide">      <!-- Wider content -->
<section data-width="full">      <!-- Full width, no max -->

Spacing

Padding

<section data-padding="none">   <!-- No padding -->
<section data-padding="sm">     <!-- Small block padding -->
<section data-padding="md">     <!-- Medium -->
<section data-padding="lg">     <!-- Large -->
<section data-padding="xl">     <!-- Extra large -->

<section data-padding-inline="lg">  <!-- Horizontal padding only -->

Gaps (between grid/flex children)

<div data-grid="3" data-gap="md">
<div data-flex="row" data-gap="sm">

Positioning

<nav data-position="sticky">     <!-- Sticks to top on scroll -->
<div data-position="relative">   <!-- Position relative -->

Z-Index

<div data-z="base">       <!-- 0 -->
<div data-z="raised">     <!-- 1 -->
<div data-z="dropdown">   <!-- 1000 -->
<div data-z="overlay">    <!-- 1200 -->

Overflow

<div data-overflow="hidden">
<div data-overflow="auto">
<div data-overflow="scroll">

Text Alignment

<p data-align="start">Left-aligned (respects RTL)</p>
<p data-align="center">Centered</p>
<p data-align="end">Right-aligned (respects RTL)</p>

Responsive Visibility

<div data-hide="mobile">    <!-- Hidden on small screens -->
<div data-hide="tablet">    <!-- Hidden on medium screens -->
<div data-hide="desktop">   <!-- Hidden on large screens -->

Display Utilities

<div data-display="none">
<div data-display="block">
<div data-display="inline">
<div data-display="inline-flex">
<div data-display="inline-block">

Choosing Grid vs Flexbox

  • Grid when: equal-sized items, 2D layout, card grids, dashboards
  • Flexbox when: single-axis alignment, navigation bars, centering, dynamic content that wraps

Common Layout Recipes

Centered login page

<main data-layout="center" style="min-height: 100vh">
  <div class="card" data-width="narrow">
    <!-- login form -->
  </div>
</main>

Blog layout with sidebar

<div class="container" data-layout="sidebar">
  <aside>Table of contents, related posts</aside>
  <article>Blog content</article>
</div>

Responsive card grid

<div class="container">
  <div data-grid="auto" data-gap="lg">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
  </div>
</div>