Layout

Evidemment, il sera certainement plus intéressant de récupérer les éléments de layout de votre framework CSS.

Pour concevoir les maquettes de manière agnostique, une architecture la plus simple possible a tout de même été conçue.

Structure générale

Le but du traitement de la balise body et de la classe site-wrap est de ménager une base stable et saine pour le layout.

  • La balise <nav class="main-nav-site"> qui contient 2 des 3 barres de menus en haut de chaque page.
  • La balise <main> qui contient la 3e barre de menu et le contenu original de la page.
  • La balise <footer class="footer-site"> qui contient classiquement le footer, c'est à dire 2 barres de menu, l'une contextuelle en fonction des sites, l'autre inter-sites.

See the Pen body and site-wrap - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen. 

site
main-nav-site
tpl_main-nav
footer-site

Sections

La plus utilisée est la classe fw-section (Full Width section).

Son objet est de découper les pages et objets en section occupant 100% de la largeur disponible dans son contenant.

Elle sert notamment de support aux heros et aux call to action, aux call to action spécifiques, au header du site...

Container

Afin d'avoir pour toutes les sections des marges et des comportements homogènes, il est conseillé d'utiliser à l'intérieur la classe section__container.

full height section

On peut aussi ajouter la classe fh-section pour créer des sections qui font la même hauteur que l'espace visible de la page.

See the Pen section - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen. 

fw-section
fh-section
section__container

Cheminées

Pour accueillir des contenus qui n'occupent pas toute la largeur disponible, notamment le contenu des pages, des articles, des ressources...

class="chimney"

See the Pen Cheminées - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen. 

chimney
small
x-small
fluid

Colonnes

Des colonnes souples et responsives.

<div class="columns">
    <div class="column column_1-2">

See the Pen Colonnes - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen. 

columns
column

column_1-2
column_1-3
column_2-3
column_1-4
column_3-4
column_1-5
column_2-5
column_3-5
column_4-5
...

Panneau latéral

Ce système permet d'afficher un panneau contextuel, contenant par exemple un menu de filtres.

Il utilise le composant d'affichange temporaire popin dans sa version small-screens uniquement.

<div class="aside">
    <div class="aside__panel is-visible left popin popin_small-screens">
        <div class="aside__trigger">
            <button class="button">
        <div class="aside__panel__container popin__container">
        <div class="popin__close">
            <div class="aside__panel__content popin__veil">
    <div class="aside__leftover-space">

See the Pen Aside - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

See the Pen Aside visible - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen. 

aside
aside__panel + left/right + (is-visible) + popin + popin_small-screens
aside__trigger
aside__panel__container
aside__panel__content
aside__leftover-space

Big and small screen exclusivities

Outil de layout responsive pour faire disparaître des éléments inutiles ou gênants en version mobile ou desktop.

See the Pen Big and small screen exclusivities - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen. 

big-screens
small-screens