geek
Publié le - 385 hits -

HTML5 Boilerplate

Le terme Boilerplate était auparavant utilisé par les juristes dans la conception des contrats ou des courriers types dans lequel il y a toujours la même structure qu’il leur fallait tout simplement personnaliser.


Ce terme est désormais utilisé dans la conception des pages web étant donné que les éléments de bases sont toujours les mêmes, mais qu’il suffit de changer tout simplement leur agencement. HTML5 Boilerplate a été créé par Paul Irish et Divya Manian. Compressé dans un fichier zip, le but est de favoriser l’adoption de HTML avec l’inclusion par défaut de la librairie Modernizr, jQuery via GoogleAPI. Ci-dessous les fonctionnalités compatibles :


• HTML5 ready
• Compatibilité cross-browser (IE6 inclut)
• Directives variées de configuration par défaut
• Directives pour les navigateurs mobiles
• Préparation pour l'utilisation de règles @font-face
• Dégradation gracieuse et amélioration progressive
• Classes spécifiques à IE pour un contrôle plus fin
• Classes .js et .no-js
• Classes .clearfix et .visuallyhidden pour styler ces éléments de la bonne façon (accessible)
• Profiling JavaScript dans IE6 et IE7
• Optimisation de console.log (non bloquant)
• Reset CSS et normalisation des polices
• Feuille de style impression (media print)
• Squelette HTML/CSS adaptable pour iOS, Android, Opera Mobile
• Fichier .htaccess pour utilisation des fonctionnalités HTML5 et optimisation du chargement du contenu, règles pour le cache (dates d'expiration) et la compression
• Fix PNG pour IE
• Fichier plugins.js déjà prêt pour jQuery
• Fichier robots.txt
• Page 404 par défaut
• Fichier crossdomain.xml
• Code Google Analytics
• Modèle pour des tests unitaires
• Le tout en UTF-8
• etc...


Le principe

Le principe de Boilerplate est assez simple, car il suffit de concevoir tout simplement la page HTML avec le contenu, en ajourant quelques nombres de « class », de balise, etc… qui seront liées à des feuilles de styles, soit à des codes javascript préétablis. Pour ceux qui ont déjà une connaissance ou maîtrisant le HTML/CSS, ils les comprendront bien et peuvent arriver à un résultat très correct.
En d’autres termes, Boilerplate est une technique de prototypage qui consiste à coder le plus tôt possible, tout en se souciant de la rapidité d’exécution, c’est le mixage HTML+CSS+JavaScript+... Les Boilerplate les plus utilisés sont : Fondation, Twitter Bootstrap ou HTML KickStart, car ils fournissent directement une grille topographique, des styles de bases, des éléments d’UI (Menus, Formulaires), ainsi que des plug-ins jQuery tels que diaporamas et fenêtres modales.


Si nous prenons l’exemple du Boilerplate « Twitter Bootstrap », il propose directement un système de responsive design, toux ce qu’il y de nécessaires pour les formulaires (boutons, menus déroulants, pop-up, des navigations, carrousels, onglets pour structurer l’information, et enfin un système classique de grille pour positionner rapidement les éléments et bien d’autres à découvrir sur le site.

 


Comment s’en servir

Comme énoncé précédemment, le Boilerplate nous fournit déjà le squelette de la page, il suffit de commencer à construire notre page HTML et concevoir les liens comme un site web dans un éditeur qui vous convient comme Dreamweaver, SublimeText, Notepad++ … ou Expresso dans les cas de la figure ci-dessous.


En effet, rien ne nous empêche d’ajouter nos propres feuilles de style CSS pour la personnalisation de certains éléments. De toute façon, les CSS se basent sur un système {LESS} qui nous permet de produire une CSS en fonction de variables. C'est-à-dire que l’on peut changer toutes les apparences d’une couleur « Bleue » par exemple en modifiant tout simplement la variable « Bleue ».

Laissez votre commentaire à propos de cet article