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

Hauteur écran : hscreen

Margin : m[s|m][l|t|r|b|h|v]0|1|2|3|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

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-[s|m]1|2|3|4|5|6|7|8|9|10|11|12

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

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

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 à coté de moi, imprimé sur du bristol !

Liste des préfixes réservées

  • 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;]}