Kortic, Anthony Ladeuil

Grille flex

Grille 12 colonnes, gouttières 2.5rem, 1.25rem et 0.625rem. “Fluide“ de 0 à 1199px, figée à 1200px et au delà.
La gestion responsive prend en compte la modulation des gouttières selon le viewport : en effet, des gouttières larges ne sont pas toujours adaptées à un contenu affiché sur un écran mobile, particulièrement lorsque plusieurs imbrications de blocs sont présentes.

Points de rupture :

Base :root 16px (1em)

  • xs : ‹ 480px @media (max-width: 29.9375rem)
  • s : ≥ 480px @media (min-width: 30rem)
  • m : ≥ 768px @media (min-width: 48rem)
  • l : ≥ 1024px @media (min-width: 64rem)
  • xl : ≥ 1200px @media (min-width: 75rem)

Compatibilité :

  • Chrome ›= 26
  • Firefox ›= 28
  • IE ›= 10 (images responsives IE › 11)
  • Opera ›= 15
  • Safari ›= 6.2

12 blocs, gouttières variables selon le viewport

Exemple de liste ul de 12 éléments.
Chaque item a pour classes col l-2 m-3 s-4 xs-6
Gouttières variables selon le viewport.

Répartition
  • Large › XLarge › 2 colonnes
  • Medium › 3 colonnes
  • Small › 4 colonnes
  • XSmall › 6 colonnes
  • Lorem ipsum dolore
  • Lorem ipsum dolore
  • Lorem ipsum dolore
  • Lorem ipsum dolore
  • Lorem ipsum dolore
  • Lorem ipsum dolore
  • Lorem ipsum dolore
  • Lorem ipsum dolore
  • Lorem ipsum dolore
  • Lorem ipsum dolore
  • Lorem ipsum dolore
  • Lorem ipsum dolore

Une colonne + aside... ou le contraire

Inversion des blocs selon le viewport m-order-2 xl-order-2

Colonne gauche (ou droite...)

12 blocs : chaque bloc a sa propre gestion (largeur/visibilité). Gouttière pleine en XL et L, demie gouttière de XS à M.

1 xl-3 l-3 m-6 s-6
2 xl-3 l-3 m-6 s-6
3 xl-3 l-3 m-6 s-6
4 xl-3 l-3 m-6 s-6
5 : bloc caché en Medium et Small xl-6 l-6 m-hide s-hide
6 : bloc caché en Small xl-6 l-6 m-6 s-hide
7 : bloc caché en Medium et Small xl-3 l-3 m-hide s-hide
8 xl-3 l-3 m-6 s-hide
9 : bloc caché en Medium et Small xl-3 l-6 m-hide s-hide
10 xl-3 l-4 m-6 s-hide
11 : bloc caché en Medium et Small xl-6 l-4 m-hide s-hide
12 xl-6 l-4 m-6 s-hide

Blocs " pushed "

Lien rubrique

bloc de type push à droite.
Le parent des items porte la classe justify-content-flex-end

Curae lorem ut feugiat placerat turpis vehicula justo erat diam rhoncus ipsum curae poda fermentum sed mollis metus convallis lectus felis nec nibh ante curabitur posuere non in cras nulla curabitur a lorem felis integer.
Purus nonummy enim curae ligula at eros augue massa pretium cursus cras tincidunt a egestas sit ultrices velit sapien lorem non sit sit egestas turpis lorem imperdiet aenean ut.
Sollicitudin mauris non sollicitudin enim risus amet nec sodales sit nec tempor cursus nulla ut vestibulum congue eros fermentum cras sed integer vulputate bibendum aliquam placerat nulla arcu ligula quis sit id aliquam placerat egestas congue euismod primis id pretium.

Répartition variable selon viewport

Lien rubrique
  • L > XL : 3 colonnes - 6 colonnes - 3 colonnes
  • M > L : 4 colonnes - 4 colonnes - 4 colonnes
  • < M : 12 colonnes
Lorem ipsum dolore

Blocs demies gouttières avec 2 images responsives : selon la largeur du navigateur, les images droite/gauche n'ont pas les mêmes sources (redimensionner le navigateur pour voir l'effet appliqué).

Lorem ipsum dolore
Autres variations...
Chaque ligne dispose d'un bloc avec une taille spécifique, son voisin s'adapte seul en prenant l'espace disponible.
Le conteneur parent est justify-content-stretch
Lorem ipsum dolore

Congue praesent in vitae lectus ante purus ante rhoncus scelerisque et sed blandit vitae elit augue non nisl tortor ac nulla nulla felis feugiat tincidunt purus mauris augue enim.

Tempus augue tempus nulla posuere nulla felis primis sed sit ligula elit sed semper consectetur euismod dignissim et integer cras praesent adipiscing.

Lorem ipsum dolore

Alignements sur axe horizontal

Alignement haut (par défaut)

Ut sit ornare et vitae vel praesent nonummy felis pellentesque quis felis diam aliquam egestas erat aliquet nulla mauris elementum nunc dolor risus iaculis massa tempor sit sed.

Lorem ipsum dolore

Alignement bas

Lorem ipsum dolore

Faucibus nec nulla vel nonummy odio non ut dignissim nec metus mauris non curabitur pellentesque iaculis pellentesque arcu semper faucibus aliquam dolor at consectetuer sodales molestie et nec massa ut metus mi dignissim enim sem libero lectus.

Alignement centré - Medium reverse

Molestie convallis in leo sed pellentesque consectetuer massa blandit mauris sit ultricies volutpat amet non curabitur nisl amet lacus ipsum posuere diam maecenas semper semper libero nec vel in morbi adipiscing fermentum praesent fermentum varius praesent.

Lorem ipsum dolore

Feuille de style flex