Guide des styles

Une page pour tester les styles de la maquette de Chalar

Couleurs

La charte graphique de la maquette

Voir le menu

Typographie

L'affichage des titres et des textes

Titres

font-family : Segoe UI

font-weight : 700

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

Corps de texte

font-family : Segoe UI

font-weight : 400

Lorem Elsass ipsum baeckeoffe hop Gal ! placerat Huguette vulputate flammekueche Richard Schirmeck kuglopf mollis Heineken tristique condimentum auctor, ullamcorper ac pellentesque ac lacus tellus knack lotto-owe morbi Kabinetpapier ornare bissame purus senectus gravida.

Météor quam. bredele Pellentesque nullam schpeck vielmols, ornare sed hopla sit hoplageiss Verdammi ftomi! elit nüdle eget barapli ante geïz leverwurscht elementum chambon in, Carola jetz gehts los rossbolla libero. messti de Bischheim eleifend schnaps merci vielmols.

Voir le menu

Boutons

Les différentes formes d'affichage

Voir le menu

Card

Un élément modulaire pour afficher des infos texte, image et lien

Voir le menu

Iconographie

Les différentes icônes de l'interface UI

Font awesome

Description : La police d'icônes web de font awesome

Usage : Mettre en valeur certains éléments de l'interface

  • .fa-leaf

    UI : Décoration

  • .fa-rocket

    UI : Décoration

  • .fa-hamburger

    UI : Menu "Burger"

  • .fa-snowman

    UI : Décoration

  • .fa-snowplow

    UI : Décoration

  • .fa-facebook

    UI : Menu réseaux sociaux

  • .fa-mug-hot

    UI : Boire un café !

  • .fa-arrow-left

    UI : Aller à gauche

  • .fa-arrow-up

    UI : Aller en haut

  • .fa-arrow-right

    UI : Aller à droite

  • .fa-arrow-down

    UI : Aller en bas

  • .fa-play

    UI : Jouer !

  • .fa-home

    UI : Rentre à la maison !

Voir le menu

Icônes personnalisées

Description : des icônes personnalisées, à partir d'une classe .icons

Usage : des icônes personnalisées pour certains sujets / thèmes. Par exemple : la météo

  • .icon-sun

    UI : Météo ensoleillée

  • .icon-cloudy

    UI : Méteo "variable"

  • .icon-snow

    UI : Méteo neigeuse

  • .icon-rain

    UI : Méteo pluvieuse

  • .icon-winter

    UI : Températures de la station

  • .icon-boot

    UI : rando, marche

  • .icon-fire

    UI : feux de camps autorisés

  • .icon-bbq

    UI : aires de barbecues autorisés

  • .icon-caravan

    UI : aires de camping-car

  • .icon-soins

    UI : Premiers soins

  • .icon-ski

    UI : Activité ski

  • .icon-cable

    UI : Téléphérique

Voir le menu