Epic CSS / Documentation

Wrapper and container

Start with side gutters, add a centered width cap when you need one, then arrange the content inside with flex or grid.

Customize your container width

Set your preferred maximum in src/my-epic-css/_custom.scss. This site uses:

$container-width: 980px;

Keep using class="container". Run npm start to recompile and preview, or npm run build for production. The library fallback is a 1000-pixel maximum; this site's override is 980 pixels. Neither is a fixed width. This setting changes container; container-post stays at its hardcoded 1000-pixel maximum.

What the classes do

A container fills the available block width up to its cap, then centers with automatic side margins. It adds no gutters. A wrapper adds 5% padding on each side, measured against its containing block's width.

Preview boundaries: backgrounds show the nested regions inside this docs column, not the viewport. This site's 980-pixel cap does not engage in these narrow previews.

Gutters and a centered width cap

Use a wrapper around a container for the usual page-content pattern. The wrapper supplies breathing room at the edges; the container limits long rows on wider screens.

<div class="wrapper clr-primary-bg">
  <div class="container clr-secondary-bg p-16">
    <p class="mb-0">Content inside percentage gutters and a centered width cap.</p>
  </div>
</div>

Gutters without a width cap

Leave out the container when the content should keep growing with its parent while retaining side gutters.

<div class="wrapper clr-primary-bg">
  <div class="clr-secondary-bg py-16">
    <p class="mb-0">This region has gutters but no container width cap.</p>
  </div>
</div>

A viewport-wide section

Put a section outside the page's wrapper and container when its surface should reach the viewport edges. Do not nest it inside a capped parent and expect it to break out: even w-100 means 100% of the available parent width.

<section class="clr-primary-bg py-24">
  <p class="mb-0">A section with no wrapper or container of its own.</p>
</section>

In this preview the surface reaches the preview's inner edges. On a page, place this markup directly in the full-width content region for viewport-wide output. The Sliders page uses that arrangement for its live scrolling row.

A full-width surface with aligned content

A section can have an edge-to-edge background while its text aligns with the rest of the page. Place the wrapper and container inside the section rather than outside it.

<section class="clr-primary-bg py-24">
  <div class="wrapper">
    <div class="container clr-secondary-bg p-16">
      <p class="mb-0">Aligned content inside a full-width section surface.</p>
    </div>
  </div>
</section>

Arrange the content inside

Once the outer width is chosen, apply flex or grid where the items need arranging. These are composition choices: flex and grid do not require a wrapper or container.

<div class="wrapper">
  <div class="container flex flex-col md-flex-row gap-40 items-center justify-between mb-80 pt-24">
    <a href="/">Epic CSS</a>
    <nav class="flex flex-wrap gap-24" aria-label="Example navigation">
      <a href="/docs/flexbox/">Flexbox</a>
      <a href="/docs/grid/">Grid</a>
    </nav>
  </div>
</div>

flex enables flex layout. flex-col stacks the brand and navigation on smaller screens; md-flex-row switches to a row from 820 pixels up. In that row, justify-between pushes them toward opposite sides and items-center aligns them vertically. The breakpoint follows the viewport, even inside this narrower docs preview.

gap-40 spaces the main flex items; gap-24 spaces the navigation links. Gap needs a flex or grid layout to have that effect. For more arrangements, see Flexbox and Grid.

pt-24 adds top padding, py-24 adds top and bottom padding, and mb-80 adds bottom margin. Their current values are 1.5rem, 1.5rem per side, and 5rem, respectively; at a 16-pixel root font size these are 24 and 80 pixels. The same spacing scale makes gap-24 1.5rem and gap-40 2.5rem.