Guide de style ============== Gestion des fichiers de style ----------------------------- Les feuilles de style sont basées sur des sources SASS situées dans le répertoire css_sources. On peut les compiler à la demande avec la commande ``make css`` ou automatiquement à chaque modification avec la commande ``make css_watch``. Les fichiers .sass sont structurés en fragments correspondant aux diverses parties structurelles du site (mise en forme générale, menu, tableaux, etc… ). Règles générales ---------------- Quand on signale l’absence de contenu (« Pas de produit », « Aucun contenu n’a été ajouté », « Pas de devis »…), mettre le texte correspondant en italique au moyen d’un élément ````. Colonnes -------- 2 à 4 Colonnes ~~~~~~~~~~~~~~ Pour structurer le contenu d’une ``
`` en deux à quatre colonnes, appliquer les classes ``layout`` et ``flex``, et une des classes ``two_cols`` ``three_cols`` ou ``four_cols``. Cela répartit tous les éléments directement contenus dans cette ``
`` en 2, 3 ou 4 colonnes de largeur égale. Pour les structures en 2 colonnes, 4 classes à ajouter à ``layout flex two_cols`` permettent d’obtenir deux colonnes de largeurs différentes : - ``third`` colonne de gauche 1/3, colonne de droite 2/3 (``
``) - ``third_reverse`` colonne de gauche 2/3, colonne de droite 1/3 (``
``) - ``quarter`` colonne de gauche 1/4, colonne de droite 3/4 (``
``) - ``quarter_reverse`` colonne de gauche 3/4, colonne de droite 1/4 (``
``) Rangs divisés en colonnes ~~~~~~~~~~~~~~~~~~~~~~~~~ Une ``
`` considérée comme un rang (particulièrement dans les formulaires) est structurée en colonnes en utilisant les classes ``col-md-1`` (1/12ème) à ``col-md-12`` (12/12èmes, 100%) sur chaque élément du rang. La gestion responsive de la largeur des colonnes dispense d’utiliser les classes de type ``col-xs`` ou autre, qui n’ont pas d’effet et n’espacent pas les colonnes de formulaires. Espacement ---------- Des classes permettent de créer de l’espacement entre blocs en ajoutant du ``padding`` : Quand un bloc n’est pas séparé visuellement des blocs voisins, on privilégie l’espacement vertical seul pour éviter de perdre les alignements verticaux. - ``content_vertical_padding`` ajoute une unité d’espacement sur les 2 côtés au-dessus et au-dessous du bloc - ``content_vertical_double_padding`` ajoute deux unités d’espacement sur les 2 côtés au-dessus et au-dessous du bloc On peut ajouter une séparation visuelle horizontale : - ``separate_top`` ajoute une ligne au-dessus du bloc - ``separate_bottom`` ajoute une ligne au-dessous du bloc - ``separate_top_dashed`` ajoute une ligne pointillée au-dessus du bloc - ``separate_bottom_dashed`` ajoute une ligne pointillée au-dessous du bloc Pour les blocs séparés visuellement par une bordure ou un fond de couleur : - ``content_padding`` ajoute une unité d’espacement sur les 4 côtés du bloc - ``content_double_padding`` ajoute deux unités d’espacement sur les 4 côtés du bloc - ``content_horizontal_padding`` ajoute une unité d’espacement sur les 2 côtés latéraux du bloc - ``content_horizontal_double_padding`` ajoute deux unités d’espacement sur les 2 côtés latéraux du bloc Vues mobile et tablette ----------------------- Il est possible de masquer certains contenus en fonction de la taille de l’écran, par exemple pour préciser un libellé sur les grands écrans, ou ne pas afficher une colonne de tableau sur mobile. En ce qui concerne les libellés, ne pas oublier une info-bulle avec le texte complet (les mises en page « petits écrans » et « très petits écrans » sont aussi utilisées par les déficients visuels utilisant l’agrandissement du texte sur écran d’ordinateur). - Les éléments portant la classe ``no_mobile`` ne seront pas affichés sur les très petits écrans (moins de 31.25rem de large) - Les éléments portant la classe ``no_tablet`` ne seront pas affichés sur les petits écrans (moins de 50rem de large) Exemple pour un bouton : .. code-block:: html En ce qui concerne les boutons, on peut aussi plus simplement les marquer pour qu’ils se transforment en bouton à icône seule pour les petits et très petits écrans en ajoutant la classe ``icon_only_tablet`` ou pour les très petits écrans seulement avec ``icon_only_mobile``. .. code-block:: html Chargement de contenu --------------------- On peut matérialiser le chargement de contenu pour faire patienter en attendant qu’il soit disponible à trois niveaux : - au niveau de tout l’écran en insérant une ``
`` en fin de la ``
``. - en superposition d’une modale en insérant une ``
`` en fin de la ``
``. - en superposition d’un bouton en ajoutant la classe `loader` au `` Impression ---------- Il est possible de masquer certains éléments lors de l’impression en leur ajoutant la classe ``hidden-print``. Inversement, il est possible d’ajouter des éléments qui ne seront visibles qu’à l’impression en leur ajoutant la classe ``print-only``. Titre d’écran ------------- Le titre de l’écran (contenu dans le ``

`` dans l’en-tête de l’écran) peut-être précisé par du texte inséré dans une balise ````. .. code-block:: html

Devis « titre du devis » pour le client Prénom Nom

Quand le titre passe sur deux lignes, le texte de la deuxième ligne est automatiquement affiché dans une police plus petite. Le titre ``

`` peut être précédé d’une icône qui sera visible sur les écrans plus grands que les mobiles. Elle est insérée par une balise ```` qui peut au besoin prendre les classes ``valid``, ``invalid`` ou ``caution``. Le bloc de notifications est inséré à la fin de l’en-tête de l’écran. Il comprend soit une icône (pas de notifications) ou un bouton avec un compteur (qui ouvre les notifications). Sans notifications : .. code-block:: html
  • ${api.icon('bell')} Pas de notification
Avec notifications : .. code-block:: html
Fil d’Ariane ------------ Le fil d’Ariane décrit le chemin parcouru pour accéder à l’écran en cours. Il est contenu dans une liste ``