Les « cadre de travail CSS » ou cadriciel (Framework)

Le terme « Framework HTML », en vogue ces dernières années, décrit les efforts de développement indépendant de création de gabarits HTML et de normalisation CSS. Dans ce qu’on pourrait appeler un « cadre de travail HTML » ou « cadre d’applications » et même « cadriciel ». Ça va de la simple feuille de styles (CSS) aux amalgames les plus complexes à la « Boilerplate »! Ce qui est extraordinaire avec cette culture, c’est qu’elle est au centre du développent Web au sens large. C’est pourquoi on y greffe souvent plusieurs outils à la base du développement Web.

En fait on peut absolument tout englober dans un « cadriciel ». Il vient d’ailleurs avec une arborescence et une organisation biens précise pour gérer tout les fichiers. Essayons de démystifier tout ça.

CSS Reset : À la base de la plupart des « cadriciels » la Remise à zéro CSS est la base pour construire leur feuille de style. Normalize.css dans le cas de Bootstrap ou fundation ou encore Eric Meyer’s.
Système de grilles (grids) : En premier lieu pour organiser l’information en colonne et gouttières.
Responsive : En extension au système de grilles selon le media queries (@media).
Réutilisables : Classes réutilisable, en-tête, boutons, couleurs, tableaux, formulaires.
Modulaire : Les gabarit modulaire sont tout à fait adapté aux développement Web. On peut par exemple décider de ne charger que les classe des coutons. Même chose pour les composante, certains « cadriciel » offre même les composantes à la pièce. Ce qui n’est pas le cas avec Bootstrap, sans disséquer manuellement la feuille de styles. Un bon exemple Cascade Framework.
Modernizr : Librairie Javascript qui détecte les capacités HTML5/CSS3 des navigateurs.
HTML5shiv : Compatibilité HTML5 pour les vielle versions d’Internet Explorer
Composantes, snippets et jQuery : La fameuse librairie de Google utilisé en général pour les fenêtres modales, défilement, pupup, accordéons et menu de toutes sorte. Et autres composantes.
Autres : Collection de pictogrammes vectoriels, documentation...

Et quelques outils

Gabarit CSS : Exemples et démos complet
Preprocesseurs. Construire, personnalisé et pré compiler vos code sources rapidement avec Less ou Sass.

Essentiellement des librairie CSS et Javascript, mais tout un monde pour autant d’exception. Si certain fichier sont optionnel, notamment « HTML5shiv », d’autres sont indispensables malgré leur inutilité. Rien ne fonctionne bien sans remise à zéro. Sans système de grille, le contenu n’est plus organisé et plus question de faire du « responsive » ...ainsi de suite. Vous oublier « Modernizr » et plus rien ne fonctionne!

Le contenu aux édimestres, les recommandations à la W3C, les norme de l’industrie, il ne restait que le CSS aux concepteurs!

Et c’est exactement ce qui est arrivé. Du simple « Frameless », c’est à dire un « cadre de travail minimal » essentiellement destinée à créer une système de grillage (grid) CSS. Aux monstrueux « cadriciel » avec Javascript et jQuery, tout aussi basé sur un système de grille. Les concepteurs créait des « cadriciel » pendant que le HTML5 aurait du profiter de l’occasion pour créer un système de grille digne du HTML! À un point elle que c’est carrément le CSS3 qui a régler plusieurs problème historiquement réglé par les « cadriciel », par exemple le système de colonnes! Il reste encore beaucoup à faire et j’espère que le XHTML5 aura une balise grille à tout le moins grid ; -) Mais le CSS3 est aller beaucoup plus loin, au point de faire pâlir jQuery comme on le verra plus tard.

D’ici à ce qu’une solution de grille HTML/CSS aligne de façon native les et fluide les éléments « in-line », c’est une job de CSS-perso! Et une bonne vielle classe .grid ou .col. Voilà donc pourquoi pour plusieurs les « cadriciel » et surtout les « Frameless » reste quasi indispensable et surtout d’actualité malgré les nombreuses critiques.

Avantages

La job est faite!

Quoi dire de plus, avec un « cadriciel » c’est une mise à jour de temps en temps sans plus! Et le risque d’un bon mal de « block » quand la mise à jour passe de la version 2 à la version 3! On peut dire à la défense des grands « cadriciel » qu’ils ont plus d’expérience, que les nouvelles version sont aussi plus « responsable ». Les dernières versions plus « sémantique » sont davantage compatible CSS3 quoi que toujours très attaché au jQuery. Mais l’avantage reste la simplicité d’installation et de mise à jour.

