Baseline Scaffold

A pure layout framework for structural arrangement of content in the browser.

Framework Goals

Scaffold is a pure layout framework. It solves exclusively the problem of structural arrangement of content in the browser.

The goal is to arrange HTML content in an organized, responsive, and predictable way – so that any design system can be applied on top without fighting against it.

Scaffold should feel like: "This is how browser layouts should have worked by default."

Installation

$3

Install Baseline Scaffold in your project:

``bash npm install @rhavenside/scaffold`

Then import the CSS in your project:

`html`

Or if you're using a bundler (webpack, vite, etc.):

`javascript import 'baseline-scaffold/dist/scaffold.css';`

`Usage`

Include the compiled CSS in your project:

`html`

`Architecture`

Scaffold consists of five clearly separated modules:

1. Container System 2. Grid System 3. Stack System 4. Spacing Utilities 5. Responsive Rules

Each module can be used independently. No requirement to use everything.

`1. Container System`

Containers define boundaries and reading areas. They control width, inner spacing, and horizontal centering.

`$3`

`html

$3

- .scaffold-container--narrow(640px) - For text, articles -.scaffold-container--normal(1200px) - Standard for page content -.scaffold-container--wide(1600px) - For dashboards -.scaffold-container--full (100%) - Edge-to-edge

`$3`

Containers have horizontal padding by default. For vertical padding, modifiers can be used:

- .scaffold-container--padding-vertical- Responsive vertical padding -.scaffold-container--padding-vertical-xs- Extra small (0.5rem) -.scaffold-container--padding-vertical-sm- Small (1rem) -.scaffold-container--padding-vertical-md- Medium (1.5rem) -.scaffold-container--padding-vertical-lg- Large (2rem) -.scaffold-container--padding-vertical-xl- Extra large (3rem) -.scaffold-container--padding-vertical-xxl - Extra extra large (4rem)

`$3`

`html


  Article Title

  Article content...


  Content with spacing top and bottom


2. Grid System
The grid organizes content two-dimensionally: columns and rows. Uses CSS Grid for flexible layouts.
$3

`html


  Item 1

  Item 2

  Item 3

$3

- .scaffold-grid--cols-2- 2 columns -.scaffold-grid--cols-3- 3 columns -.scaffold-grid--cols-4- 4 columns -.scaffold-grid--cols-5- 5 columns -.scaffold-grid--cols-6- 6 columns -.scaffold-grid--cols-12 - 12 columns (for flexible layouts)

`$3`

- .scaffold-grid--gap-xs- Extra small -.scaffold-grid--gap-sm- Small -.scaffold-grid--gap-md- Medium (default) -.scaffold-grid--gap-lg- Large -.scaffold-grid--gap-xl- Extra large -.scaffold-grid--gap-xxl - Extra extra large

`$3`

`html


  Spans 6 columns

  Spans 6 columns

  Spans 4 columns

  Spans 4 columns

  Spans 4 columns

$3

`html


  Card 1

  Card 2

  Card 3


3. Stack System
Stacks solve the most common layout problem: arranging elements cleanly with consistent spacing.
$3

`html


  Item 1

  Item 2

  Item 3

$3

- .scaffold-stack--vertical- Vertical (default) -.scaffold-stack--horizontal - Horizontal

`$3`

- .scaffold-stack--spacing-xs- Extra small -.scaffold-stack--spacing-sm- Small -.scaffold-stack--spacing-md- Medium (default) -.scaffold-stack--spacing-lg- Large -.scaffold-stack--spacing-xl- Extra large -.scaffold-stack--spacing-xxl - Extra extra large

`$3`

- .scaffold-stack--align-start- Top/left -.scaffold-stack--align-center- Centered -.scaffold-stack--align-end- Bottom/right -.scaffold-stack--align-stretch - Stretched

`$3`

- .scaffold-stack--justify-start- Left -.scaffold-stack--justify-center- Centered -.scaffold-stack--justify-end- Right -.scaffold-stack--justify-between- Between -.scaffold-stack--justify-around - Around

`$3`

`html


4. Spacing Utilities
General utility classes for vertical and horizontal spacing. Can be used anywhere, not only in containers/stacks/grids.
$3

- .scaffold-padding-vertical-xs- Extra small (0.5rem) -.scaffold-padding-vertical-sm- Small (1rem) -.scaffold-padding-vertical-md- Medium (1.5rem) -.scaffold-padding-vertical-lg- Large (2rem) -.scaffold-padding-vertical-xl- Extra large (3rem) -.scaffold-padding-vertical-xxl - Extra extra large (4rem)

`$3`

- .scaffold-padding-top-xs to .scaffold-padding-top-xxl- Top only -.scaffold-padding-bottom-xs to .scaffold-padding-bottom-xxl- Bottom only -.scaffold-padding-left-xs to .scaffold-padding-left-xxl- Left only -.scaffold-padding-right-xs to .scaffold-padding-right-xxl - Right only

`$3`

- .scaffold-padding-horizontal-xs to .scaffold-padding-horizontal-xxl - Left and right

`$3`

