Trucsweb.com

Trucsweb.com

CSS

Framework

RDFFav

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

Des monstres Twitter Bootstrap et Zurb Foundation 5 aux petites initiatives.CSS3, Framework, Frameless, Bootstrap, fundation, cadriciel, cadre d’applicationsLes « cadre de travail CSS » ou cadriciel (Framework)

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 »
Outils
, Analyste programmeurConception oznogco multimédia (https://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    10/10 sur 1 revues.
           Visites : 11604 - Pages vues : 11919
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @