Say hello to iota.

1 class.

That's right, one little class is all you need to get up and running. A few additional modifiers are available to unlock further layout possibilities.

584 bytes gzipped.

Iota is tiny. Like, really tiny. Depending on how you set it up, Iota's filesize can be reduced even further. Because, you know…every byte counts. #jkbutseriously

Endlessly flexible.

The secret sauce comes from merging CSS grid and all its power with custom properties, unlocking true layout freedom without a boatload of unused classes weighing you down.

Overview.

Get started by adding a class of grid to your target element. Voilà, we have a grid!Iota's fallback var() values can be overwritten at each defined breakpoint using CSS custom properties.Items have their own set of custom properties, which allow you to control layout on both the X and Y axis.Take advantage true source order independence by plotting each item to specific tracks on the grid. 🙌Using auto-fit / auto-fill with minmax() will layout items based on their size rather than breakpoints.Tap into justify-content and align-content to position spaced items relative to the grid.Additionally, justify-items and align-items can orient item content for the grid as a whole, or…Use justify-self and align-self to position the content of individual items on a case by case basis.We've only begun to scratch the surface here! Keep scrolling to learn more about how Iota works.

More information.

What's the big deal about this little framework?

Low overhead.

While traditional class-based grids often produce excessive amounts of unused styles, Iota eliminates this overhead by leveraging the flexibility of CSS custom properties to create a responsive wrapper for the grid spec so that each page of your website uses only what it needs.

Rapid prototyping.

Since all of Iota's properties are manipulated via inline styles, it is ideal for layout experimentation. This is particularly effective when combined with a component-based system like React, but works equally well for traditional website layouts.

Highly declarative.

Because of the way the grid spec works and how Iota is setup, there is essentially no guesswork to be done with how styles are affecting the layout. Overall grid structure is defined on the parent element and can be overwritten per item as needed.

Extensible.

Because CSS custom properties are just that—properties—you can take Iota's general framework and extend it however you see fit by creating classes that encapsulate layout patterns you wish to reuse.

Setting up a base grid.

Consider how you will most likely use grids throughout the majority of your project and use that to inform the property fallbacks for each value and breakpoint when you setup Iota. This will help to keep overwrites to a minimum.

Inheritance.

Values set for a custom property will be inherited by children using the same properties. For example, if you overwrite a parent grid to have 2 columns, any nested grids will inherit that layout unless otherwise specified.

Properties != classes.

With most mobile-first frameworks, classes applied at breakpoint typically apply to higher breakpoints as well. Overwrites for Iota's custom properties must be set at each level and do not affect other breakpoints.

Browser support.

Support for both the CSS grid spec as well as custom properties is limited to Edge 16+, Firefox 52+, Chrome 57+, Safari 10.1+, and Opera 44+. If you need to support Internet Explorer, you will need to implement layout fallbacks.

Reference.

Documentation for all custom properties as well as information on how to customize Iota.

Introduction.

Iota is a responsive, mobile-first framework for the grid spec powered by CSS custom properties.

In the code example, you will see the $iota_grid Sass map that sets up Iota's grid, which contains nested maps for each desired breakpoint and the default values of each property at that breakpoint. This is used to define the “baseline” grid that will be output every time the .grid class is used.

For example, you may decide that you want the number of columns at each breakpoint to look like:

xs

sm

md

lg

xl

1

2

2

4

4

you can setup your defaults as such and then overwrite them using Iota's custom properties when needed.

Overwriting defaults.

Expanding on the example above, let's say that for the lg and xl breakpoints you wish to use three columns instead of the default value. To do this you would use the --cols-@ custom property for each breakpoint as seen in the code sample here.

Keep in mind that with custom properties, overwrites must be applied at each level you wish to use a new value at, otherwise the default is used.

Reusable patterns.

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. Those custom properties used can be abstracted into a class and utilized wherever desired.

Mix and match.

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.

.grid

This class sets up the grid and enables the use of Iota's custom properties. You can also use the modifier class .is-inline, which will allow the grid to display as an inline element rather than block level.

The core focus of Iota centers around templating layouts. Out of the box, Iota uses the repeat() function for its column layouts, with 1fr as the default item size. This makes component composition more streamlined, as many times you may find you only wish to change the number of columns, but not the item size. This initial setup will keep you from having to rewrite the whole function each time an overwrite is desired.

If a completely custom structure is desired, using the --template-cols-@ property will fully overwrite the repeat statement at that breakpoint. For instance, you may wish to have three columns setup with different values each, like so: 200px 1fr 5rem.

There is no default row template as the majority of layouts tend to be structured using columns, but one can be specified using --template-rows-@. Keep in mind that there is no default abstraction for repeating rows using this property, so the entire row template must be specified at each breakpoint as desired.

Beyond templating, you have full access to other grid features such as gap size, content alignment, and more.