iotaCSS is a new CSS framework designed as a set of small independent modules. You can use one or all depending on your project, and it’s unique in how utilizes Sass Maps to create as many variations of CSS classes as you need.
Here is a comparison between the way Bootstrap generates it’s CSS based on a set of pre-defined variables, and how iotaCSS uses Sass Maps.
When you create your HTML, it uses the BEM methodology, namespacing and breakpoints suffixes. For example:
<nav class="c-navigation"> <a href="#" class="c-navigation__item">Item</a> <a href="#" class="c-navigation__item">Item</a> <a href="#" class="c-navigation__item c-navigation__item--primary">Item</a> </nav>
Here is a breakpoint example:
<p class="u-text-center u-text-right[email protected]">Center aligned in mobile, right aligned from tablet and over</p>
Every HTML class comes prefixed with a namespace according to the category it belongs.
- c- for components (e.g. c-modal , c-modal__title)
- u- for utilities
- o- for objects
- [is|has]-stateName for components and objects states (e.g. c-modal is-* open / c-modal has-form)
- js-className for JS hooks.
Finally, here is an example of their default grid:
<div class="o-grid"> <div class="o-grid__col u-3/12 u-pull-1/12"> Column </div> <div class="o-grid__col u-8/12"> Column </div> </div>
and the Sass to create those selectors with Flexbox:
$iota-objs-grid-flex: true; // use flexbox @import 'node_modules/iotacss-objs-grid/objects.grid';
My final takeaway is that if you are not familiar with the BEM methodologies, then you may have a learning curve wrapping your head around it, but with a little practice you can quickly pick it up.