Epic CSS

A simpler utility-first UI library.

A utility-first CSS framework that easily integrates with any node.js project like 11ty or Next.js. Yes it is very similar to Tailwind but much more flexible and can be added to WordPress or PHP projects.

Integrate into any project with node.js and npm install epic-css or use with the pre-integrated Epic CSS 11ty theme.

Start with side gutters and a centered width cap in Wrapper and container, then arrange the content with flex or grid.

Usage from CDN

Alternatively, you can use cdn.epiccss.com to link the latest version 0.14.1.

<link
  rel="stylesheet"
  href="https://cdn.epiccss.com/0.14.1.css"
/>

Compare primary and secondary text/background pairs in Colors and palettes.

UI examples

Build reusable interfaces with Epic CSS utilities. Explore the live Cards example and copy the HTML into your project.

Explore the Horizontal Scroll Slider with its live example and copyable HTML and JavaScript.

One card, two layouts

Explore the same card in two 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

Second Web Design Post

by admin on Mar 11, 2020

YOLO pop-up synth fixie slow-carb fingerstache before they sold out twee readymade church-key DIY meh umami crucifix offal. PBR&B craft beer photo booth lyft gastropub 90's. This is a Read more...

HTML 
<div class="clr-primary-bg p-24 border-r-16" style="max-width: 344px">
    <a href="/blog/web-design/second-web-design-post/" class="flex mb-8"><img class="border-r-16" 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="/blog/web-design/second-web-design-post/">Second Web Design Post</a>
</h3>
<div class="mb-24">
by <span>admin</span> on <span>Mar 11, 2020</span>
</div>
<p class="mb-0">
YOLO pop-up synth fixie slow-carb fingerstache before they sold out twee readymade church-key DIY meh umami crucifix offal. PBR&amp;B craft beer photo booth lyft gastropub 90&#39;s.
This is a<a href="/blog/web-design/second-web-design-post/" class="clr-underline"> Read more...</a></p>
</div>

Horizontal card

Epic CSS with 11ty UI Library banner

Second Web Design Post

by admin on Mar 11, 2020

YOLO pop-up synth fixie slow-carb fingerstache before they sold out twee readymade church-key DIY meh umami crucifix offal. PBR&B craft beer photo booth lyft gastropub 90's. This is a Read more...

HTML 
<div class="clr-primary-bg p-24 border-r-16 flex flex-col md-flex-row gap-24 items-start">
    <a href="/blog/web-design/second-web-design-post/" class="flex items-start md-w-50"><img class="border-r-16" src="/assets/blog/featured-image/design2seo-11ty-theme.webp" alt="Epic CSS with 11ty UI Library banner" width="484" height="242"></a>
    <div class="md-w-50">
        <h3 class="clr-primary mt-0 mb-24">
    <a href="/blog/web-design/second-web-design-post/">Second Web Design Post</a>
</h3>
<div class="mb-24">
by <span>admin</span> on <span>Mar 11, 2020</span>
</div>
<p class="mb-0">
YOLO pop-up synth fixie slow-carb fingerstache before they sold out twee readymade church-key DIY meh umami crucifix offal. PBR&amp;B craft beer photo booth lyft gastropub 90&#39;s.
This is a<a href="/blog/web-design/second-web-design-post/" class="clr-underline"> Read more...</a></p>
    </div>
</div>

The sample blog page is not included in this site; replace the example post links in your project.