medium bookmark / Raindrop.io |
A framework I am working on the last couple of years. After having several early adopters, who used it to build their high scale products, I decided it’s just right time to get it off beta and share it with the rest of the world! Well, it was already public, but I didn’t really promote it a lot.
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 spent most of my time working closely with designers. The most common issue I had was that all the CSS Frameworks I used in the past 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 do some compromises over his design and, to be honest, I didn’t like any of those solutions.
iotaCSS gives designers more flexibility than any other framework by adapting to their design instead of forcing them into designing in a specific way.
Let me demonstrate you a pretty common issue:
As you can see in the screenshots above, there are two different layouts in the same website and both are using a grid. The difference though is the gutter size ( size of the space between the columns ). Someone would 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?
As you can see from the previous example, iotaCSS has an important distinction compared to the classic CSS Frameworks. While a SASS based framework allows you to only adjust the values of several variables, iotaCSS uses a different approach.
With the use of sass maps, allows you to create as many variations you like and have a 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 several values. The code it creates though 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.
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 either use them alone or you can combine them with others 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.
One of the core things of iotaCSS is the sustainable and scalable architecture. It pays a lot of attention 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:
As we can see, iotaCSS contains modules that are separated into those 6 main categories:
Setting files contain global configurations that are shared by more than one module.
Tools are a set of sass mixins and functions.
E.g. Type Tool, RTL Tool etc
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.
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 overwritten.
E.g. Grid Object, Container Object, Media Object
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 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
iotaCSS allows you to have a full control over how your code behaves on different breakpoints.
One important issue I was always facing with most CSS Frameworks is that they give you a fixed number of breakpoints. Some projects usually require more and some less. iotaCSS has again its own approach on this issue. First, it gives you the ability to use as many breakpoints as you like, since it uses a sass map for them, where you can freely remove or add more and also name them however you like:
Then, all its modules, if they are set to responsive mode, they automatically behave as specified by creating responsive classes for you. Also, in case you want to have even more control over it, 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. That will avoid the whole framework to act on the new breakpoint and generate so much unnecessary code.
Now, let’s take a look at a common requirement and often 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 logic applies to all the modules of the framework.
The browser requirements do vary from project to project depending on its needs. One issue I was facing was, that CSS Frameworks usually are either flexbox based or not. There is no option to enable/disable flex on specific occasions.
iotaCSS allows you, with a global option, to enable/disable flexbox across all modules automatically.
Also, it’s worth to mention that the UI behaves exactly the same in both cases, so, visually, you see no difference. Only the code changes.
RTL or otherwise, “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 CSS code that produces 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:
Worths to mention that iotaCSS also provides a set of sass mixins and functions that will make your own sass code to support RTL automatically as well.
I am so excited talking about iotaCSS, that I would literally spend another day demonstrating its power but it’s completely unrelated to the content of this post. If you would like to learn more about it 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!
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 [email protected].
Special thanks to my friend Andrew Ckor for the awesome illustrations of this post and to Marek Šuščák for the comprehensive review.
Dimitris Psaropoulos is a front-end architect and performance engineer based in Prague, CZ. He had the privilege of working in products for companies like Nike, Salesforce, Chipotle, Node.io, VanityFair and more. He is the creator of the iotaCSS Framework. Previously Lead Front-end Architect at Chute (YC12).
AI-driven updates, curated by humans and hand-edited for the Prototypr community
