import imgIntro from './images/intro.jpg'

<Meta title='1.Docs|01-Intro'/>

# CSS Architecture
Our CSS Approach is writtend based on some principles. It is flexibale and scalable framework for your daily work. It is really easy to build new components, change the brand style or extend it. 

<img src={imgIntro} />
<br/>

## How to start

### 1. Change the basic colors
`01-settings/_settings.color.scss`

### 2. Change the basic font styles like size, weight and family
`01-settings/_settings.font.scss`

### 3. Change the size of the container
`01-settings/_settings.layout.scss`

### 4. Change the spacings
`01-settings/_settings.spacing.scss`

## Responsiveness
The boost theme is mobile-first framework. So we start on smaller screens and add styles for larger screens.

## Box-sizing
We switch the global `box-sizing` value from `content-box` to `border-box`. Rarely you need to override it, use something like the following:

```scss
.selector {
  box-sizing: content-box;
}
```

## Browsers and Devices
We support the latest, stable releases of all **major browsers and platforms.**

## CSS-Principles
We are using some kind of standards for writing scalable and maintainable styles.

* BEM (http://getbem.com/introduction/)
* SMACSS (https://smacss.com/)
* ITCSS (https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)
* OOCSS (http://oocss.org/)
* Atomic Design (http://atomicdesign.bradfrost.com/chapter-2/)

# Naming Convention
Our framework use the BEM-Convention to write readable classes. One of the best approach we think. **Take care that you don't interlace a lot.**

**Block**  
````scss
.c-button {}
````
**Element**
````scss
.c-button__element {}
````

**Modifier**  
````scss
.c-button--danger {}
````

### States
The principle has a lot of more ways how to write CSS, but Catwalk uses only two of that. The handling with states and ordering of properties in styling rule.

**States**  
We separate the normal styling rules from handling states like **`active`** or **`disabled`**. Please take care to put it in the end of the component.

````scss
.c-button {
  &.is-disabled {
    background-color: $color-gray;
  }
}
````