import imgFolderStructure from './images/folder-structure.jpg';

<Meta title='1.Docs|02-Folder Structure'/>

# CSS-Organisation with ITCSS (Inverted Triangle CSS)
Always it is hard to organize CSS really good. So we use the principle by Harry Roberts and separate it in different layers. It is based on specifity - from the low to high specifity.

<img src={imgFolderStructure} />


## Basic Folderstructure
````
|- 01-settings/
|- 02-tools/
|- 03-generic/
|- 04-elements/
|- 05-objects/
|- 06-components/
|- 07-utilities/
application.scss
````

### 01. Settings  
Collect the global settings of the project. The output of this not directly in CSS. It only collect variables and maps.


### 02. Tools  
Global used mixins and functions. The output of this not directly in CSS.

File: `_tools.box-shadow.scss`
````scss
@mixin box-shadow() {
  box-shadow: 0 0 5px rgba(0,0,0,.3);
}
````

### 03. Generic  
The first layer which generates some CSS. Mostly resets or normalize html elements.

File: `_generic.reset.scss`
````scss
body {
  box-sizing: border-box;
}
````

### 04. Elements  
Redifinition default styling from the browser here.

File: `_elements.input.scss`
````scss
input {
  border: 1px solid $color-gray-light;
}
````

### 05. Objects  
Composition of undecorated design patterns like media object, lists etc. The prefix is `o-`.

File: `_objects.media.scss`
````scss
.o-media {
  display: flex;
  flex-direction: row;
}
````

### 06. Components  
The majority of work happens here. This layer contains specific UI Components. Also you find some local component configurations here. The prefix is `c-`.

File: `_components.button.scss`
````scss
.c-button {}
````

### 07. Utilities  
This layer has the ability to overwrite anything which goes before the triangle. The prefix is `u-`.

File: `_utilities.text.scss`
````scss
.u-danger {
  color: red;
}
````