Guide CSS

  1. alignements
  2. flottants
  3. inline-block
  4. flexbox
  5. grilles
  6. largeurs
  7. marges externes
  8. variables (Sass)
 

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

grille monoligne

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

grille multilignes

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 responsive

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 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;

font sizes

$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;