Simplicité et rapidité

Un bon exemple est la page de base de Fundation ou encore Bootstrap. Il suffit de quelques lignes pour avoir une page 100% compatible avec l’ensemble des styles, des composantes (windgets) natives ou jQuery présenté dans les pages d’exemples de Bootstrap. Ici la version 4.0.0-alpha.4 :

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Balises méta obligatoire en premier -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap 4.0.0-alpha.4 - CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
  </head>
  <body>
    <h1>Bonjour, le monde!</h1>

    <!-- jQuery en premier, puis Tether et Bootstrap 4 - JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
  </body>
</html>

Portabilité

Le meilleurs des argument en faveur du « cadriciel » est sa grande popularité. Largement rependue et supporté par les gestionnaires de contenu comme WordPress. Il existes par exemple des milliers de gabarit Bootstrap, certains gratuits mais aussi des répertoire à des pris tout à fait abordable comme WrapBootstrap - Bootstrap Themes & Templates

Critiques

Outre sont poids, jusqu’à 50k sans compter jQuery, c’est la remise à zéro (CSS Reset) des classes CSS prédéfinies par le navigateur qui est remise en question. Lire sur le sujet le tutoriel Remise à zéro CSS (Reset).

La normalisation du design. C’est vrais qu’on n’est pl;us à l’époque des gros sites sensationnels et des concours de beauté Shockwave par exemple mais ce n’est certainement pas à cause des « cadriciel »! Le « cadriciel » améliore en générale l’aspect visuel des développements informatique! Ce que certain appelle un anti-design porte aussi le nom d’ergonomie. C’est un manque d’originalité avec le mérite d’être claire et sans ambiguïté.

En fait une évolution darwinienne du Web 2 profitant de l’incapacité du HTML de . Une « patch » naturel pour s’adapter aux nouvelle réalités. Avant tout celle de bêtement améliorer le HTML et son incapacité à régler le car puis celle d’animer les pages avec les widget, combiner au nombreux outils notamment des widgets jQuery du mobiles et surtout des widgets.

Comparateur

Consulter cette comparaison de trois « cadriciel » Bootstrap, Foundation et Skeleton avec Responsive CSS Framework Comparison. Question de vous faire une idée sur les principales différences, en version .min.

Semantic-UI 2.4.2 (818ko)
Boostrap 4.50 (237ko)
Boostrap 4.40 (156ko)
Boostrap 4 Alpha (87ko)
Boostrap 3 (100ko)
Bulma 0.8.0 par Jeremy Thomas (189ko)
Google Materialize (63ko)
Tailwind CSS 1.1.3 par Adam Wathan (536ko)
Pure.css par Yahoo (3.8ko)
Fundation 6 (46.7ko)
Fundation 5 (150ko)
W3.CSS (29ko)
Skeleton 2 (12ko)
Spectre.css (~10ko)
Toast par Daniel Eden (7.11ko)

C’est surtout au niveau du poids. Et du nombre de composants nécessaires. D’ailleurs tant Bootstrap que Fundation permettent de créer votre propre structure en choisissant à la pièce les composantes que vous désirez.

Le débat fait rage depuis déjà nombre d’année. Mais personnellement, c’est seulement trois méthodes pour faire essentiellement la même chose avec la même technique! Un développeur peut embourber son code de classes et de styles. Combiner un tas de classes similaires, refaire et défaire des classes à répétition. Ils utilisent d’ailleurs pour la plupart « normalize »! Sans parler des librairies inutiles et du 80k de jQuey, pour un simple popUp ou un menu « accordéon ». Alors qu’elle « cadriciel » est le meilleur, dans le contexte où les trois utilisent l’art du CSS, me semblent un peu facile voir intéressé.

Il y a des aspects qui m’énervent et d’autres que j’aime bien, particulièrement pour faire vite et bien un bon vieux copier coller! Un développeur sérieux construit déjà son « framwork » au quotidien. Mais avec Fundation ou Bootstrap, personne ne peut plus se contenter d’une mise en page négligée. Sans parler que l’ergonomie est une question de culture, de convention que tant Fundation que Bootstrap aide à établir. C’est d’autant plus facile d’expliquer à un internaute ou à un client la fenêtre modale ou une boîte d’alerte quand 99% des sites web l’utilisent déjà. Tout comme c’est facile de sortir du lot et d’être original...

