Actualités WordPress, CSS & Webdesign, OceanWP & Elementor.

HTML5 Boilerplate HTML5 Boilerplate est un template (HTML+CSS+JS+…) lancé par Paul Irish (Modernizr) et Divya Manian.

Il propose toutes les bonnes pratiques du moment en terme de performances, de compatibilité inter-navigateurs, de JavaScript, avec un peu d’accessibilité, voire de Flash.

Vous retrouverez dans un dossier de 319 Ko tous les fichiers et sous-répertoires organisés pour débuter votre intégration avec d’excellentes bases. Bien entendu, vous l’aurez deviné, le but est de favoriser l’adoption de HTML, d’où l’inclusion par défaut de la librairie Modernizr, ainsi que jQuery via GoogleAPI (avec fallback local). Voici une liste des fonctionnalités supportées :

  • HTML5 ready
  • Compatibilité cross-browser (IE6 inclus)
  • 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
  • L’ensemble est en UTF-8

Configurateur Initializr On apprécie le site de configuration Initializr pour bâtir rapidement une structure selon quelques critères techniques (Classic HTML, Responsive, Bootstrap) et un choix d’inclure un certains nombre d’options comme les balises Google Analytics, jQuery, les classes spécifiques à IE, etc. Une fois configuré vous récupérez un ensemble de fichiers pré-définis à compléter pour votre futur site. Un certains nombres de bugs sont en cours de correction mais l’ensemble est déjà plutôt stable. Il est, de plus, maintenu avec les dernières versions des éléments qui le compose.

Initializr configurateur Ci-contre un aperçu de la palette de configuration pour du responsive par exemple. Notez la possibilité de gérer un fichier Htaccess performant pour améliorer le chargement des pages.

Il s’agit avant tout d’un tout, les codes, librairies, annexes et images sont à prendre avec circonspection, l’avantage ici c’est de retrouver dans un template/framework la plus grande partie des technologies actuelles (et à venir). On se gardera de se lancer à l’aveuglette avec un tel canevas sans savoir où on met les pieds… mais d’évidence, cela peut vous apprendre ou faire découvrir les technos du moment (frameless, HTML5, CSS3, JS…).

C’est bien une excellente base pour se faire les dents si vous envisagez de passer sur HTML5 / CSS3 / Responsive design / technos mobile web d’ici quelques temps…

A tester au calme. 🙂

Sources : AlsacréationsHTML5 Boilerplate / Configurateur Initializr

 

Cet article a 1 commentaire

  1. En tant que novice, je recherche toujours en ligne les articles qui peuvent m’aider. Merci.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Fermer le menu