Get Started with iotaCSS

iotaCSS is a smart and minimalistic CSS Framework built for scale. It’s SASS based, follows the BEM Methodology and is inspired by ITCSS, OOCSS & Atomic design. In general iotaCSS provides you the following:

1. Solid Architecture - File structure as well the way of thinking and developing.
2. HTML Class Naming Conventions - How to name your HTML classes.
3. Ready to use styles - Configurable, responsive and design agnostic auto-generated styles.

Architecture

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:

1. Settings - Global settings of your project like colors, font and gutter sizes.
2. Tools - SASS mixins & functions.
3. Base - Base styles like reset and normalize.
4. Objects - Structural elements without cosmetic CSS, like grid, media object and typography.
5. Components - UI components with CSS cosmetics like modals, buttons, links, header, footer, nav, etc.
6. Utilities - Single purpose classes like text-align, float, color with high specificity.

Read more about the architecture →

HTML Class Naming

iotaCSS has adopted some of the best naming techniques to make sure that every HTML class is readable and easily discoverable into your codebase. The main techniques it uses are the BEM methodology, namespacing and breakpoints suffixes.

Read more about the HTML Class Naming →

Installation

Installing iotaCSS is easy and straightforward. Read the installation guide for more details.