A responsive micro-framework for the grid spec powered by CSS custom properties.
A responsive micro-framework for the grid spec powered by CSS custom properties.
The $iota_grid
Sass map sets up the grid defaults, which are output as fallback values using the CSS var()
function. These defaults can be overwritten as needed at each breakpoint specified in $iota_grid
, allowing you unlimited layout access with a minimal static footprint. This makes it perfect for rapid prototyping and experimenting with new layouts as any inline overwrites you add are only used in that instance.
For example, let's say that for the lg
and xl
breakpoints you wish to use three columns instead of the default values of 4. To do this you would use the --cols-@
custom property for each breakpoint (@
represents the slug for each breakpoint set):
<div class="grid" style="--cols-lg: 3; --cols-xl: 3;">
<!-- grid items -->
</div>
Taking our example one step further, let's say that you have decided the three column layout from above is one you wish to use on a few different pages throughout your site. Since custom properties are just that—properties—those custom properties can be abstracted into a class and utilized wherever desired:
<style>
.custom {
--cols-lg: 3;
--cols-xl: 3;
}
</style>
<div class="grid custom">
<!-- grid items -->
</div>
Remember that Iota's custom properties are meant to augment—not replace—standard grid properties by providing some sensible defaults along with a responsive wrapper for properties that you need to change at different breakpoints.
In situations where you don't need the responsiveness, feel free to utilize standard CSS properties instead to save on having to rewrite the same declaration over and over. For example, if you know that you'd like to have a grid with no spacing between cells all the time, using grid-gap
instead of --gap-@
at each breakpoint will work perfectly:
<style>
.custom {
grid-gap: 0;
--cols-lg: 3;
--cols-xl: 3;
}
</style>
<div class="grid custom">
<!-- grid items -->
</div>
Make sure to check out the project homepage Overview section to see some live examples.
All of Iota's documentation is found on its project homepage under the Reference section.