CSS - la feuille de style interne

Pour être indépendant des templates, UP embarque sa propre feuille de style.

Elle est responsive, très légère et sera chargée par la première action qui l'utilise.

Elle est écrite en SCSS afin d'être facilement personnalisée, principalement en redéfinissant les variables.

[s|m] indique que vous pouvez saisir s, m ou rien pour indiquer si la règle s'applique aux mobiles (s), aux tablettes (m) ou par défaut.

[l|t|r|b|h|v] spécifie le coté : left, top, right, bottom, horizontal (left et right) ou vertical (top et bottom)

Démo Description Résumé
width
height
&
spacing		 Ces classes, aux noms très très courts, permettent de gérer la largeur des blocs, les margins et paddings.

w4 largeur 33%, ws6 ou ws50 50% sur mobile,
wauto largeur auto, w0 = invisible

.m-child-raz[-1|-2] supprime marge externe premier et dernier enfant

Width/Largeur : w[s|m]0|1|2|3|4|5|6|7|8|9|10|11|12|auto|25|50|75|100

min-height en px : minh[s|m]0|100|200|400

max-height en px : maxh[s|m]0|100|200|400

max-width en px : maxw[s|m]100|200|400|600|800

max-width en vw : maxw[s|m]50|75|90vw

Hauteur écran : hscreen

Margin : m[s|m][l|t|r|b|h|v]0|1|2|3

Margin : m[s|m]center|left|right

Padding : p[s|m][l|t|r|b|h|v]0|1|2|3

Color
&
Border

noir grisFonce gris grisClair grisPale blanc bleuFonce bleu bleuClair bleuPale vertFonce vert vertClair brun beige rougeFonce rouge rougeClair jauneFonce jaune jauneClair orange rose violet transparent 30 50 80

Fond : bg-[hover-]<color>|30|50|80

Texte : t-[hover-]<color>

Bordure couleur : bd-[hover-]<color>

Bordure largeur : bd[l|t|r|b]0|1|2|3|

Bordure style : bd-[solid|dotted|rond|arrondi]

Ombrage : ombre[Max][-hover]

Existe en anglais : noir black grisFonce darkGrey gris grey grisClair lightGrey grisPale paleGrey blanc white bleuFonce darkBlue bleu blue bleuClair lightBlue bleuPale paleBlue vertFonce darkGreen vert green vertClair lightGreen brun brown beige tan rougeFonce darkRed rouge red rougeClair lightRed jauneFonce darkYellow jaune yellow jauneClair lightYellow orange orange rose pink violet purple c0 transparent c1 primary c2 secondary
Position

Gestion du positionnement des blocs autrement que par flexbox ou table-cell.

blocs habillés : bloc1|2|3

absolu conteneur : abs-bloc
puis : abs-left|right|center|top|bottom

display : display-none|block|inline-block|inline

position : pos-sticky|relative

float : float-left|right|clear

clear before/after : clear|bloc
Flexbox

Classes pour les cellules:

cellules : fg-c[s|m]0|1-12|auto

ordre cellules : fg-ord-[s|m]1-6

centrage contenu : fg-child-[v]center

Répartition verticale : fg-vspace-between[-1|-2]
fg-vspace-[arround|evenly|start|center|end]

Classes pour le conteneur parent:

conteneur : fg-row

autogrid : fg-auto-[m]1..12 fg-auto-s1..4

options : fg-gap|reverse|grow

justif horiz. : fg-center|start|end|between|around

justif vert. : fg-vtop|vcenter|vbottom|vfill
Cell

Alignements en mode table-cell.
Plusieurs cellules de même hauteur sur une seule ligne.

conteneur : cell-row cellules : cell

alignement vertical : cell-top|center|bottom
Modal <div id="IDx" class="up-modal"><div class="up-modal-content">contenu</div></div>
Table up-table-line up up.line up.blue up.green
Typo

texte en colonnes : text-col-2|3

text-col-no-break pas de rupture dans le bloc

liste sans puce : list-none

liste horizontale : list-inline[-dot|-sep|-dash]

liste définitions (dl/dt/dd) : dl.horiz

badge : badge[-rouge|-bleu|-vert]

font-size en % : fs[s|m]80|90|100|120|150|200|300|400|500

line-height en % : lh[s|m]80|100|110|120|150|200

b gras i italic s barré u[d][-hover] souligné [dotted]

Police : ff-[mono|cursive]

césure : cesure|nocesure|nowrap scroll : scrollx

text-align : t[l|c|r|j][s] left|center|right|justify
Images

Effets sur les images

polaroid : img-polaroid

base

floatimg.left|right

opacité : img-[hover-]opacity & img-opacity[-max]

niveaux de gris : img-[hover-]grey & img-grey-min

sépia : img-[hover-]sepia & img-sepia-min

annulation : img-hover-none
Box

bloc avec icone : box-info|idee|note|ok|error|danger|gris|grisPale
Effects

box : rotate-6|-3|3|6|45|90
Print

noprint print-no-break

Un mot entre crochets [ ] est optionnel, les traits verticaux séparent les valeurs permises, un mot entre chevrons <> doit être remplacé par la valeur suggérée. Il n'y a aucun espace.

Télécharger l'aide-mémoire

L'avantage de cette feuille de style est que toutes les classes peuvent tenir sur une page (comme ci-dessus)

Ce mémo est téléchargeable au format PDF ici : 


Personnellement, il est toujours à côté de moi, imprimé sur du bristol !

Liste des préfixes réservés

  • abs- : position absolute
  • bd- : bordures. ex: bd-rouge, b0
  • bg- : couleur de fond. ex: bg-rouge, bg-hover-vert
  • cell- : display:table-cell. ex: cell-row,
  • fg- : flexgrid. ex: fg-row, fg-c
  • fs : fontsize. ex: fs120
  • h : min-height.
  • lh : line-height. ex: lh120
  • m : margin. ex: m0, ms1, mst2, mleft, mcenter, mright
  • p : padding. ex: p0, ps1, ph1, pst2
  • t- : texte. ex: t-bleu
  • w : width. ex: w10, ws50, wauto

La table ci-dessus utilise UP pour gérer son affichage sur petits écrans

{up table_by_rows}

Pour ne pas afficher les sous-titres (la première colonne en mode responsive), on utilise également ce shortcode qui ajoute une règle CSS.

{up addcsshead=.restables-clone tr td:first-child [display: none;]}
Détails