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

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

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

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

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

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

Settings

Tools

E.g. Type Tool, RTL Tool etc

Base

Objects

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

Components

E.g. Button Component, Modal Component etc

Utilities

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

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

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

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).

iotaCSS

Stories about scalable and modular modern CSS

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store