Guide CSS complet

Dans cet article sont présentées plusieurs classe CSS qui permettent de styliser les textes riches présents sur le site.

Télécharger la version mémo
 

Alignements

text img
text img
text img
 
 
 

Flottants

.fl
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
.fr
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
.fl
.clear
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
.fl
.bfc
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Inline-block

.inbl .inbl .inbl
.inbl .w25 .inbl w33 .inbl

Flexbox

 
div span ...
div span ...
.w33 .w33 .w33
.w200p .w33 stuff
div span .flex-item-fluid
.flex-item-fluid .flex-item-fluid .flex-item-fluid
div span .item-last
div span .item-first
.flex-item-center

Grilles

Grilles mono-ligne

 
div span img p ...
div span img p ...

Grilles multi-lignes

 
div span img p ...
div span img p ...
div span img p ...
div span img p ...
div span img p ... ... ... ...
div span img p ... ... ... ... ... ... ... ... ... ... ... ...

Ordonnancement

 
div span img p .item-first
.item-last span img p ...

Grilles responsives

 
div span img p ... ... ... ...
div span img .push ...

Tailles individuelles

 
.one-half ... ...
.one-sixth .one-sixth .two-thirds .one-third .two-thirds .one-quarter .two-quarters .full ...
.one-sixth .one-sixth .two-thirds .one-third .two-thirds .one-quarter .two-quarters .full ...

Largeurs

Largeurs en %

.w10
.w20
.w25
.w33
.w40
.w50
.w60
.w66
.w70
.w80
.w90
.w100
.wauto

Largeurs en pixels (px)

.w50p
.w100p
.w150p
.w200p
.w300p
.w400p
.w500p
.w600p
.w700p
.w800p
.w960p
.mw960p

Marges externes (margin)

.mls
.mlm
.mll
.mrs
.mrm
.mrl
.mts
.mtm
.mtl
.mbs
.mbm
.mbl
.mas
.mam
.mal
.man

Variables (Sass)

Espacements

$tiny-value             : .5rem;
$tiny-plus-value        : .7rem;
$small-value            : 1rem;
$small-plus-value       : 1.5rem;
$medium-value           : 2rem;
$medium-plus-value      : 3rem;
$large-value            : 4rem;
$large-plus-value       : 6rem;
$extra-large-value      : 8rem;
$extra-large-plus-value : 12rem;
$ultra-large-value      : 16rem;
$ultra-large-plus-value : 20rem

Breakpoints

$tiny: 480px;
$small: 576px;
$medium: 768px;
$large: 992px;
$extra-large: 1200px;

Taille de police

$base-font-size : 1.6rem; // "16px" equivalent
$line-height  : 1.5;
$h1-size      : 3.2rem;
$h2-size      : 2.8rem;
$h3-size      : 2.4rem;
$h4-size      : 2.0rem;
$h5-size      : 1.8rem;
$h6-size      : 1.6rem;