SpaceFramework v1.2

# 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 this in the Setup guide.

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:

  1. Settings
  2. Tools
  3. Generic
  4. Elements
  5. Objects (OOCSS)
  6. Components (BEM)
  7. 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-text-classes.scss

Once generated by SCSS it should not output any code. (Unless you used CSS variables in the 1. Settings folder)

# 3. Generic

@include normalize();
@include space-unit-variables();
@include text-preset-variables();

# 4. Elements

@import 'typography';

# 5. Objects

@include layout-classes();
@include font-size-classes();
@include text-preset-classes();
@include self-classes();

# 6. Components

This folder is for specific UI components and where the majority of your work takes place. Consider the BEM methodology for structuring your components.

Since the SpaceFramework does not deliver components this is an empty folder within the SpaceFramework.

# 7. Utilities

The SpaceFramework comes with 3 utilities classes:

  • trim
  • implode
  • shift

We have included them in 7.utilities/__utilities.scss.

@include trim-classes();
@include implode-classes();
@include shift-classes();

If you used our init file (init-spaceframework.scss) to include the SpaceFramework then you can use the mixins above to include the utility classes on your preferred location. If you use ITCSS then you should include them in your utility folder.

← Viewports →