One of the core things of iotaCSS is its sustainable and scalable architecture inspired by ITCSS ( ). It pays a lot of attention on how specificity evolves so that you don’t have any undesired behavior. Styles are grouped into the following categories:


Setting files contain global configurations that are shared by more than one modules. Settings that are connected to one and only module are a part of the module itself.

E.g. colors, grid sizes, typography sizes, breakpoints etc

Read more


Tools are a set of sass mixins and functions.

E.g. breakpoint mixin, modular scale mixin etc

Read more


Default styles of base elements. A Base rule is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudo-classes. It doesn’t include any class or ID selectors. Base styles are related to the basic styles of an application, like Typography, Reset and styling of global elements.

E.g. initialize ( iotaCSS’s modern reset and normalize combination ) default margins in paragraphs, headings etc

Read more


Objects are class-based selectors which define undecorated design patterns like grid or media object. They provide structure to your content, do not contain any cosmetic CSS and they should never directly overitten.

E.g. grid, media object, list, container etc

Read more


Components are UI elements. They contain cosmetic CSS and they can be directly overwritten to fit your UI Kit style. iotaCSS provides a set of minimalistic components, having the minimum needed styling, all controlled by options, to achieve zero unnecessary CSS property override.

E.g. link, button, modal, form, header, footer, navigation, card, profile widget, avatar etc

Read more


Utilities are high-specificity, very explicit classes. They are used as overrides and helper classes. iotaCSS provides almost all the utilities you will ever need.

E.g. text-align, float, position, display etc

Read more