Utility-First CSS and ITCSS architecture, is it possible?

Utility-First CSS is a set of utility classes. It’s a truly brilliant idea to speed up the front-end development work using great Tailwind CSS framework.

Bootstrap has great media queries mixins and breakpoints.

ITCSS architecture helps me to organize my CSS files in the most effective and structured way. It also increasing maintainability and reducing complexity.

Integration 👨🏻‍💻

I’ve always wondered could we somehow connect these few things into one place and spice it up using Gulp, Webpack, Babel, Live Reload and a template engine (e.g. Twig.js).
Done, it’s up and running. Hybrid Utility ITCSS.

tomaszbujnowicz/hybrid-utility-itcss

The basics

For the CSS utilities, I’ve taken CSS naming convention directly from Tailwind CSS, slightly adjusted it to my needs and included classes that I only need. Not always there is a possibility to configure Webpack or any other existing setups to work with Tailwind CSS. Thus I decided to use strictly SCSS and mixins to handle customization.

File size comparison:

• Utilities with responsiveness: 85kb (default)
• Utilities without responsiveness: 23kb
• No utilities (raw ITCSS): 12kb
• Utilities with responsiveness (layout only): 28kb
• Utilities with responsiveness (layout + flexbox): 36kb

Tip: you can significantly reduce the file size when you disable responsiveness of margin/padding utility classes.

ITCSS Overview

Get that ball rolling

We start with the settings folder where you can customize the most important pieces:

1. Breakpoints
2. Colors
3. Spacing
4. Typography
5. Utilities

When this is done most of your work will be done in a folder called /7-modules.

Have fun 👀

Welcome · Hybrid Utility ITCSS