iotaCSS

iotaCSS is a CSS framework that’s been purposely crafted to be design-agnostic. It was created by consultant frontend architect Dimitris Psaropoulos, who felt that other CSS frameworks were imposing a lot of limitations on the designers he worked with. This was forcing him to either write a lot of code on top, or ask the designer to compromise. So instead, he created his own framework, which works a little differently. 

While most CSS Frameworks behave as a unit, iotaCSS is a set of individual, small and flexible modules that don’t depend on each other. You can use one independently or you can combine them to build more complicated user interfaces. 

iotaCSS is a framework I’ve been working on the last couple of years. After having several early adopters who used it to build their high scale products, I decided now is the right time to get it out of beta and share it with the rest of the world! Well, it was already public, but I didn’t promote it a lot.

A design agnostic framework

One of the most important features of iotaCSS, and the one I am most proud of, is that it’s design agnostic.

Over the last 7 years, I’ve spent most of my time working closely with designers. The most common issue was that all the CSS frameworks I used were imposing a lot of limitations on designers. To solve this I had to either write a lot of code on top of the framework or I had to ask the designer to compromise, and to be honest, I didn’t like either of those solutions.

iotaCSS is more like a SASS Generator

As you can see in the previous example, iotaCSS has an important distinction compared to the typical CSS frameworks. While most SASS based frameworks only allow you to adjust the values of a few variables, iotaCSS uses a different approach.

A set of independent modules

While most CSS Frameworks behave as a unit, iotaCSS is a set of individual, small and flexible modules they don’t depend on each other. You can use one independently or you can combine them to build more complicated user interfaces.

Another important advantage of this approach, is that you can use iotaCSS in your current stack for only the parts you like and it will not effect the behavior of your codebase at all since it doesn’t touch any HTML elements directly and also you have full control over the names of the classes it generates.

Solid Architecture

One of the core features of iotaCSS is the sustainable and scalable architecture. iotaCSS has a strong focus on how specificity evolves so that you don’t have any undesired behavior. iotaCSS follows the BEM Methodologyand its architecture is inspired by Atomic design & ITCSS.

Settings

Setting files contain global configurations that are shared by more than one module.

Tools

Tools are a set of sass mixins and functions.

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 use any class or ID selectors. Base styles are for the basic styles of an application, like Typography, Reset and styling of global elements.