Guide des styles

Utils

Couleurs

principales
grey
border
mono
text

Polices

  • Barlow .font-primary
  • Barlow-bold .font-primary-bold

Titres

Titre de niveau 1 (4 / 2.5rem)
<span class="h1">Titre de niveau 1 (4 / 2.5rem)</span>
Titre de niveau 2 (2 / 2rem)
<span class="h2">Titre de niveau 2 (2 / 2rem)</span>
Titre de niveau 3 (1.8 / 1.8rem)
<span class="h3">Titre de niveau 3 (1.8 / 1.8rem)</span>

Bordures

border-bottom
border-primary-top
border-primary-left

Text

body-regular (1.5/1.3rem)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel nisi eget diam commodo fringilla. Ut elementum posuere ipsum gravida auctor. In sodales ex quam, id scelerisque lacus finibus sed. Proin tempus massa vitae purus dapibus tincidunt.
body-large (1.6rem)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel nisi eget diam commodo fringilla. Ut elementum posuere ipsum gravida auctor. In sodales ex quam, id scelerisque lacus finibus sed. Proin tempus massa vitae purus dapibus tincidunt.
body-small (1.2rem)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel nisi eget diam commodo fringilla. Ut elementum posuere ipsum gravida auctor. In sodales ex quam, id scelerisque lacus finibus sed. Proin tempus massa vitae purus dapibus tincidunt.
Conteneurs
  • Conteneur xs

    .xs-ctn
  • Conteneur small

    .small-ctn
  • Conteneur medium

    .medium-ctn
Spacing
Value REM Pixels
0 0 0
1 0.5 5
2 1 10
3 1.5 15
4 2 20
5 3 30
6 4 40
7 5 50
8 6 60
9 8 80
10 12 120
Autres helpers
Classe Propriété
.d-inline-block display: inline-block
.d-block display: block
.d-inline display: inline
.position-relative position: relative
.position-absolute position: absolute
.underline text-decoration: underline;
.text-right text-align: right;
.text-left text-align: left;
.text-center text-align: center;
.barre text-decoration: line-through;
.upper text-transform: uppercase;
.cover background-size: cover;
.no-repeat background-repeat: no-repeat;
.fh height: 100%
.fw width: 100%
.nw white-space: nowrap;
.img-responsive max-width: 100%
.fix-ht-img font-size: 0; line-height: 0;

Components

Boutons

simple
<button class="btn btn-primary">
    Bouton primaire
</button>
<button class="btn btn-primary" disabled="">
    Bouton primaire
</button>
<button class="btn btn-secondary">
    Bouton secondaire
</button>
<button class="btn btn-secondary" disabled="">
    Bouton secondaire
</button>
<button class="btn btn-ternary">
    Bouton ternaire
</button>
<button class="btn btn-ternary" disabled="">
    Bouton ternaire
</button>
size
<button class="btn btn-primary btn-big">
    Gros bouton
</button>
<button class="btn btn-primary btn-small">
    Petit bouton
</button>

Alertes (bootstrap)




<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>
<br>
<div class="alert alert-info" role="alert">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<br>
<div class="alert alert-warning" role="alert">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<br>
<div class="alert alert-danger" role="alert">
    <strong>Oh snap!</strong> Change a few things up and try submitting again. 
</div>
Formulaires
Input text
Copier le code
<div class="form-group form-ctrl-ctn">
    <label for="text">Votre prénom</label>
    <input id="text" type="text" class="form-control" placeholder="Mon prénom">
</div>
Checkbox
Copier le code
<form class="ng-pristine ng-valid">
    <div class="checkbox">
        <label>
            Checkbox non cochée 
            
        <div class="custom-checkbox inline"><input type="checkbox" data-ng-model="la2" name="rememberMe" class="ng-pristine ng-untouched ng-valid ng-empty"></div></label>
    </div>
    <div class="checkbox checked">
        <label>
            Checkbox cochée 
            
        <div class="custom-checkbox inline checked"><input type="checkbox" data-ng-model="la" name="rememberMe" ng-checked="true" class="ng-pristine ng-untouched ng-valid ng-empty" checked="checked"></div></label>
    </div>
