New in v2
Three new utility sets, responsive variants for everything, and a quietly fixed row-gap so wrapped columns breathe. Same class names, same grid math — nothing from v1 breaks.
Order Utilities
Reorder columns without touching markup. Pair with responsive variants for things like "image on top on mobile, on the right on desktop."
order-last)order-first)
Source order is A, B, C — visual order is C, B, A. Responsive
variants: sm-order-first, md-order-first,
lg-order-last, etc.
Flex Direction
Use .flex-row-reverse to flip the horizontal order of
columns inside a .flex-grid. Responsive variants let
you flip direction per breakpoint.
Source order is 1, 2, 3 — visual order is 3, 2, 1. Use
.flex-row to reset back to default direction at a
larger breakpoint.
Responsive Alignment
The align-* and self-* utilities now have
responsive variants to match the existing justify-*
responsive classes. Change vertical alignment per breakpoint the
same way you change column widths.
<div class="flex-grid with-gutters sm-align-top md-align-middle lg-align-bottom">
<div class="flex-col sm-4">...</div>
<div class="flex-col sm-4 sm-self-stretch md-self-top">...</div>
<div class="flex-col sm-4">...</div>
</div>The Grid
The grid is a 12-column fluid grid with a max width. It's designed to be mobile-first. Columns stack on small screens and expand as the viewport increases.
Containers
Use containers to constrain and center your content. Each is shown below within a full-width `.content-wrapper` to demonstrate its max-width.
More Features
Auto & Shrink Columns
Use .col-auto to have a column fill remaining space,
and .col-shrink to have it only take up the space its
content needs.
Alignment Utilities
Easily align columns horizontally and vertically. Below, we align three columns with space around them.
You can also control vertical alignment for an entire row or for individual columns.
Quick Start
Just add the `smidgen.min.css` file and start building with this simple structure.
<!-- A full-width section with a centered container -->
<div class="content-wrapper">
<div class="content-well">
<!-- A responsive grid with gutters -->
<div class="flex-grid with-gutters">
<div class="flex-col sm-12 md-6">
...
</div>
<div class="flex-col sm-12 md-6">
...
</div>
</div>
</div>
</div>Smidgen for WordPress
Soon, you'll be able to bring the power and simplicity of SmidgenCSS directly into the WordPress block editor. A native block-based theme and a companion plugin with layout blocks are currently in development. Stay tuned!