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.
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.
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.
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
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...
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
Pour accueillir des contenus qui n'occupent pas toute la largeur disponible, notamment le contenu des pages, des articles, des ressources...
See the Pen Cheminées - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
chimney small x-small fluid
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 ...
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
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