Architecture
One of the core things of iotaCSS is its sustainable and scalable architecture inspired by ITCSS ( http://itcss.io ). 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:
Settings
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
Tools
Tools are a set of sass mixins and functions.
E.g. breakpoint mixin, modular scale mixin etc
Base
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
Objects
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
Components
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
Utilities
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