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 50% sur mobile, wauto largeur auto, w0 = invisible

.m-child-raz supprime la marge haute du premier enfant et la marge basse du dernier enfant

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

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

Permets d'uniformiser les couleurs affichées par les éléments visuels retournés par les actions.

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

Fond : bg-[hover-]<color>

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]

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

Système de grille Flexbox responsive avec possiblité d'ajouter padding, border, background-color aux cellules.

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

Classes pour le conteneur parent:

conteneur : fg-row

autogrid : fg-auto-[s|m]1|2|3|4|5|6

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 affiche une table comme ce tableau des classes.

table : up-table-line

Typo

texte en colonnes : text-col-2|3

liste sans puce : list-none

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

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

font-size en % : fs80|90|100|120|150|200|300|400|500

line-height en % : lh80|100|110|120|150|200

césure : nocesure|nowrap|cut|nocut scroll : scrollx

text-align : tl[s] left tc[s] center tr[s] right tj[s] justify

Images

Effets sur les images

polaroid : img-polaroid

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

Effects

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

Note: un mot entre crochets [ ] est optionnel, les traits verticaux séparent les valeurs permises, un mot entre chevrons <> doit être remplacé par une valeur qu'il suggére. Il n'y a aucun espace.

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