Titre H1 de la page de démo

Ordre de lecture de la page démo

On part dans l'ordre du document pré-compilé scss.

• Configuration, variables du root
• Fontes
• Fonticon - Les icones ULKicon
• HTML - html stylisé de base sans avoir besoin d'ajouter des classes
• Ulkify - Éléments de structure préfixés "ulk-"
• Utilities - Classes utilitaires préfixées "u-"

Configuration - root

Le fichier _ulklite-root.scss contient l'essentiel des variables utilisées tout au long de la feuille de style. Il est possible d'y modifier les valeurs (tailles de fontes, espacements, transitions).

Pour changer le thème couleur utilisé par ULK, modifier le numéro de thème appelé sur les lignes suivantes :

• --local-bloc-primary1: var(--ulk-theme7-bloc-primary1);
• --local-bloc-primary1-rgb: var(--ulk-theme7-bloc-primary1-rgb);
• --local-bloc-primary2: var(--ulk-theme7-bloc-primary2);
• --local-bloc-primary2-rgb: var(--ulk-theme7-bloc-primary2-rgb);
• --local-font-warning: var(--ulk-theme7-font-warning);
• --local-font-warning-sombre: var(--ulk-theme7-font-warning-sombre);

Il existe à l'heure actuelle 13 thèmes (voir PDF pour les détails).
Chacun d'entre eux supporte le mode sombre.

Le thème 0 peut être utilisé seul, mais sert de base à tous les autres (blocs de thèmes couleurs ajoutés au blocs neutres).

• Thème 0
  Neutre (clair)
  #dedede
  #161c26
• Thème 0
  Neutre (dark)
  #393e46
  #ffffff
• Thème 1
  Industrie
  #96a2f5
  494591
• Thème 2
  Chlorophylle
  #08bd9e
  #18575d
• Thème 3
  Pink Lady
  #fe7db1
  #b72957
• Thème 4
  Brique du Nord
  #fc8670
  #941b23
• Thème 5
  Orangette
  #f39200
  #aa2e00
• Thème 6
  Hypérion
  #ffd24d
  #835f0f
• Thème 7
  Océan
  #7abaff
  #297ac3
• Thème 8
  Menthe
  #89e0b1
  #3f845c
• Thème 9
  Dune
  #faf0e1
  #827561
• Thème 10
  Commodore
  #a6ceff
  #003d87
• Thème 11
  Colvert
  #4abeb1
  #00766a
• Thème 12
  Vulcain
  #d15c62
  #72262e
• Thème 13
  Orange Sanguine
  #d86231
  #701400

Fontes

ULK utilise par défaut Source Sans, mais inclus également Dyslexia (adaptée aux problèmes de dyslexie) et Luciole (pour les malvoyants).

Un menu dans la topbar permet à l'utilisateur de permuter la fonte selon ses besoins ou préférences.

Fonticon - Ulkicon

Pour insérer une icone, créer un élément inline de type span ou "i", lui ajouter la classe .ulkicon puis un nom d'icone ci-dessous. Le mot ulkicon doit se retrouver deux fois.

Par exemple ceci : possède à la fois la classe .ulkicon et .ulkicon-animal--dinosaur. Elles s'animent en :hover quand insérées dans un élément de type bouton (voir la topbar ici en haut de l'écran).
Déplacé dans demo_ulkicon.html

HTML - éléments n'ayant pas besoin de classe

Les éléments suivants disposent d'un habillage par défaut avec ulk-lite :

• Les éléments textuels : les titres de h1 à h6, les paragraphes p, les liens a
• Les liens en target=_blank
• Les button
• Les séparateurs hr

Ulkify - les classes ULK

Éléments de structure : "ulk-s..."

Servent à placer correctement les éléments dans la page.

• .ulk-s-wrapper : englobe la page - utilisé une seule fois
• .ulk-s-grid : structure la page, peut être modifié avec l'ajout de ulk-s-grid--66-33 pour une séparation de la page en 2/3 - 1/3 ou ulk-s-grid--33-66 pour 1/3 - 2/3.
  La hauteur de chaque bloc est égale (ajustement au contenu le plus long)
• .ulk-s-grid--topbar (modificateur) : dispose automatiquement les boutons à droite de la topbar
• .ulk-s-grid--footer (modificateur) : dispose automatiquement le pied de page

Carotte
Je suis une topbar et je devrais être placée en premier et pas ici.
Mon contenu s'aligne à droite (sauf mon logo).

Je suis le premier bloc contenu dans une div de classe .ulk-s-grid .ulk-s-grid--33-66, et donc le premier tier. J'ai aussi une classe utilitaire .u-bg-dark.

Je suis le deuxième bloc contenu dans une div de classe .ulk-s-grid .ulk-s-grid--33-66, et donc les deux tiers restants. J'ai aussi une classe utilitaire .u-bg-neutre2.

Je suis le premier bloc contenu dans une div de classe .ulk-s-grid .ulk-s-grid--66-33, et donc les deux premiers tiers. J'ai aussi une classe utilitaire .u-bg-dark.

Je suis le deuxième bloc contenu dans une div de classe .ulk-s-grid .ulk-s-grid--66-33, et donc le tier restant. J'ai aussi une classe utilitaire .u-bg-neutre2.

Je suis un titre dans un bloc

Grid simple sans modificateur.

Je suis un footer et je dois être placé au bas de la page.

Composants : "ulk-c..."

Contient l'ensemble des contenus stylisés ULK de type composants. Les composants sont parfois composés de plusieurs couches dépendantes les unes des autres

• .ulk-c-bloc : bloc stylisable par l'ajout d'une ou plusieurs classes utilitaires afin de modifier ses contours, son fond ou sa fonte.
• .ulk-c-logo : bloc de placement du logo Université de Lille, nécessite un modificateur --topbar quand situé dans la topbar en question
• .ulk-c-button : comme son nom l'indique, un bouton. Existe en variante --topbar pour un bouton rond et animé en barre de menu
• .ulk-c-accordion : composant bootstrapé pour l'ajout d'un accordéon
• .ulk-c-modal : composant bootstrapé pour l'ajout d'une fenêtre modale

Objets : "ulk-o..."

Objets simples et indépendants pouvant être placés n'importe où.

• .ulk-o-teaser : stylise un texte façon "teaser"
• .ulk-o-video : à ajouter à un src video pour un affichage correct dans le bloc