iotaCSS works on top of SASS preprocessor. You provide a set of settings and it generates the final CSS code for you.

iotaCSS provides a set of modules (settings, tools, base, objects, components and utilities) and doesn’t force you to use them all. Choose which of them you need and install them easily with NPM.

Step 4: Import styles to your main files and HTML

The final step is to import all the files in your main files that will be compiled into CSS. It’s crucial to note that the order of these imports is really important. The order that is used with iotaCSS architecture is the following:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // main.scss // Settings @import "settings/core" ; @import "settings/<setting-name>" ; // Tools @import "tools/core" ; @import "tools/<tool-name>" ; // Base @import "base/<base-name>" ; // Objects @import "objects/<object-name>" ; // Components @import "components/<component-name>" ; // Utilities @import "utilities/<utilty-name>" ; 1 2 3 4 5 6 7 8 9 // index.html <html> <head> <link href= "<public-assets-path>/main.css" rel= "stylesheet" > </head> <body> <div id= "app" ></div> </body> </html>

For more information and tips you can check the official installation guide in the documentation.