# Provoly - CSS

---

## Méthodologie CSS - aBEVM

Atomic + Blocks / Elements / Variations / Modifiers

### Atomic Design

- #### Atoms

Eléments non divisibles

Class name prefix: "a-"

Class name: `a-atomname`

Examples :

```angular2html
  <ul class="a-ul">
    <li class="a-ul__item">Item 1</li>
    <li class="a-ul__item">Item 2</li>
    <li class="a-ul__item">Item 3</li>
  </ul>
```

```angular2html
  <label for="anID" class="a-label">Your name</label>
```

```angular2html
  <input type="text" id="anID" class="a-input a-input-text" placeholder="Your name..." />
```

```angular2html
  <button class="a-btn a-btn-primary" type="button">Submit</button>
```

- ### Molecules

Regroupement de 1 ou plusieurs atomes pour former un élément simple.

Class name prefix: "m-"

Class name: `m-moleculename`

Examples :

```angular2html
<div class="m-form-item">
  <label for="anID" class="a-label">Your name</label>
  <input type="text" id="anID" class="a-input a-input-text" placeholder="Your name..." />
  <button class="a-btn a-btn-primary" type="button">Submit</button>
</div>

```

###

- ### Organisms

Regroupement de 1 ou plusieurs atomes et/ou molécules pour former un élément plus complexe.

Class name prefix: "o-"

Class name: `o-organismname`

Examples :

```angular2html
<div class="o-form-fieldset">
  <div class="m-form-item">
    <label for="anID" class="a-label">Your name</label>
    <input type="text" id="anID" class="a-input a-input-text" placeholder="Your name..." />
  </div>

  <div class="m-form-item">
    <label for="anID" class="a-label">Your name</label>
    <input type="text" id="anID" class="a-input a-input-text" placeholder="Your name..." />
  </div>
</div>


```

- ### Templates

Regroupement de 1 ou plusieurs atomes, molécules, organismes.

Class name prefix: `t-templatename`

Une même page peut utiliser un ou plusieurs templates

Plusieurs pages peuvent utiliser un ou plusieurs mêmes templates

```angular2html
<body class="t-list t-int">
  ...
</body>
```

- ### Pages

Unique

Class name prefix: `p-pagename`

Permet la surcharge de styles de template(s) sur une seule et même page

Example :

```angular2html
<body class="p-contact">
  ...
</body>
```

```angular2html
<body class="p-actuality t-list">
  ...
</body>
```

###

###

## Convention de nommage CSS

---

Atomic + Blocks / Elements / Variations / Modifiers

#### Block :

```angular2html
<div class="blockname">...</div>
```

### Element(s) :

Elements are block child

```angular2html
<div class="blockname__element1">...</div>
```

```angular2html
<div class="blockname__element1__element2"></div>
```

Example :

```angular2html
<div class="m-blockname">
    <div class="m-blockname__element1">
        <p class="m-blockname__element1__element2">
          <span class="m-blockname__element1__element2__element3"></span>
        </p>
    </div>
    <div class="m-blockname__element1">
        <span class="m-blockname__element1__element2">...</span>
    </div>
</div>
```

### Variations :

```angular2html
<div class="blockname--variante">...</div>
```

Example :

```angular2html
<button class="a-btn--primary">Button primary</button>
<button class="a-btn--secondary">Button secondary</button>
```

### Modifiers

A white space must be added before each modifier name

```angular2html
<div class="block -modifier1 -modifier2 -modifier3"></div>
```

Example :

```angular2html
<button class="a-btn -rounded -size-lg">Button primary</button>
<button class="a-btn -disabled -size-md -width-full">Button secondary</button>
```

### Combining Variations and Modifiers

```angular2html
<button class="a-btn--primary -rounded -size-lg">Button primary</button>
<button class="a-btn--secondary -size-md -width-full">Button secondary</button>
```

### Special cases

- Helpers/utility
- States classes
- Js hooks classes

```angular2html
<span class="js-hook blockname--variation -modifier u-util h-helper is-active">...</span>
```
