This is an ITCSS boilerplate which represents a map/file structure you can use to setup new ITCSS projects.
Each ITCSS folder has a numeric prefix so it shown in the right ITCSS order. This makes it easier to find files.
The main file in each ITCSS folder contains a double underscore so it is always shown on top within the folder structure. From this main file you can import other SCSS files.
-
Settings – used with preprocessors and contain font, colors definitions, etc.
-
Tools – globally used mixins and functions. It’s important not to output any CSS in the first 2 layers.
-
Generic – reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS.
-
Elements – styling for bare HTML elements (like
H1,A, etc.). These come with default styling from the browser so we can redefine them here. -
Objects – class-based selectors which define undecorated design patterns, for example media object known from OOCSS
-
Components – specific UI components. This is where majority of our work takes place and our UI components are often composed of Objects and Components. BEM is a good methology to use here.
-
Utilities – utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class. The utilities folder should be the only folder were
!importantmay be used.