Pour saisir rapidement les classes les plus utilisées, j'ai réservé des noms très courts
- la première lettre est le type de propriété CSS : w: width, m: margin, p: padding
- la deuxième lettre peut avoir 2 sens :
- indicateur de taille d'écran : s pour small, smartphone et m pour medium, moyen
- le coté concerné : l: left, t: top, r: right, b: bottom, h: horizontal (left & right), v: vertical (top & bottom)
- la troisième lettre est le coté en cas de mention d'une taille d'écran.
- le nombre ou auto indique la valeur ou l'indice de la valeur.
Quelques exemples pour comprendre le principe:
- w6 : width:6/12=50% → largeur du bloc en pourcentage
- ws6 → idem mais seulement sur mobile (s)
- m1 : margin: 10px; → l'indice 1 est défini à 10px dans les variables SCSS
- mm1 → idem mais seulement sur tablette (m)
- mst2 : margin-top: 20px → marge top sur mobile (s)
- psr1 : padding-right:10px → padding de 10px sur mobile (s)
- mcenter : margin-left & margin-right sur auto pour centrer un bloc
WIDTH - largeur des blocs sur la base d'une grille de 12 colonnes
Syntaxe : w[ecran]largeur en % w[s|m]0|1|2|3|4|5|6|7|8|9|10|11|12|auto|25|50|75|100
Une largeur de zéro est équivalent à un display:none. Exemple: ws0 = invisible sur mobile
<div class="cell-row tc">
<div class="cell bg-bleuClair w4 pv2">avec w4, j'occupe le tiers de l'espace</div>
<div class="cell bg-vert w20 wm4 ws0" >w20 wm4 ws0. Je disparait sur mobile</div>
<div class="cell bg-orange w2">w2</div>
<div class="cell bg-violet wauto">wauto, la place restante</div>
</div>
Note : par commodité, les classes 25, 50, 75 et 100 indiquent la largeur du bloc en pourcentage.
MARGIN - les marges autour des blocs
Syntaxe : p[ecran][coté][dimension] m[s|m][l|t|r|b|h|v]0|1|2|3|center|left|right
<div class="bloc tc">
<div class="w3 float-left bd-orange">
<div class="m0 bg-orange">m0</div>
</div>
<div class="w3 float-left bd-bleuClair">
<div class="m1 bg-bleuClair">m1</div>
</div>
<div class="w3 float-left bd-orange">
<div class="mcenter w50 bg-orange">w50 mcenter</div>
</div>
<div class="w3 float-left bd-bleuClair">
<div class="mt3 ms0 bg-bleuClair">mt3 ms0</div>
</div>
</div>
m-child-raz
supprime la marge haute du premier enfant et la marge basse du dernier enfant d'un bloc. Cette règle est très pratique dans une boite, pour éviter que les règles des enfants soient prioritaires sur celles du parent.
Titre
Contenu
<div class="bloc bd-bleuClair tc">
<h2>Titre</h2>
<p>Contenu</p>
</div>
Titre
Contenu
<div class="bloc m-child-raz bd-bleuClair tc">
<h2>Titre</h2>
<p>Contenu</p>
</div>
PADDING - les marges internes aux blocs
Syntaxe : p[ecran][coté][dimension] p[s|m][l|t|r|b|h|v]0|1|2|3
<div class="fg-row fg-gap fg-vtop">
<div class="fg-c3 fg-cm5 fg-cs6 bd-orange p0"><b>p0</b> ... Laboro autem non sine causa.</div>
<div class="fg-c3 fg-cm7 fg-cs6 bd-orange p1"><b>p1</b> ...</div>
<div class="fg-c3 fg-cm6 bd-orange ph3 psh1"><b>ph3 psh1</b> ...</div>
<div class="fg-c3 fg-cm6 bd-orange pv1"><b>pv1</b> ...</div>
</div>
HEIGHT - une hauteur minimale en pixels
Pour réserver une hauteur minimale en pixels, on dispose d'une classe responsive minh[s|m]0|100|200|400
et hscreen
j'occupe la hauteur de la fenêtre du navigateur
Et une hauteur maximale
La même chose pour une hauteur maximale en pixels avec ajout d'un ascenseur maxh[s|m]0|100|200|400
.maxh100
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere. Bona autem corporis huic sunt, quod posterius posui, similiora. Terram, mihi crede, ea lanx et maria deprimet. Idem iste, inquam, de voluptate quid sentit? Quid est, quod ab ea absolvi et perfici debeat? Et harum quidem rerum facilis est et expedita distinctio. Duo Reges: constructio interrete. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus. Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam; De hominibus dici non necesse est. Sed quae tandem ista ratio est?
Illo enim addito iuste fit recte factum, per se autem hoc ipsum reddere in officio ponitur. Et harum quidem rerum facilis est et expedita distinctio. Ut in geometria, prima si dederis, danda sunt omnia. Bork Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Honesta oratio, Socratica, Platonis etiam. Qui bonum omne in virtute ponit, is potest dicere perfici beatam vitam perfectione virtutis; Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas.
Itaque e contrario moderati aequabilesque habitus, affectiones ususque corporis apti esse ad naturam videntur. Minime vero, inquit ille, consentit. Haec et tu ita posuisti, et verba vestra sunt. Bork Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos adiit? Ergo et avarus erit, sed finite, et adulter, verum habebit modum, et luxuriosus eodem modo. Respondent extrema primis, media utrisque, omnia omnibus. Nihilne te delectat umquam -video, quicum loquar-, te igitur, Torquate, ipsum per se nihil delectat?