Introducing iotaCSS

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 gives designers more flexibility than any other framework by adapting to their design instead of forcing them to design in a specific way.

Let me demonstrate you a pretty common issue:

In the screenshots above, there are two different layouts in the same website and both are using a grid. The difference between them is the gutter size ( size of the space between the columns ). Some might argue that this is a design inconsistency and that the designer is not following the grid, but I believe this is absolutely normal, and actually the second layout looks much better with a smaller gutter.

In a typical CSS Framework, this is not natively supported. In iotaCSS is just one option:

How amazing is that?

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.

By using sass maps, iotaCSS allows you to create as many variations as you like and have full control over the classes being generated.

Let’s take a look at the following wireframe to see how SASS Bootstrap manages the typography sizes and how iotaCSS does it:

As you can see here, Bootstrap has a static number of variables that they allow you to change. The code it creates is always the same, just with different values.

With iotaCSS, you have complete flexibility to create as many typography sizes as you like and name them however you like.

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.

That makes the migration to iotaCSS a piece of cake, compared to a typical CSS Framework, where you have to re-write your whole stack at once.

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 Methodology and its architecture is inspired by Atomic design & ITCSS.

Let’s have a fast look at the iotaCSS Architecture:

iotaCSS contains modules that are separated into these 6 main categories:

Settings

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

Tools

Tools are a set of sass mixins and functions.

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

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 be directly overwritten.

E.g. Grid Object, Container Object, Media Object

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. Button Component, Modal Component 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 Utility, Position Utility, Display Utility etc

Fully Responsive

iotaCSS allows you to have full control over how your code behaves at different breakpoints.

One important issue I was always facing with most CSS frameworks is that they only allow a fixed number of breakpoints. But many projects require more breakpoints. iotaCSS has its own approach on this issue. First, since it uses a sass map for breakpoints, you can freely add or remove as many breakpoints as you like and also name them however you like:

Also, all the modules, if they are set to responsive mode, automatically behave as specified by creating responsive classes for you. And in case you want to have even more control, iotaCSS allows you to set specific breakpoints for individual modules, for example, let’s see the Text Utility:

This will use the extra ‘xs’ breakpoint only for the Text Utility classes. This prevents the whole framework from using the new breakpoint and generating lots of unnecessary code.

Now, let’s take a look at a common requirement and frequent issue with previous frameworks. What if your grid has different gutter sizes over different breakpoints? iotaCSS can manage this with a single line of code:

This will make your default grid gutter be 14px on mobile, 21px on tablets and 28px on desktops. :) Same applies to the extra gutter sizes of the grid:

And of course, this applies to all the modules of the framework.

Native Flexbox support

The browser requirements vary from project to project depending on its needs. One common issue is that CSS frameworks are usually either flexbox based or not. There is no option to enable/disable flex in specific situations.

With a global option, iotaCSS allows you to enable/disable flexbox across all modules automatically.

Also, it’s worth mentioning that the UI behaves exactly the same in both cases, so visually you see no difference. Only the code changes.

Native RTL support

“Right to Left” is one thing that doesn’t really bother most of us, until we need to work with a client that requires it. For most frameworks out there, this issue is usually solved by applying a set of overrides over the actual code, in order to change the behavior of all the pieces of the UI. iotaCSS tackles this task differently.

As a SASS generator that natively supports RTL, iotaCSS automatically re-writes the code in an RTL way, so the actual generated CSS code doesn’t contain even one more line of code than it did without RTL.

By changing one line of code, all iotaCSS modules will automatically use the corresponding RTL version:

It is worth mentioning that iotaCSS also provides a set of sass mixins and functions that will make your own sass code support RTL automatically as well.

Documentation and iotaCasts

I am so excited talking about iotaCSS that I would literally spend another day demonstrating its power, but it’s unrelated to the focus of this post. If you would like to learn more about iotaCSS or start using it, head over to the website or to the documentation. Also make sure you subscribe to the iotaCasts, the official iotaCSS Courses, and be the first to know when they are online! Make sure to checkout iotaCSS: The next steps article for cool new features coming to iotaCSS and learn more about iotaPlate, iotaCSS’s official CLI.

If you have any questions about iotaCSS or just want to say hi, tweet me at @harbyme or @iotacss. I would be more than happy to answer your questions or hear your feedback. Also, feel free to email me at iotacss@gmail.com.

Special thanks to my friend Andrew Ckor for the awesome illustrations of this post and to Marek Šuščák for the comprehensive review of the article.

Dimitris Psaropoulos is a front-end architect and performance engineer based in Prague, CZ. He had the privilege of working in products for companies such as Nike, Salesforce, Chipotle, Node.io, VanityFair & more. He is the creator of the iotaCSS Framework. Previously Lead Front-end Architect at Chute (YC12).