Boilerplate

Le « Boilerplate » est une usine à gabarit, très pratique pour le débutant quoi qu’on en beurre épais. On y passe aussi les code Google Analytics, .htaccess, le robot.txt etc.

HTML5 ★ Boilerplate
Le concepteur de gabarit HTL5 le plus populaire du Web
http://html5boilerplate.com/

Initializr
Initializr est un générateur de gabarit HTML pour vous aider à construire un projet Web complet basé sur « HTML5 Boilerplate ». Un gabarit personnalisable fin prêt pour le Web.
http://www.initializr.com/

Cadriciel

Bootstrap 4.50
Bootstrap est le « cadriciel » le plus populaire pour le développement « responsive ».

Auteur
Twitter

Grilles (Grids)
Fluide et Flexbox

Outils (UI)
Plusieurs Widget et prêt pour le développement

Détails
Premier des « cadriciel » développé par Twitter. Si la version 2 était à cheval entre la « patch » et le « cadriciel » la version 3 est définitivement orientée HTML5 / CSS3. Nouvelle version 4

Poids
CSS 157 ko
JS 80 ko

Url
getbootstrap.com
Zurb Foundation 6
Le plus avancé des « framework responsive » dans le monde entier.

Auteur
Twitter

Grilles (Grids)
Fluide et Flexbox. Meilleurs gestion selon le « viewport ».

Outils (UI)
Outils de développements modulaires puissants. Plus de style agnostique de Bootstrap

Détails
Plus lourd que Bootstrap, je l’aime moins. Mais il est très « clean » et la nouvelle version 6 est très attendu...
Nouvelle version 6

Url
foundation.zurb.com
W3.CSS
Depuis mai 2015, la W3C offre aussi son propre cadriciel. Moins sophistiqué qu’un Bootstrap par exemple, c’est quand même la W3C qui est derrière le CSS, c’est sans aucun doute un bon choix, simple, léger et intéressant tout au moins pour examen!

Auteur
W3C

Grilles (Grids)
Fluide

Outils (UI)
Plusieurs exemple et gabarits et sans jQuery.

Détails
W3.CSS est gratuit et aucune licence n’est nécessaire. Noter que la W3C utilise ironiquement, partiellement, Normalize.css.
Nouvelle version 2.7

Url
w3schools.com/w3css/
Materialize
Fallait bien que Google ait le sien, essentiellement calqué sur Bootstrap...

Auteur
Google

Grilles (Grids)
Fluidex

Outils (UI)
Plusieurs Widget et prêt pour le développement

Détails
Google doit encore travailler son cadriciel. On y trouve des inutilités comme toutes les couleurs de l’arc-en-ciel ou encore 6 niveaux d’ombrage! Si vous voulez ressembler à Google.

Url
materializecss.com

Version
v0.97
KNACSS
Un « cadriciel » simple et léger comme un « frameless ».

Auteur
Raphaël Goetter (Alsacreations)

Grilles (Grids)
Fluide

Outils (UI)
Plusieurs snippets et sans jQuery.

Détails
Cadre de travail francophone!

Url
knacss.com
Compass
Cadre de travail de développement CSS open-source.

Auteur
Handlino, Inc

Grilles (Grids)
Fixe

Url
compass-style.org
Cascade Framework
Redonner du C au CSS.

Auteur
John Slegers

Grilles (Grids)
Fluide

Url
cascade-framework.com
Skeleton
Aussi léger qu’un « Frameless ».

Auteur
Dave Gamache

Grilles (Grids)
Fixe

Url
getskeleton.com
Susy
Composante de « Compass ».

Auteur
Eric M. Suzanne

Grilles (Grids)
Fluide

Url
susy.oddbird.net
Bourbon
Un outil légé pour Sass.

Auteur
Thoughtbot inc.

Grilles (Grids)
Fluide

Url
bourbon.io
Metro UI CSS 3.0
Développer des projets de style Metro de Windows.

Auteur
Sergey Pimenov (Kiev, Ukraine)

Grilles (Grids)
Fluide

