Pattern Library

Layout Resources

• CSS Grid Layout Guide - CSS Tricks
• Flexbox Layout Guide - CSS Tricks
• Modern Layouts using CSS Grid
• Intrinsically Responsive CSS Grid with minmax() and min()

LBO Modular Scale Grid System

TheLBO Gridis a CSS Grid‑based layout system designed to provide consistent, modular track widths for your application. Tracks are derived from abase content widthand ascale ratio, ensuring that all layout widths remain mathematically aligned.

Inspired by the following resources:

• Smol Breakout Grid - Stephanie Eckles
• Full-Bleed Layout Using CSS Grid - Josh W Comeau
• Layout Breakouts with CSS Grid
• Codepen for above article
• A new approach to container and wrapper classes - Kevin Powell
• CodePen for above video
• Layout Breakouts Builder - Andrew Walpole

How it Works

• The system defines namedgrid tracks:full,xwide,wide,pop,cont,inset,narrow, andtiny.
• Content defaults into thecont(content) track unless otherwise specified.
• Each track sits inside symmetric gutters so that bigger/smaller tracks stay visually centered.
• Track widths are generated by multiplying or dividing the base content width by the scale ratio.

Core Properties

You configure the grid system usingCSS custom properties:

• --lbo-w-cont→ the base content max width (e.g.1060px).
• --lbo-scale→ the modular scale ratio (e.g.1.25for Major Third,1.618for Golden ratio).
• --lbo-sz-pad-min→ the minimum side padding/gutter (default:2rem).

All other widths are derived automatically:

• --lbo-w-pop= content × scale
• --lbo-w-wide= content × scale²
• --lbo-w-xwide= content × scale³
• --lbo-w-inset= content ÷ scale
• --lbo-w-narrow= inset ÷ scale
• --lbo-w-tiny= narrow ÷ scale

Scales

You can opt into different ratios using thedata-scaleattribute:

<div class="lbo-layout" data-scale="golden"> … </div>

Available scales:

• minor-second → 1.067
• major-second → 1.125
• minor-third → 1.2
• major-third → 1.25 (default)
• fourth → 1.333
• tritone → 1.414
• fifth → 1.5
• golden → 1.618
• sixth → 1.667
• major-seventh → 1.778
• minor-seventh → 1.875
• octave → 2.0

Utility Classes

Each track has a matching utility class to place children:

• .lbo-full→ full width (edge to edge)
• .lbo-full-pad→ full width with side padding
• .lbo-xwide→ extra wide
• .lbo-wide→ wide
• .lbo-pop→ popout
• .lbo-cont→ content (the default track)
• .lbo-inset→ inset
• .lbo-narrow→ narrow
• .lbo-tiny→ tiny

Defaults

If no utility class is assigned, elements placed directly inside.lbo-layoutwill automatically use thecontenttrack:

.lbo-layout > * {
  grid-column: lbo-cont;
}

Examples

<div class="lbo-layout" data-scale="golden">
  <header class="lbo-full-pad">Header</header>
  <section class="lbo-pop">Popout content</section>
  <main>Default content (no class) auto-placed</main>
  <aside class="lbo-inset">Inset sidebar</aside>
  <footer class="lbo-full">Footer</footer>
</div>

What to Customize

1. Content width(--lbo-w-cont) — set the maximum reading width for body text. (Recommended start:~840–960pxfor text-heavy,~1060pxfor spacious marketing layouts.)
2. Scale(--lbo-scale) — pick the geometric ratio that defines all relationships. Golden ratio gives balanced steps; Major Third (1.25) is a solid default.
3. Padding(--lbo-sz-pad-min) — the minimum side gutter, adjusts with breakpoints.