- .scaffold-padding-xs to .scaffold-padding-xxl - All sides (top, right, bottom, left)

`$3`

- .scaffold-margin-vertical-xs to .scaffold-margin-vertical-xxl- Top and bottom -.scaffold-margin-top-xs to .scaffold-margin-top-xxl- Top only -.scaffold-margin-bottom-xs to .scaffold-margin-bottom-xxl- Bottom only -.scaffold-margin-horizontal-xs to .scaffold-margin-horizontal-xxl- Left and right -.scaffold-margin-xs to .scaffold-margin-xxl - All sides

`$3`

`html


  Heading

  Content with spacing top and bottom


  Element with spacing on top


5. Responsive Rules
Responsiveness is explicit and traceable. Breakpoints are clearly named and consistent.
$3
- Mobile: 0px (Mobile-First)
- Tablet: 768px
- Desktop: 1024px
- Wide: 1440px
$3

`html


  Item 1

  Item 2


  Item 1

  Item 2

  Item 3


  Item 1

  Item 2

  Item 3

  Item 4

$3

`html


  Item 1

  Item 2

  Item 3


$3
Grid: All grids with multiple columns automatically become 1 column on Mobile.

Stack: Horizontal stack with .scaffold-stack--responsive automatically becomes vertical on Mobile.

`Combined Examples`

`$3`

`html


  
    
      Card Title

      Card content

    

    
      Card Title

      Card content

    

    
      Card Title

      Card content

$3

`html

Expected Result

> If a project is ugly, the design is to blame.
> If it's broken, the layout is to blame.
> Scaffold ensures that the latter rarely happens.

License

MIT

Baseline Scaffold

A pure layout framework for structural arrangement of content in the browser.

Framework Goals

Scaffold is a pure layout framework. It solves exclusively the problem of structural arrangement of content in the browser.

The goal is to arrange HTML content in an organized, responsive, and predictable way – so that any design system can be applied on top without fighting against it.

Scaffold should feel like: "This is how browser layouts should have worked by default."

Installation

$3

Install Baseline Scaffold in your project:

``bash npm install @rhavenside/scaffold`

Then import the CSS in your project:

`html`

Or if you're using a bundler (webpack, vite, etc.):

`javascript import 'baseline-scaffold/dist/scaffold.css';`

`Usage`

Include the compiled CSS in your project:

`html`

`Architecture`

Scaffold consists of five clearly separated modules:

1. Container System 2. Grid System 3. Stack System 4. Spacing Utilities 5. Responsive Rules

Each module can be used independently. No requirement to use everything.

`1. Container System`

Containers define boundaries and reading areas. They control width, inner spacing, and horizontal centering.

`$3`

`html

$3

`$3`

Containers have horizontal padding by default. For vertical padding, modifiers can be used:

`$3`

`html


  Article Title

  Article content...


  Content with spacing top and bottom


2. Grid System
The grid organizes content two-dimensionally: columns and rows. Uses CSS Grid for flexible layouts.
$3

`html


  Item 1

  Item 2

  Item 3

$3

`$3`

`html


  Spans 6 columns

  Spans 6 columns

  Spans 4 columns

  Spans 4 columns

  Spans 4 columns

$3

`html


  Card 1

  Card 2

  Card 3


3. Stack System
Stacks solve the most common layout problem: arranging elements cleanly with consistent spacing.
$3

`html


  Item 1

  Item 2

  Item 3

$3

- .scaffold-stack--vertical- Vertical (default) -.scaffold-stack--horizontal - Horizontal

`$3`

- .scaffold-stack--align-start- Top/left -.scaffold-stack--align-center- Centered -.scaffold-stack--align-end- Bottom/right -.scaffold-stack--align-stretch - Stretched

`$3`

`html


4. Spacing Utilities
General utility classes for vertical and horizontal spacing. Can be used anywhere, not only in containers/stacks/grids.
$3

`$3`

- .scaffold-padding-horizontal-xs to .scaffold-padding-horizontal-xxl - Left and right

`$3`

- .scaffold-padding-xs to .scaffold-padding-xxl - All sides (top, right, bottom, left)

`$3`

`html


  Heading

  Content with spacing top and bottom


  Element with spacing on top


5. Responsive Rules
Responsiveness is explicit and traceable. Breakpoints are clearly named and consistent.
$3
- Mobile: 0px (Mobile-First)
- Tablet: 768px
- Desktop: 1024px
- Wide: 1440px
$3

`html


  Item 1

  Item 2


  Item 1

  Item 2

  Item 3


  Item 1

  Item 2

  Item 3

  Item 4

$3

`html


  Item 1

  Item 2

  Item 3


$3
Grid: All grids with multiple columns automatically become 1 column on Mobile.

Stack: Horizontal stack with .scaffold-stack--responsive automatically becomes vertical on Mobile.

`Combined Examples`

`$3`

`html


  
    
      Card Title

      Card content

    

    
      Card Title

      Card content

    

    
      Card Title

      Card content

$3

`html

Expected Result

> If a project is ugly, the design is to blame.
> If it's broken, the layout is to blame.
> Scaffold ensures that the latter rarely happens.

License

MIT