Outils (UI)
Plus de 300 composantes, il n’est pas lourd pour rien...

Détails
Grosse librairie avec moult composantes pour développer des projets de style Metro de Windows, compatible Sass.

Url
metroui.org.ua
Kube CSS Framework 5.0
CSS cadriciel quasi monochrome pour designers et développeurs professionnels.

Auteur
Imperavi (Alex et Art)

Grilles (Grids)
Fluide et Flexbox

Outils (UI)
Aucun.

Détails
Très léger, propre, minimaliste et rapide à mettre en œuvre, Kube permet l’essentiel du cadriciel.

Url
imperavi.com/kube
Semantic UI 2.4.2
l’Interface Usager est le langage du Web.

Auteur
Jack Lukic

Grilles (Grids)
Fluide et Flexbox

Outils (UI)
50 composantes.

Détails
Grosse librairie très complète avec un tas de composantes, jQuery, Sass et débogueur!

Url
semantic-ui.com/
Bulma 0.8.0
utilisé par plus de 200,000 développeurs.

Auteur
Jeremy Thomas

Grilles (Grids)
Fluide et Flexbox

Outils (UI)
Une dizaine de composantes.

Détails
Petite librairie mais grosse communauté!

Url
bulma.io
Tailwind CSS 1.1.3
pour construire rapidement des designs personnalisés.

Auteur
Adam Wathan

Grilles (Grids)
Fluide et Flexbox

Outils (UI)
Classes utilitaires de bas niveau.

Détails
Au lieu de composants préconçus et préconçus, Tailwind fournit des classes utilitaires de bas niveau qui vous permettent de créer des conceptions entièrement personnalisées sans jamais quitter votre code HTML.

Url
tailwindcss.com
YUI 3.18.1
l’Interface Usager est le langage du Web.

Auteur
Yahoo!

Grilles (Grids)
Fluide et Flexbox

Outils (UI)
Plus de 300 composantes.

Détails
Plus qu’un cadriciel c’est une grosse librairie du DOM au Serveur!

Url
yuilibrary.com
AlloyUI
des outils IU robustes à portée de main.

Auteur
Liferay

Grilles (Grids)
Fluide et Flexbox

Outils (UI)
Plus de 300 composantes.

Détails
Construit sur le cadriciel YUI3 qui utilise Bootstrap pour fournir une API simple afin de construire des applications évolutives.

Url
alloyui.com
Toast
système de grille (grid).

Auteur
Daniel Eden

Grilles (Grids)
Fluide

Outils (UI)
Aucun

Détails
Douze colonnes. Six colonnes. Neuf colonnes. Comme beaucoup de colonnes que vous voulez, en autant de combinaisons que vous le souhaitez.

Url
daneden.github.io/Toast
Spectre.css
Basée sur Flexbox et adaptée aux mobiles.

Auteur
Yan Zhu

Grilles (Grids)
Fluide et Flexbox

Outils (UI)
Plusieurs Widget et prêt pour le développement

Détails
Un framework CSS léger, réactif et moderne.

Url
picturepan2.github.io/spectre/index.html
UIKit 3.4.6
Un cadriciel modulaire pour développer des interfaces web rapides.

Auteur
Yootheme

Grilles (Grids)
Fluide et Flexbox

Outils (UI)
Tous les Widgets possibles prêt pour le développement

Détails
Un framework CSS moyennement lourd et très complet.

Poids
CSS 258ko
JS 130 ko
Pictogrammes 63 ko

Url
getuikit.com/

Frameless et système essentiellement « responsive »

Frameless par Joni Korpi
Adepte du colonne par colonne au lieu du pixel par pixel.
Golden Grid System
Système de grille (grid) pour design adaptatif.
Découverte du cadriciel CSS KNACSS
Pure
Une petite collection de CSS « responsive » et modulaire à utiliser pour tout vos projets.
1140px CSS Grid Retired
RÖCSSTI le micro-framework CSS pour démarrer une CSS avec la patate !
inuitcss par Harry Roberts - Système de grille (grid)
Grid.css par Mateo Gianolio - Système de grille (grid) sans sélecteurs»
Toast par Daniel Eden - Système de grille (grid)»
Responsive Grid System
Simple et spectaculaire « design responsive »
MUELLER
Système de grille (grid) modulaire pour design tant « responsive » que « non-responsive » basé sur le « cadriciel » Compass.