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.

iotaCSS vs Bootstrap

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@sm">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:



  

    Column
  

    

    Column
  


</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';

If you are looking for a full-featured framework iotaCSS might not be the best fit, because it doesn’t include any JavaScript utilities; however, it does have a modal component that gives you the CSS selectors, it’s just left up to you to implement it. With so many modern JavaScript frameworks I do not believe that is a bad thing and keeps you from being tied to jQuery or some other choice the framework developer chose.

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.

For more information on this new framework take a look at their official site, the documentation, and they are working on releasing video tutorials.