</form>
Radio
Copier le code
<form class="ng-pristine ng-valid">
    <div class="radio">
        <label>
            Radio none cochée
            
        <div class="custom-radio inline"><input type="radio" data-ng-model="la2" name="rememberMeRadio2" class="ng-pristine ng-untouched ng-valid ng-empty"></div></label>
    </div>
    <div class="radio checked">
        <label>
            Radio cochée
            
        <div class="custom-radio inline checked"><input type="radio" data-ng-model="la" name="rememberMeRadio2" checked="checked" class="ng-pristine ng-untouched ng-valid ng-empty"></div></label>
    </div>
</form>
Select
France
  • France
  • Espagne
Copier le code
<div class="form-group">
    <label for="text">Pays</label>
    <select>
        <option value="">France</option>
        <option value="">Espagne</option>
    </select>
</div>
Textarea
Copier le code
<div class="form-group">
    <label for="text">Précisez les produits dont vous pensez avoir besoin</label>
    <textarea class="form-control"></textarea>
</div>
Panels (bootstrap)
Mon header
Mon contenu
Mon header
Mon contenu
<div class="row start-xxs">
    <div class="xxs12 sm6 md4">
        <div class="panel panel-default">
            <div class="panel-heading">Mon header</div>
            <div class="panel-body form-horizontal">
                Mon contenu
            </div>
        </div>
    </div>
    <div class="xxs12 sm6 md4">
        <div class="panel panel-default">
            <div class="panel-heading">Mon header</div>
            <div class="panel-body form-horizontal">
                Mon contenu
            </div>
        </div>
    </div>
</div>
Richtext

titre h1

titre h2

titre h3

titre h4

paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac blandit ex. Sed quis sollicitudin nibh, a laoreet ligula. Nulla posuere eget felis eu bibendum. Integer eget ullamcorper odio. Donec vestibulum, lectus eu pellentesque dapibus, sem nisi porttitor tellus, a venenatis justo elit volutpat risus. Nunc vitae enim ultricies, congue est at, porta sapien. Donec ut luctus justo. Nulla at sodales eros. Aenean in libero erat. Duis nec imperdiet arcu. Vestibulum eu quam sit amet metus malesuada semper. Mauris sagittis nisi quis orci dictum, id scelerisque augue accumsan.

  • élément de liste 1
  • élément de liste 2
  • élément de liste 3
  1. élément de liste ol 1
  2. élément de liste ol 2
  3. élément de liste ol 3
citation - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac blandit ex. Sed quis sollicitudin nibh, a laoreet ligula.
strong em
th th th
td td td
td td td
<div class="richtext">
    <h1>titre h1</h1>
    <h2>titre h2</h2>
    <h3>titre h3</h3>
    <h4>titre h4</h4>
    <p>paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac blandit ex. Sed quis sollicitudin nibh, a laoreet ligula. Nulla posuere eget felis eu bibendum. Integer eget ullamcorper odio. Donec vestibulum, lectus eu pellentesque dapibus, sem nisi porttitor tellus, a venenatis justo elit volutpat risus. Nunc vitae enim ultricies, congue est at, porta sapien. Donec ut luctus justo. Nulla at sodales eros. Aenean in libero erat. Duis nec imperdiet arcu. Vestibulum eu quam sit amet metus malesuada semper. Mauris sagittis nisi quis orci dictum, id scelerisque augue accumsan.</p>
    <ul>
        <li>élément de liste 1</li>
        <li>élément de liste 2</li>
        <li>élément de liste 3</li>
    </ul>
    <ol>
        <li>élément de liste ol 1</li>
        <li>élément de liste ol 2</li>
        <li>élément de liste ol 3</li>
    </ol>
    <blockquote>
        citation - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac blandit ex. Sed quis sollicitudin nibh, a laoreet ligula. 
    </blockquote>
    <strong>strong</strong>
    <em>em</em>
    <table>
        <thead>
            <tr><th>th</th>
            <th>th</th>
            <th>th</th>
        </tr></thead>
        <tbody>
            <tr>
                <td>td</td>
                <td>td</td>
                <td>td</td>
            </tr>
            <tr>
                <td>td</td>
                <td>td</td>
                <td>td</td>
            </tr>
        </tbody>
    </table>
</div>