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)
Titre de niveau 1 (4 / 2.5rem)
Titre de niveau 2 (2 / 2rem)
Titre de niveau 2 (2 / 2rem)
Titre de niveau 3 (1.8 / 1.8rem)
Titre de niveau 3 (1.8 / 1.8rem)

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



size

Alertes (bootstrap)








Formulaires
Input text
Copier le code
Checkbox
Copier le code
Radio
Copier le code
Select
Copier le code
Textarea
Copier le code
Panels (bootstrap)
Mon header
Mon contenu
Mon header
Mon contenu
Mon header
Mon contenu
Mon header
Mon contenu
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

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