<div class="container flex flex-col md-flex-row gap-40 items-center mb-80">
- Wrapper for side gutters of 5%:
wrapper
- Container for max width:
container
- To push the logo to left and the navigation to right use
flex
,justify-between
anditems-center
. - Medium screen and up flexbox row:
md-flex-row
- Flex column for mobile first screens below medium:
flex-col
- Padding top 24px:
pt-24
or padding top and bottom 24pxpy-24
- Margin bottom 80px:
mb-80
- Gap of 24px:
flex
andgap-24
More usage documentation on this to come.
Usage from CDN
Alternatively, you can use cdn.epiccss.com to link pre-light.css
.
<link
rel="stylesheet"
href="https://cdn.epiccss.com/pre-light.css"
/>
Colors
clr-primary
clr-primary-bg
clr-primary-bg
clr-secondary
clr-secondary-bg
clr-secondary-bg
<div class="clr-primary clr-primary-bg">clr-primary<br>clr-primary-bg</div>
<div class="clr-secondary clr-secondary-bg">clr-secondary<br>clr-secondary-bg</div>
Horizontal Card
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...
<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 src="/assets/blog/featured-image/design2seo-11ty-theme.webp" alt="I'm baby fashion axe swag actually, retro man" width="484" height="242"></a>
<h3 class="clr-primary mt-0 mb-2">
<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&B craft beer photo booth lyft gastropub 90's.
This is a<a href="/blog/web-design/second-web-design-post/" class="clr-underline"> Read more...</a></p>
</div>