Epic CSS

Simple utilities. Your design. A smaller build.

Epic CSS gives you simple, unopinionated utilities for layout, spacing, typography, and color. Combine them in your markup and bring your own visual design.

Why ship the whole library when your project uses only a fraction? Epic Light scans HTML, Nunjucks, and Markdown files in your configured project directory for utility classes, then filters the full compiled CSS into a smaller stylesheet. It keeps base styles and matching responsive blocks alongside the utilities it finds.

Start with npm install epic-css and follow the installation guide, or build on the Epic CSS 11ty theme. The guide covers Sass setup and the optional Epic Light build.

EPIC CSS · NPM DOWNLOADS
— Total downloads
—

One card, three layouts

Explore the same card in three layouts, then show and copy its HTML. These are the same examples maintained on the Cards page.

Vertical card

Epic CSS with 11ty UI Library banner

Give content room to breathe

Design fundamentals · Spacing and rhythm

Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements. Explore spacing and layout

HTML 
<div class="clr-primary-bg p-24 border-r-16" style="max-width: 344px">
    <a href="/docs/wrapper-and-container/" class="flex mb-8"><img class="border-r-16 mb-0" src="/assets/blog/featured-image/design2seo-11ty-theme.webp" alt="Epic CSS with 11ty UI Library banner" width="484" height="242"></a>
    <h3 class="clr-primary mt-0 mb-24">
    <a href="/docs/wrapper-and-container/">Give content room to breathe</a>
</h3>
<div class="mb-24">
<span>Design fundamentals</span> · <span>Spacing and rhythm</span>
</div>
<p class="mb-0">
Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements.
<a href="/docs/wrapper-and-container/" class="clr-underline">Explore spacing and layout</a></p>
</div>

Horizontal card, image left

Epic CSS with 11ty UI Library banner

Give content room to breathe

Design fundamentals · Spacing and rhythm

Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements. Explore spacing and layout

HTML 
<div class="clr-primary-bg p-24 border-r-16 flex-md gap-24 items-start">
    <a href="/docs/wrapper-and-container/" class="flex flex-1 items-start mb-24"><img class="border-r-16 mb-0 w-100" src="/assets/blog/featured-image/design2seo-11ty-theme.webp" alt="Epic CSS with 11ty UI Library banner" width="484" height="242"></a>
    <div class="flex-1">
        <h3 class="clr-primary mt-0 mb-24">
    <a href="/docs/wrapper-and-container/">Give content room to breathe</a>
</h3>
<div class="mb-24">
<span>Design fundamentals</span> · <span>Spacing and rhythm</span>
</div>
<p class="mb-0">
Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements.
<a href="/docs/wrapper-and-container/" class="clr-underline">Explore spacing and layout</a></p>
    </div>
</div>

Horizontal card, image right

Give content room to breathe

Design fundamentals · Spacing and rhythm

Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements. Explore spacing and layout

Epic CSS with 11ty UI Library banner
HTML 
<div class="clr-primary-bg p-24 border-r-16 flex-md gap-24 items-start">
    <div class="flex-1 mb-24">
        <h3 class="clr-primary mt-0 mb-24">
    <a href="/docs/wrapper-and-container/">Give content room to breathe</a>
</h3>
<div class="mb-24">
<span>Design fundamentals</span> · <span>Spacing and rhythm</span>
</div>
<p class="mb-0">
Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements.
<a href="/docs/wrapper-and-container/" class="clr-underline">Explore spacing and layout</a></p>
    </div>
    <a href="/docs/wrapper-and-container/" class="flex flex-1 items-start"><img class="border-r-16 mb-0 w-100" src="/assets/blog/featured-image/design2seo-11ty-theme.webp" alt="Epic CSS with 11ty UI Library banner" width="484" height="242"></a>
</div>

Give the page a clear structure

Keep post summaries together and related reading alongside them. This page layout stacks in reading order on smaller screens.

Design notes

Give content room to breathe

Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements.

Make the hierarchy easy to scan

Use headings to introduce each topic. A consistent type scale helps readers move between the main idea and supporting details.

HTML 
<section aria-labelledby="home-archive-posts-heading">
  <h2 id="home-archive-posts-heading" class="fs-32 lh-37 mt-0 mb-24">Design notes</h2>
  <div class="grid grid-sidebar-right-344 gap-40 items-start">
  <section aria-label="Posts">
    <article class="clr-primary-bg p-24 border-r-16 mb-24">
      <h3 class="fs-24 lh-32 mt-0 mb-16"><a href="/docs/wrapper-and-container/">Give content room to breathe</a></h3>
      <p class="mb-0">Consistent spacing helps readers see what belongs together. Leave more space between groups than between related elements.</p>
    </article>
    <article class="clr-primary-bg p-24 border-r-16">
      <h3 class="fs-24 lh-32 mt-0 mb-16"><a href="/docs/typography/">Make the hierarchy easy to scan</a></h3>
      <p class="mb-0">Use headings to introduce each topic. A consistent type scale helps readers move between the main idea and supporting details.</p>
    </article>
  </section>
  <aside class="clr-primary-bg p-24 border-r-16" aria-labelledby="home-archive-sidebar-heading">
    <h2 id="home-archive-sidebar-heading" class="fs-24 lh-32 mt-0 mb-16">Keep exploring</h2>
    <p>Group related reading in the sidebar so readers can explore without losing their place.</p>
    <ul class="list-none pl-0 mb-0">
      <li class="mb-12"><a href="/docs/colors/">Color and readability</a></li>
      <li><a href="/docs/grid/">Responsive grids</a></li>
    </ul>
  </aside>
</div>
</section>