Flexitems
La bibliothèque CSS flexbox responsive design
Flexitems est une bibliothèque responsive web design qui repose sur le HTML5 et le CSS3. Plus particulièrement sur le module flexbox du CSS3 pour la gestion du positionnement des blocs dans la page Web.
Flexitems est compatible avec Chrome 49 et sup, Edge 14 et sup, Firefox 52 et sup, Safari 10.1 et sup, Opera 46 et sup.
Flexitems intègre nativement le fichier de normalisation CSS normalize, la bibliothèque d'icones font awesome ainsi que la librairie prism JS (système de présentation de code avec couleur syntaxique pour de multiples langages de programmation).
Doctype HTML5
En raison de l'utilisation du HTML5, flexitems nécessite l'usage du doctype adéquat dans chaque page Web où la bibliothèque est appelée.
<!doctype html>
<html lang="fr">
...
</html>
Meta viewport
La bibliothèque flexitems gère nativement le responsive web design. Cela veut dire que flexitems est capable de s'adapter automatiquement aux écrans des mobiles, tablettes, portables et ordinateurs de bureau.
Pour assurer un rendu optimum avec tous types d'écrans, il est nécessaire d'ajouter la gestion du viewport dans toutes les pages utilisant la bibliothèque flexitems. Cette balise meta, placée entre les balises <head>, autorise également le zoom tactile sur des appareils de type mobile ou tablette.
<!doctype html>
<html lang="fr">
<head>
<title>Document title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
</html>
Bien entendu, il est possible d'interdire de zoomer. Pour cela il suffit de modifier quelque peu le contenu de la balise meta viewport. Toutefois nous vous le déconseillons vivement, pour une meilleure expérience utilisateur.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Normalize.css
Par défaut, chaque navigateur applique certaines propriétés à un certain nombre de balises HTML. Malheureusement, chaque navigateur fait un peu à sa sauce. Afin de permettre à ces derniers de rendre tous les éléments plus cohérents et conformes aux normes modernes, la bibliothèque flexitems intègre nativement le fichier CSS de normalisation des styles développé par Nicolas Gallager et Jonathan Neal : normalize.css. Il n'est donc pas nécessaire de faire appel à normalize dans vos projets si vous envisagez d'utiliser notre bibliothèque. Pour en savoir plus sur le projet normalize.css
Bibliothèque d'icones Font Awesome
Nous avons jugé utile d'intégrer nativement l'excellente bibliothèque d'icones Font Awesome dans flexitems, afin d'avoir une large gamme d'icones esthétiquement cohérentes à votre disposition. Nous vous invitons à découvrir le nombre impressionnant d'icones existantes (plus de 600) en vous rendant sur le site officiel de Font awesome. Dans la rubrique Examples vous trouverez des exemples pour intégrer des icones dans le code HTML de vos projets.
Librairie Prism JS
Prism JS est une librairie javascript de présentation de code avec couleur syntaxique pour de multiples langages de programmation. Nous l'avons intégré nativement dans flexitems parce que nous pensons que cela peut être utile. C'est cette librairie qui est utilisée dans cette page pour présenter les différents exemples de code HTML. Nous vous invitons à visiter le site officiel de Prism JS, afin de vous renseigner sur l'utilisation de cette librairie.
Notez que seule l'option Show Invisibles n'est pas intégrée dans la version de Prism JS utilisée par flexitems et que le seul thème disponible est Okaidia, celui-là même de cette page.
Intégration de flexitems
Après le téléchargement du fichier compressé flexitems.zip, dézipez son contenu dans le répertoire de votre projet. Ensuite pour appeler la bibliothèque flexitems dans vos pages, indiquez le chemin vers le fichier CSS flexitems.css, via la balise <link>.
<!doctype html>
<html lang="fr">
<head>
<title>Document title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link href="css/flexitems.css" rel="stylesheet">
</head>
</html>
Il est possible d'appeler votre propre CSS en plus de celui de flexitems. Nous vous conseillons toutefois de placer l'appel de votre fichier CSS après celui de flexitems. Cela vous permettra entre autre de faire de la surchage sur les propriétés CSS utilisées par flexitems.
<!doctype html>
<html lang="fr">
<head>
<title>Document title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link href="css/flexitems.css" rel="stylesheet">
<link href="css/my-style.css" rel="stylesheet">
</head>
</html>
Pour utiliser la librairie Prism JS dans vos pages, vous devez appeler le script prism.js juste avant la fermeture de la balise </body>
<!doctype html>
<html lang="fr">
<head>
...
</head>
<body>
...
<script src="js/prism.js"></script>
</body>
</html>
Les conteneurs
La bibliothèque flexitems nécessite la mise en place de conteneurs, notamment pour loger notre système de grille sur 12 colonnes. Il existe trois types de conteneurs. Chacun d'eux est appelé par une classe spécifique applicable à toute balise HTML de type block, comme par exemple <main>, <header>, <nav>, <section>, <article>, <footer>, <div>, etc.
Le conteneur fluide
Utilisez la classe .fluid-container pour obtenir un conteneur fluide prenant toute la largeur disponible à l'écran. Notez que cette classe est adaptée pour recevoir les deux autres types de conteneurs.
<div class="fluid-container">
...
</div>
Le conteneur avec points de rupture
Utilisez la classe .brpt-container (pour break point container) afin d'obtenir un conteneur toujours centré dans la page web et ayant une largeur définie. Toutefois, cette largeur change en fonction de points de rupture qui correspondent aux différentes surfaces d'affichage (mobile, tablette, etc.), afin que le contenu de la page soit responsive web design.
<div class="brpt-container">
...
</div>
Notez que vous ne devez pas intégrer deux .brpt-container l'un dans l'autre. En effet, en raison de marges négatives appliquées à cette classe, vous auriez un décalage néfaste pour votre mise en page.
Le conteneur flex
Utilisez la classe .flex-container pour mettre en place la grille à 12 colonnes. Ce conteneur est indispensable pour le bon fonctionnement de la grille et le positionnement des blocs (items) dans la page. la classe .flex-container peut être directement intégrée dans un .fluid-container ou dans un .brpt-container.
<section class="fluid-container">
<div class="flex-container">
...
</div>
</section>
<div class="brpt-container">
<div class="flex-container">
...
</div>
</div>
Dans l'idéal nous vous invitons à adopter l'architecture suivante qui vous apportera plus de souplesse dans l'habillage de votre interface web.
<section class="fluid-container">
<div class="brpt-container">
<div class="flex-container">
...
</div>
</div>
</section>
Grille de mise en page
Comme beaucoup de bibliothèque CSS de ce genre, flexitems s'appuie sur une mise en page divisée en 12 colonnes invisibles. Chaque colonne est séparée par un espace appelé gouttière. L'ensemble constitue une grille de mise en page. Ce principe de division par colonne est issu de la presse papier et permet de disposer des blocs de façon homogène et équilibrée sur une surface donnée. Responsive design oblige, la largeur des colonnes s'adapte en fonction de l'espace disponible.
Introduction au système de grille de flexitems
Pour construire une grille vous devez obligatoirement faire appel à un conteneur flex, lui même placé dans un conteneur fluid et/ou un conteneur avec points de rupture (cf. les notions abordées plus haut). Pour cela il suffit d'appliquer la classe .flex-container sur un élément de type block. Ce conteneur représente une rangée (ou ligne) dans laquelle vont être placés des items (ou cellules). Ce sont ces items qui vont constituer la grille à proprement parlé. Vous devez dans un premier temps définir combien d'items seront disposés dans le conteneur flex, avec un minimum de 1 et un maximum de 12. Vous appliquerez ensuite, à chacun de ces items, une des classes .flex-item-n (ou n est un nombre de 1 à 12).
Pour un usage optimal, il est fortement recommandé de disposer un nombre d'items correspondant aux diviseurs de 12, soit 1, 2, 3, 4, 6 ou 12 items par rangée. Bien entendu, cela n'est qu'une recommandation et il est tout à fait possible de placer 5, 7, 8, ou 9 items par ligne. Dans tous les cas, la seule obligation à respecter est que la somme des nombres n des classes .flex-item-n soit au maximum égale à 12... ... Un petit exemple sera plus parlant :
<div class="flex-container">
<div class="flex-item-2">...</div>
<div class="flex-item-4">...</div>
<div class="flex-item-2">...</div>
<div class="flex-item-2">...</div>
<div class="flex-item-2">...</div>
</div>
2 + 4 + 2 + 2 + 2 est bien égale à 12. C'est donc ok, bien qu'il y ait 5 items dans le conteneur flex.
Vous l'aurez compris, n correspond au nombre de colonnes que chaque item va occuper dans la grille. Ainsi la classe .flex-item-4 correspond à un item occupant 4 colonnes, la classe .flex-item-2, à un item occupant 2 colonnes, etc. C'est ainsi que la grille se construit, rangée par rangée, item par item.
Notez que chaque item est séparé de 5 pixels de son voisin, ce qui au final représente une gouttière de 10 pixels de large.
Les points de rupture
Pour garantir le responsive design sur tout type d'appareil, flexitems utilise des classes de rupture. Elles correspondent chacune à 5 groupes d'appareils. Mobiles à petit écran .mobile-xs-n, mobiles à écran moyen .mobile-sm-n, mobiles à écran large .mobile-lg-n, tablettes .tablet-n et ordinateur portable ou de bureau .flex-item-n, que nous venons de voir.
| Mobiles à petit écran | Mobiles à écran moyen | Mobiles à écran large | Tablettes | Ordinateur de bureau | |
|---|---|---|---|---|---|
| Classes à appliquer | .mobile-xs-n | .mobile-sm-n | .mobile-lg-n | .tablet-n | .flex-item-n |
| Largeur de l'écran en pixels | < 576px | >= 576px | >= 768px | >= 992px | >= 1200px |
| Points de rupture. Basculement dans le groupe d'appareils |
à partir de 575px | à partir de 767px | à partir de 991px | à partir de 1199px | à partir de 1200px |
| Fourchette | de 575px à 0px | de 767px à 576px | de 991px à 768px | de 1199px à 992px | de 1200 et plus |
| Largeur de la classe .brpt-container |
100% | 550px | 730px | 970px | 1170px |
Comme expliqué précédemment, pour chacune des classes, n est un nombre de 1 à 12.
Exemple d'une grille avec différents points de ruptures
Il est possible de cumuler les classes de rupture pour redistribuer le nombre des items et de rangées en fonction du groupe d'appareils ciblés. Dans l'exemple qui va suivre nous avons 6 items placés sur une rangée avec la classe .flex-item-2 (groupe des ordinateurs de bureau). Nous respectons bien la règle de la somme des n : (6 x 2 = 12). Chacun de ces items occupent donc deux colonnes et ont par conséquence la même largeur.
Tant que cette classe est seule, les items resterons les uns à côté des autres, sans jamais passer à la ligne quelque soit la surface d'affichage. Leur largeur diminuera en fonction de l'espace disponible du support (mobile, tablette, etc.).
Cela peut être un choix volontaire mais le risque existe que le contenu, faute de place, finisse par déborder des items. Forte heureusement il est possible, en fonction du groupe d'appareils où devra s'afficher la page, de modifier le nombre d'items par rangée afin de garder une largeur convenable. Les autres items passeront alors automatiquement à la ligne.
Dans l'exemple ci-après, nous allons demander à flexitems d'aligner 3 items par ligne .tablet-4 (si nous sommes sur des tablettes), puis 2 items par ligne .mobile-sm-6 (si nous sommes sur des mobiles à écran moyen) et enfin 1 items par ligne .mobile-xs-12 (si nous sommes sur des mobiles à petit écran). A chaque fois nous respectons la somme des n : (3 x 4, 2 x 6 et 1 x 12).
Remarquez que nous sommes passés directement du groupe tablettes .tablet-4 au groupe mobiles à écran moyen .mobile-sm-6 et ignoré le groupe de mobiles à écran large. C'est tout à fait possible. Tout dépend de ce que vous recherchez en terme de présentation de votre contenu.
Exemple (n'hésitez pas à jouer sur la largeur de votre navigateur pour simuler les différents supports) :
<section class="flex-container">
<div class="flex-item-2 tablet-4 mobile-sm-6 mobile-xs-12">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-2 tablet-4 mobile-sm-6 mobile-xs-12">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-2 tablet-4 mobile-sm-6 mobile-xs-12">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-2 tablet-4 mobile-sm-6 mobile-xs-12">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-2 tablet-4 mobile-sm-6 mobile-xs-12">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-2 tablet-4 mobile-sm-6 mobile-xs-12">
<div class="frame-radius ta-center">...</div>
</div>
</section>
Notez que l'ordre des classes n'a pas d'importance. Néanmoins, pour une bonne pratique et une meilleure compréhention du code, il est conseillé d'inscrire les classes du plus grand vers le plus petit support, ou inversement.
Utilisation de la propriété justify-content
Mais que se passe t'il si la somme des n est inférieure à 12 ? Et bien les items se placeront à gauche par défaut. Démonstration :
<div class="flex-container">
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
</div>
C'est là qu'intervient toute la puissance du module flexbox du CSS3. Nous avons développé des classes qui reprennent les différentes valeurs de la propriété justify-content. Ainsi :
- la classe .jc-start positionne les items à gauche (valeur par défaut).
- la classe .jc-end positionne les items à droite
- la classe .jc-center positionne les items au centre
- la classe .jc-between réparti les items de façon à ce que le premier soit collé à gauche et le dernier à droite et calcule les espaces entre chaque.
- la classe .jc-around réparti les items avec un espacement égal autour de chacun.
Exemples avec la classe .jc-end :
<div class="flex-container jc-end">
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
</div>
Exemples avec la classe .jc-center :
<div class="flex-container jc-center">
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
</div>
Exemples avec la classe .jc-between :
<div class="flex-container jc-between">
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
</div>
Exemples avec la classe .jc-around :
<div class="flex-container jc-around">
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
<div class="flex-item-3">
<div class="frame-radius ta-center">...</div>
</div>
</div>
Il est possible de mixer cela avec l'utilisation des classes de rupture, tout comme il n'est pas obligatoire que la taille des items soit identique. La seule contrainte c'est que la somme des n ne doit pas dépasser 12. Les possibilités offertes par la bibliothèque flexitems sont nombreuses et il n'est pas possible ici de les passer toute en revue. A vous d'expérimenter...
Quelques exemples de placements d'items
Les cadres (ou frames)
Flexitems propose quelques classes qui permettent de placer du contenu dans les items. Ce sont les cadres.
- .frame applique un fond blanc et une marge interne
- .frame-border applique un fond blanc, une marge interne et une bordure grise
- .frame-radius applique un fond blanc, une marge interne et une bordure grise aux angles arrondis
Exemple avec la classe .frame
Exemple avec la classe .frame-border
Exemple avec la classe .frame-radius
<section class="flex-container">
<div class="flex-item-4">
<div class="frame">
...
</div>
</div>
...
</section>
<section class="flex-container">
<div class="flex-item-4">
<div class="frame-border">
...
</div>
</div>
...
</section>
<section class="flex-container">
<div class="flex-item-4">
<div class="frame-radius">
...
</div>
</div>
...
</section>
En utilisant les classes frames, vous constatez que les hauteurs des items d'une même rangée s'ajuste automatiquement à l'item ayant le plus de contenu. Encore la magie de flexbox.
Typographie
La librairie flexitems fournit des classes pour habiller et aligner titres et textes dans vos pages.
Les titres
Toutes les balises titres de <h1> à <h6> sont prises en compte. Nous avons également créé des classes de .t1 à .t6, afin de limiter les risques d'interférences en cas d'utilisation d'autres bibliothèques CSS dans vos projets.
h1. heading (50px)
h2. heading (40px)
h3. heading (30px)
h4. heading (25px)
h5. heading (20px)
h6. heading (16px)
<h1>h1. heading (50px)</h1>
<h2>h2. heading (40px)</h2>
<h3>h3. heading (30px)</h3>
<h4>h4. heading (25px)</h4>
<h5>h5. heading (20px)</h5>
<h6>h6. heading (16px)</h6>
OU
<h1 class="t1">h1. heading (50px)</h1>
<h2 class="t2">h2. heading (40px)</h2>
<h3 class="t3">h3. heading (30px)</h3>
<h4 class="t4">h4. heading (25px)</h4>
<h5 class="t5">h5. heading (20px)</h5>
<h6 class="t6">h6. heading (16px)</h6>
Paragraphes et alignements
Par défaut, la police de caractères utilisée dans flexitems est Arial. La taille de base est de 16px. L'interlignage est de 1.43 et la couleur noire. Le texte est ferré à gauche par défaut si le sens de lecture est ltr (pour « left to right ») ; ou ferré à droite si le sens de lecture est rtl (pour « right to left »).
Alignement à gauche
La classe .ta-left permet néanmoins de forcer alignement à gauche, si nécessaire.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas. Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.
<p class="ta-left">
...
</p>
Alignement à droite
La classe .ta-right permet l'alignement du texte à droite.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas. Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.
<p class="ta-right">
...
</p>
Alignement justifié
La classe .ta-justify permet de ferrer le texte à gauche et à droite.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas. Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.
<p class="ta-justify">
...
</p>
Alignement au centre
La classe .ta-center permet de centrer le texte.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas. Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.
<p class="ta-center">
...
</p>
Style et décoration du texte
flexitems propose quelques classes pour agrémenter le texte. Notez cependant que ces classes ne sont utiles que si elles sont appliquées à un paragraphe entier. Dans le cas contraire, s'il s'agit d'un ou plusieurs mots dans un paragraphe, il est préférable d'utiliser les balises HTML prévu à cet effet.
Paragraphe en gras
Utilisez la classe .txt-strong pour faire passer un paragraphe en gras.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas. Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.
<p class="txt-strong">
...
</p>
Paragraphe en italique
Utilisez la classe .txt-italic pour faire passer un paragraphe en italique.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas. Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.
<p class="txt-italic">
...
</p>
Paragraphe souligné
Utilisez la classe .txt-underline pour que le texte d'un paragraphe soit souligné.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas. Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.
<p class="txt-underline">
...
</p>
Notez que l'utilisation de la classe .txt-normal annule les effets de graisse, d'italique et de soulignement du texte.
Taille des polices
La bibliothèque flexitems offre une série de classes permettant de changer directement la taille de la police dans le code HTML, sans passer par votre feuille de style. Voici la liste des classes disponibles
Lorem ipsum (8px)
Lorem ipsum (9px)
Lorem ipsum (10px)
Lorem ipsum (11px)
Lorem ipsum (12px)
Lorem ipsum (13px)
Lorem ipsum (14px)
Lorem ipsum (15px)
Lorem ipsum (16px)
Lorem ipsum (18px)
Lorem ipsum (20px)
Lorem ipsum (22px)
Lorem ipsum (25px)
Lorem ipsum (28px)
Lorem ipsum (30px)
Lorem ipsum (35px)
Lorem ipsum (40px)
Lorem ipsum (45px)
Lorem ipsum (50px)
<p class="fs-8">Lorem ipsum (8px)</p>
<p class="fs-9">Lorem ipsum (9px)</p>
<p class="fs-10">Lorem ipsum (10px)</p>
<p class="fs-11">Lorem ipsum (11px)</p>
<p class="fs-12">Lorem ipsum (12px)</p>
<p class="fs-13">Lorem ipsum (13px)</p>
<p class="fs-14">Lorem ipsum (14px)</p>
<p class="fs-15">Lorem ipsum (15px)</p>
<p class="fs-16">Lorem ipsum (16px)</p>
<p class="fs-18">Lorem ipsum (18px)</p>
<p class="fs-20">Lorem ipsum (20px)</p>
<p class="fs-22">Lorem ipsum (22px)</p>
<p class="fs-25">Lorem ipsum (25px)</p>
<p class="fs-28">Lorem ipsum (28px)</p>
<p class="fs-30">Lorem ipsum (30px)</p>
<p class="fs-35">Lorem ipsum (35px)</p>
<p class="fs-40">Lorem ipsum (40px)</p>
<p class="fs-45">Lorem ipsum (45px)</p>
<p class="fs-50">Lorem ipsum (50px)</p>
Liens hypertextes
flexitems offre un habillage par défaut des liens hypertextes en agissant directement sur la balise <a>, tout en prenant en charge les pseudo classes :active, :hover, :focus. Toutefois, afin de minimiser les risques d'interférences avec d'autres bibliothèques CSS, flexitems a ajouté une classe .a-link. On peut donc déclarer des liens hypertextes dans son code HTML de la manière suivante :
<a href="http://www.example.com" title="Example">Lorem ipsum</a>
OU
<a class="a-link" href="http://www.example.com" title="Example">Lorem ipsum</a>
Boutons contextuels
Des boutons contextuels sont disponibles dans la bibliothèque flexitems. Les différentes classes sont applicables sur toutes les balises HTML, Mais on ciblera de préférence les balises <a>, <button> ou encore <input>.
<button class="button">Base button</button>
<button class="button default-btn">Default button</button>
<button class="button primary-btn">Primary button</button>
<button class="button success-btn">Success button</button>
<button class="button warning-btn">Warning button</button>
<button class="button danger-btn">Danger button</button>
Il est possible d'ajouter aux classes précédentes, des classes qui influencent la taille par défaut des boutons.
<button class="button success-btn large-btn">Large button</button>
<button class="button default-btn">Standard button</button>
<button class="button primary-btn small-btn">Small button</button>
<button class="button danger-btn x-small-btn">Extra small button</button>
Couleurs contextuelles
Il est possible de contextualiser le contenu avec flexitems. Quelques classes permettent de donner du sens au travers de couleurs spécifiques. Ces classes peuvent également être appliquées aux liens.
Muted text. Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas.
Primary text. Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas.
Success text. Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas.
Warning text. Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, danger text quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas.
<p class="muted-txt">
...
</p>
<p class="primary-txt">
...
</p>
<p class="success-txt">
...
</p>
<p class="warning-txt">
...
</p>
<p>
... <a class="danger-txt" href="#" title="">danger text</a> ...
</p>
Bordures contextuelles
Dans le même ordre d'idée, flexitems propose des classes pour une approche plus esthétique de la contextualisation. Un habillage est alors appliqué sous forme d'une bordure à gauche pour les textes se lisant de gauche à droite. Ou d'une bordure à droite pour les textes se lisant de droite à gauche.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas.
<p class="border-left-primary">
...
</p>
<p class="border-left-success">
...
</p>
<p class="border-left-warning">
...
</p>
<p class="border-left-danger">
...
</p>
<p class="border-right-primary ta-right">
...
</p>
...
Arrière-plans contextuels
Similaire aux classes contextuelles de couleurs pour le texte, définissez facilement l'arrière-plan d'un élément dans n'importe quelle classe contextuelle.
Primary background with text.
Success background with text.
Warning background with text.
Danger background with text.
<p class="primary-bg">
Primary background with text.
</p>
<p class="success-bg">
Success background with text.
</p>
<p class="warning-bg">
Warning background with text.
</p>
<p class="danger-bg">
Danger background with text.
</p>
Les images
La bibliothèque flexitems apporte quelques classes pour manipuler aisément les images. Ainsi, pour rendre une image responsive, il suffit d'ajouter la classe .image-responsive sur les balises <img>. L'image prend alors 100% de l'espace disponible dans l'élément qui la contient.
D'autres classes apportent un peu d'habillage pour les images
<figure>
<img class="image-responsive" src="img/your-image.jpg" alt="You image">
</figure>
Images carrés
<p>
<img src="img/img-150x150.jpg" alt="image demo">
<img class="image-radius" src="img/img-150x150.jpg" alt="150 image demo">
<img class="image-round" src="img/img-150x150.jpg" alt="150 image demo">
</p>
<p>
<img class="image-frame" src="img/img-150x150.jpg" alt="150 image demo">
<img class="image-frame image-radius" src="img/img-150x150.jpg" alt="150 image demo">
<img class="image-frame image-round" src="img/img-150x150.jpg" alt="150 image demo">
</p>
Images rectangulaires
<p>
<img src="img/img-266x150.jpg" alt=266 "image demo">
<img class="image-radius" src="img/img-266x150.jpg" alt="266 image demo">
<img class="image-round" src="img/img-266x150.jpg" alt="266 image demo">
</p>
<p>
<img class="image-frame" src="img/img-266x150.jpg" alt="266 image demo">
<img class="image-frame image-radius" src="img/img-266x150.jpg" alt="266 image demo">
<img class="image-frame image-round" src="img/img-266x150.jpg" alt="266 image demo">
</p>
Notez que si vous appliquez la classe .image-round sur une image rectangulaire, vous obtenez une forme ovale et non ronde.
Images habillées par du texte
Flexitems offre deux classes pour positionner des images à gauche ou à droite dans des paragraphes, tout en autorisant le texte à se « couler » autour de l'image. Comme ces classes utilisent la propriété CSS float, il est nécessaire d'appliquer la classe .clear-fix sur le conteneur, afin d'éviter une remontée des éléments qui suivent dans le cas où la quantité de texte serait inférieure à la hauteur de l'image.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas. Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas.
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas. Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas. Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas. Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas. Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas. Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas.Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas.
<p class="clear-fix">
<img class="image-left" src="img/img-150x150.jpg" alt="image"> ...
</p>
<p class="clear-fix ta-justify">
<img class="image-right image-frame" src="img/img-266x150.jpg" alt="image"> ...
</p>
Les tableaux
Tableau par défaut
Flexitems offre de nombreuses classes pour habiller simplement et rapidement un tableau et lui donner un peu d'hesthétisme. En effet, par défaut les tableaux HTML ne sont pas habillés.
| Titre 1 | Titre 2 | Titre 3 |
|---|---|---|
| Line 1 Data col 1 | Line 1 Data col 2 | Line 1 Data col 3 |
| Line 2 Data col 1 | Line 2 Data col 2 | Line 2 Data col 3 |
| Line 3 Data col 1 | Line 3 Data col 2 | Line 3 Data col 3 |
Notez que vous devez respecter la conception HTML5 des tableaux pour que les classes de flexitems s'appliquent correctement :
<table>
<caption>Exemple...</caption> (facultatif)
<thead>
<tr>
<th>Titre 1</th>
...
</tr>
</thead>
<tfoot> (facultatif)
...
</tfoot>
<tbody>
<tr>
<td>Line 1 Data col 1</td>
...
</tr>
...
</tbody>
</table>
Tableau basique
Nous avons créé une classe basique .tab qui habille sobrement un tableau et force sa largeur à 100%. C'est la classe minimum à appeler pour obtenir un habillage présentable par défaut.
| Titre 1 | Titre 2 | Titre 3 |
|---|---|---|
| Line 1 Data col 1 | Line 1 Data col 2 | Line 1 Data col 3 |
| Line 2 Data col 1 | Line 2 Data col 2 | Line 2 Data col 3 |
| Line 3 Data col 1 | Line 3 Data col 2 | Line 3 Data col 3 |
<table class="tab">
...
</tab>
Légende d'un tableau
La balise <caption> est facultative lors de la création d'un tableau. Toutefois, si vous souhaitez l'agrémenter d'une légende, nous avons prévu deux classes .caption et .caption-bottom. La première permet de ferrer le texte à gauche, de le passer en italic et en gris. La seconde classe est facultative. Elle permet de placer la légende en-dessous du tableau.
| Titre 1 | Titre 2 | Titre 3 |
|---|---|---|
| Line 1 Data col 1 | Line 1 Data col 2 | Line 1 Data col 3 |
| Line 2 Data col 1 | Line 2 Data col 2 | Line 2 Data col 3 |
| Line 3 Data col 1 | Line 3 Data col 2 | Line 3 Data col 3 |
<table class="tab">
<caption class="caption caption-bottom">
...
</caption>
...
</tab>
Tableau avec cellules espacées
La classe .separate-cell ajoute des espaces entres les cellules et offre un esthétisme un peu plus aérien.
| Titre 1 | Titre 2 | Titre 3 |
|---|---|---|
| Line 1 Data col 1 | Line 1 Data col 2 | Line 1 Data col 3 |
| Line 2 Data col 1 | Line 2 Data col 2 | Line 2 Data col 3 |
| Line 3 Data col 1 | Line 3 Data col 2 | Line 3 Data col 3 |
Tableau avec cellules espacées et arrondis
La classe .radius-cell ajoute des arrondis aux cellules. Notez toutefois que cette classe ne fonctionne qu'en association avec la classe .separate-cell.
| Titre 1 | Titre 2 | Titre 3 |
|---|---|---|
| Line 1 Data col 1 | Line 1 Data col 2 | Line 1 Data col 3 |
| Line 2 Data col 1 | Line 2 Data col 2 | Line 2 Data col 3 |
| Line 3 Data col 1 | Line 3 Data col 2 | Line 3 Data col 3 |
<table class="tab separate-cell radius-cell">
<caption class="caption">
...
</caption>
...
</tab>
Tableau avec bordure en bas
La classe .tab-bb (pour border-bottom) affiche uniquement des bordures en bas des cellules. Cette classe est compatible avec .separate-cell et .radius-cell.
| Titre 1 | Titre 2 | Titre 3 |
|---|---|---|
| Line 1 Data col 1 | Line 1 Data col 2 | Line 1 Data col 3 |
| Line 2 Data col 1 | Line 2 Data col 2 | Line 2 Data col 3 |
| Line 3 Data col 1 | Line 3 Data col 2 | Line 3 Data col 3 |
<table class="tab tab-bb">
...
</tab>
Tableau avec lignes zébrées, alternées et effet de survol
Les classes .tab-zebra et .tab-hover permettent respectivement de créer un fond alterné et d'ajouter un effet :hover au passage de la souris au-dessus des lignes du tableau, uniquement dans la partie <tbody>. Il n'est pas obligatoire d'utiliser les deux classes en même temps. Ces deux classes sont compatibles avec toutes les autres classes de tableaux précédemment abordées
| Titre 1 | Titre 2 | Titre 3 |
|---|---|---|
| Line 1 Data col 1 | Line 1 Data col 2 | Line 1 Data col 3 |
| Line 2 Data col 1 | Line 2 Data col 2 | Line 2 Data col 3 |
| Line 3 Data col 1 | Line 3 Data col 2 | Line 3 Data col 3 |
<table class="tab tab-zebra tab-hover">
...
</tab>
Les formulaires
La création de formulaire est toujours un peu fastidieuse. La bibliothèque flexitem met à votre diposition une série de classes, afin de faciliter leur habillage et offrant de nombreuses possibilités de mise en forme.
Exemple de formulaire classique
Par défaut, la balise <form> prend 100% de l'espace disponible. Les classes .form-width-5 à .form-width-8 (de 500px à 800px de large), permettent de fixer une valeur à la propriété max-width. La classe .form centre automatiquement le formulaire. Celui-ci reste néanmoins responsive dès lors qu'il atteint une taille inférieure à celle fixée.
<form class="form form-width-6">
...
</form>
Dans cette exemple, le formulaire a une largeur maximum de 600px
Fieldset et legend
Bien que les balises <fieldset> et <legend> soient facultatives et ont tendance à ne plus êtres utilisées dans les formulaires, flexitem les prend néanmoins en compte. Aucune classe n'est à appliquer, ces deux balises sont automatiquement habillées par notre bibliothèque.
Positionnement des labels et champs de saisie
Dans flexitems, nous considérons que l'association d'un <label> et d'un champ de saisie de type <select>, <textarea> ou <input> (autre que checkbox ou radio), constituent un groupe de champs. Pour positionner et habiller automatiquement un <label> et un champ de saisie, vous devez l'encadrer d'une balise de type block à laquelle vous appliquerez la classe .field-group. Par défaut le <label> et le champ se positionneront l'un à côté de l'autre. Grâce aux propriétés du module flexbox un champ de saisie occupera toujours 2 fois l'espace occupé par un <label>, quelque soit la largeur de votre formulaire.
<form class="form form-width-6">
<div class="field-group">
<label>Nom : </label>
<input name="last-name" placeholder="Last name" type="text">
</div>
<div class="field-group">
...
</div>
</form>
Faire glisser automatiquement un champs sous un label en fonction du type de support
En fonction du type de support (mobiles ou tablettes), il est possible de forcer un champ à passer en-dessous un <label>. Pour cela il suffit d'ajouter l'une des classes de rupture sur l'élément qui contient le <label> et le champs de saisie. Les classes de rupture sont .field-tablet, .field-mobile-lg, .field-mobile-sm et .field-mobile-xs.
<form class="form form-width-6">
<div class="field-group field-mobile-lg">
<label>Nom : </label>
<input name="last-name" placeholder="Last name" type="text">
</div>
<div class="field-group field-mobile-xs">
...
</div>
</form>
Dans cet exemple le premier champs décroche à partir de 991px
et le second à partir de 575px.
Placer automatiquement un label au-dessus d'un champs de saisie
Si le positionnement en ligne par défaut ne vous convient pas, il est possible de forcer le placement du <label> au-dessus du champs. Il suffit d'ajouter la classe .field-column à l'élément conteneur. Le champ de saisie prend alors 100% de l'espace disponible. Dans ce cas les classes de rupture ne sont plus utiles
<form class="form form-width-6">
<div class="field-group field-column">
<label>Nom : </label>
<input name="last-name" placeholder="Last name" type="text">
</div>
<div class="field-group field-column">
...
</div>
</form>
Positionnement des labels, checkbox et radio
Le positionnement des <input> de type checkbox ou radio fonctionne un peu différemment. En effet, pour l'expérience utilisateur, il n'est pas souhaitable que le <label> de ces « champs » un peu particuliers soient placés autre part qu'à gauche ou à droite. Voici donc la structure pour positionner une ou plusieurs « cases à cocher » sur une ligne. Nous retrouvons notre classe .field-group appliquée sur l'élément englobant. Nous ajoutons simplement des éléments de type block supplémentaires qui engloblent nos labels et nos « cases à cocher ». Sur ces nouveaux éléments, on applique une classe .fields-items et le tour est joué.
<form class="form form-width-6">
<div class="field-group">
<div class="field-items">
<label>Permis A</label>
<input name="licence-a" type="checkbox">
</div>
<div class="field-items">
...
</div>
...
</div>
<div class="field-group">
<div class="field-items">
<input name="" type="radio">
<label>Oui</label>
</div>
<div class="field-items">
...
</div>
...
</div>
</form>
Positionner labels, checkbox et radio en colonne
Il est possible de positionner les labels, checkbox et radio les uns en-dessous des autres grâce à la classe .field-column précédemment vue.
<form class="form form-width-6">
<div class="field-group field-column">
<div class="field-items">
<label>Permis A</label>
<input name="licence-a" type="checkbox">
</div>
<div class="field-items">
...
</div>
...
</div>
</form>
Labels, checkbox, radio et points de rupture
Comme pour les champs de saisie, on peut forcer le passage en colonne pour les labels, checkbox et radio en utilisant l'une des classes de rupture précédemment utilisées.
<form class="form form-width-6">
<div class="field-group field-mobile-sm">
<div class="field-items">
<label>Permis A</label>
<input name="licence-a" type="checkbox">
</div>
<div class="field-items">
...
</div>
...
</div>
</form>
Se mettra en colonne à partir de 767px
Exemple complet de formulaire classique avec fieldset et tout, et tout...
... et le code...
<form class="form form-width-6">
<fieldset>
<legend>Civilités</legend>
<div class="field-group field-mobile-xs">
<label>Civilités : </label>
<select id="" name="">
<option value=""></option>
<option value="">Madame</option>
<option value="">Mademoiselle</option>
<option value="">Monsieur</option>
</select>
</div>
<div class="field-group field-mobile-xs">
<label>Nom : </label>
<input name="last-name" placeholder="Last name" type="text">
</div>
<div class="field-group field-mobile-xs">
<label>Prénom : </label>
<input name="first-name" placeholder="First name" type="text">
</div>
</fieldset>
<fieldset>
<legend>Avez-vous le permis ?</legend>
<div class="field-group field-mobile-xs">
<div class="field-items">
<label>Permis A</label>
<input name="licence-a" type="checkbox">
</div>
<div class="field-items">
<label>Permis B</label>
<input name="licence-b" type="checkbox">
</div>
<div class="field-items">
<label>Permis C</label>
<input name="licence-c" type="checkbox">
</div>
</div>
</fieldset>
<fieldset>
<legend>Avez-vous un véhicule ?</legend>
<div class="field-group field-mobile-xs">
<div class="field-items">
<input name="" type="radio">
<label>Oui</label>
</div>
<div class="field-items">
<input name="" type="radio">
<label>Non</label>
</div>
<div class="field-items">
<input name="" type="radio">
<label>Peut-être</label>
</div>
<div class="field-items">
<input name="" type="radio">
<label>j'en sais rien</label>
</div>
</div>
</fieldset>
<div class="field-group field-column">
<label>Commentaires : </label>
<textarea></textarea>
</div>
<div class="field-group field-mobile-xs">
<label>Déposer un fichier : </label>
<input name="file" type="file">
</div>
<div class="ta-center">
<button class="button success-btn large-btn" type="submit">Validez</button>
</div>
</form>
Exemple de formulaire sur une seule ligne
Pour créer un formulaire sur une seule ligne, il n'est pas nécessaire d'appliquer de classe à la balise <form>. La structure HTML se rapproche de celle utilisée pour la mise en place des <label> et <input> de type checkbox et radio. La grande différence se situe sur la classe de groupe utilisée. Son nom est explicite .field-group-inline. Voici un exemple de formulaire. Les classes de rupture .field-tablet, .field-mobile-lg, .field-mobile-sm et .field-mobile-xs sont compatibles avec ce type de formulaire.
<form>
<div class="field-group-inline field-mobile-sm">
<div class="field-items">
<label>Utilisateur :</label>
<input name="last-name" placeholder="Login" type="text">
</div>
<div class="field-items">
<label>Mot de passe :</label>
<input name="first-name" placeholder="Password" type="password">
</div>
<div class="field-items ta-center">
<button class="button success-btn" type="submit">Validez</button>
</div>
</div>
</form>
Autres versions de flexitems
Flexitems UltraLight
Flexitems UltraLight est une version ultra allégée de flexitems. Elle intègre toujours le fichier de normalisation Normalize. En revanche la bibliothèque Font awesome et la librairie Prism JS sont absentes.
Flexitems UltraLight conserve uniquement le système de grille. Toutes les autres classes de mise en forme et d'habillage sont absentes de cette version.
Flexitems UltraLight est conçu pour les utilisateurs qui ne souhaitent utiliser que la partie du système de grille et garder une totale liberté quand à l'esthétique et la mise en forme.
Flexitems Light
Flexitems Light est une version allégée de flexitems. Elle intègre toujours le fichier de normalisation Normalize, la bibliothèque Font awesome et la librairie Prism JS.
Flexitems Light conserve également le système de grille, la mise en forme des cadres, des tableaux et des formulaires, ainsi que l'alignement des paragraphes et le positionnement des images. Toutes les autres classes de mise en forme et d'habillage sont absentes de cette version.
Flexitems Light est conçu pour les utilisateurs qui ne souhaitent pas s'embêter à habiller les tableaux et les formulaires tout en conservant certains aspects pratiques de la bibliothèque.
La bibliothèque flexitems est open source et sous licence Creative Common : CC-BY-SA 
. Cela veut dire que vous pouvez copier, modifier et utiliser librement flexitems dans toute sorte de projets, y compris à des fins commerciales.
Toutefois, vous ne pouvez pas vendre la version originale de flexitems seule.
Si, pour les besoins d'un projet (commercial ou non), vous modifiez la version originale de flexitems et que vous souhaitez distribuer votre version modifiée de flexitems seule, vous devez :
- mentionner que c'est une version modifiée de la version originale de flexitems
- permettre, par un moyen quelconque, d'accéder à la version originale de flexitems
- laisser votre version modifiée de flexitems en open source et en accès gratuit, sous une licence identique à la version originale, afin que la communauté puisse en bénéficier.