pense-bête en PDF

v5​
CheatSheet
Helpers de largeur
Alignements
.w10, … .w100
.w100p … .w1140p
.mw960p
.mw1140p
.wauto
.txtleft, .txtright,
.txtcenter
.left, .right, .center
width 10% à 100%
width 100px à 1140px
max-width 960px
max-width 1140px
width: auto
Helpers d’espaces
.man
.pan
.mas, .mam, .mal
.pas, .pam, .pal
.mts, .mtm, .mtl
.pts, .ptm, .ptl
“margin all none” (=margin: 0)
“padding all none” (=padding: 0)
"margin all small|medium|large"
"padding all
small|medium|large"
"margin top
small|medium|large"
"padding top
small|medium|large"
Helpers responsive
.large.medium.small.tiny-
préfixe destiné aux écrans larges
préfixe destiné aux écrans
medium
préfixe destiné aux écrans small
préfixe destiné aux écrans tiny
Points de rupture (@include Sass)
@include
media('>=large-screen')
{...}
tiny-screen
tiny-plus-screen
small-screen
small-plus-screen
medium-screen
medium-plus-screen
large-screen
large-plus-screen
extra-large-screen
ultra-large-screen
syntaxe type
320px
480px
640px
768px
960px
1024px
1280px
1440px
1600px
1920px
Variables d’espaces (Sass)
$tiny-value
$tiny-plus-value
$small-value
$small-plus-value
$medium-value
$medium-plus-value
$large-value
$large-plus-value
$extra-large-value
$extra-large-plus-value
$ultra-large-value
$ultra-large-plus-value
.5rem
.7rem
1rem
1.5rem
2rem
3rem
4rem
6rem
8rem
12rem
16rem
20rem
alignements de contenus (via
text-align)
alignements de blocs (via margin)
Positionnement flottant
.fl, .fr
.clearfix
.clear
.bfc
float-left float-right
contient les flottants
se place sous les flottants
“BFC” contient les flottants et se
place à côté des flottants
Positionnements variés
.inbl
.row
.col
élément en display: inline-block
tableau CSS (parent de .col)
colonne de tableau CSS
Positionnement flexbox
.flex-container
.flex-container-v
.flex-item-fluid
.flex-item-center
.flex-item-first​
|​
medium
|l​
ast
parent flexbox (horizontal)
parent flexbox (vertical)
enfant flexbox de taille fluide
enfant centré (horizontal et vertical)
enfant affiché avant, entre ou après
ses frères
Grilles de mise en page
.grid-2,... .grid-12
.grid-2-1,.grid-1-2
.grid-3-1,.grid -1-3
.grid-4 -1,.grid -1-4
.pull, .push
.grid-item-double
conteneur de colonnes égales
grille de largeur inégale (2-1 ou 1-2)
grille de largeur inégale (3-1 ou 1-3)
grille de largeur inégale (4-1 ou 1-4)
élément poussé (gauche ou droite)
élément de taille double
Grilles responsive
.grid-X(-small-Y)(-tiny-Z)
syntaxe type
.grid-3-tiny-1
.grid-4-small-2
.grid-6-small-3-tiny-2
3 colonnes, puis 1 sur écran “tiny”
4 colonnes, puis 2 sur écran "small"
6 colonnes, puis 3 sur écran "small",
puis 2 sur écran "tiny"
Variables diverses
$base-font-size
$line-height
$h1-size ... $h6-size
$font-stack-common,
$font-stack-headings,
$font-stack-monospace
taille de police de base
hauteur de ligne de base
taille de police des titrages
familles de police
http://knacss.com