ITCSS
The SpaceFramework uses the ITCSS architecture for its directory structure. In this article we explain what ITCSS is and how it can work to organize your projects even better.
If you are familiar using ITCSS, then it is very easy to integrate the SpaceFramework in your own project. You can read more about integration here.
If you are not using ITCSS, then you might consider the ITCSS architecture. In this article we explain how ITCSS works and how it helps you organize your CSS code.
What is ITCSS?
ITCSS is basically nothing more then an idealogic folder structure to organize your SCSS, LESS or CSS code. It is simular to SMACSS but way more envolved. If you already using naming conventions such as OOCSS and BEM, then you gonna love our ITCSS structure.
The thought behind its folder structure is however way bigger then just a folder structure. It focuses on maintaining clear code which is easily expandable and writing as less code as possible.
ITCSS knows the following main folders:
- Settings
- Tools
- Generic
- Elements
- Objects (OOCSS)
- Components (BEM)
- Utilities
Folder structure
Lets break it down:
1. Settings
The Settings folder is meant for all global variables and global settings. It may not contain any function / mixins or classes. Once generated by SCSS it should not output any code. (Unless you are using CSS variables)
You could add files such as:
_colors.scss
, _font-weights.scss
and _font-sizes.scss
2. Tools
In Tools you can put all SCSS Mixins and Functions.
You can add files such as:
_generate-font-classes.scss
Once generated by SCSS it should not output any code. (Unless you used CSS variables in the 1. Settings folder)
3. Generic
We will add documentation soon
4. Elements
We will add documentation soon
5. Objects
We will add documentation soon
6. Components
We will add documentation soon
7. Utilities
We will add documentation soon