Je commence une série d’article à propos d’outils permettant de faciliter le développement d’un site internet responsive, s’adaptant dynamiquement à la taille de l’écran du média. Dans cet article, je vais parler uniquement de tout ce qui a un rapport avec le CSS. En particulier des grids et des templates CSS.
320 and up
320 and up est un template basé sur HTML5 Boilerplate et la grid de Less Framework 4.
320 and up
1140 CSS Grid
1140 CSS Grid se base sur la résolution d’un moniteur de 1280 de large, et se réduit de manière fluide sur les plus petites résolutions.
Less Framework 4
Less Framework 4 permet de construire des sites web qui s’adaptent aux différents devices grâce à 4 templates et 3 pré-réglages typographiques.
Mobile Boilerplate
Mobile Boilerplate est une collection de CSS, HTML et diverses bibliothèques Javascript permettant de bien démarrer un projet web mobile.
Skeleton
Skeleton contient une grille CSS et un style de base (typographie, formulaire, boutons…) pour commencer un projet.
Golden Grid System
Golden Grid System : Pour moi une des grilles adaptatives les plus propres. L’avantage de celle-ci est qu’elle conserve plusieurs colonnes tout le temps, même au format mobile.
The Semantic Grid System
The Semantic Grid System est intéressante dans le sens où c’est vous qui choisissez le nombres de colonnes, la taille des marges etc.
Je vous conseille aussi de ne pas hésiter à modifier ces divers frameworks pour votre utilisation. Par exemple le thème de ce blog tourne sur une version modifiée de Skeleton — j’ai rendu la grille fluide – et les bibliothèques Javascript de 320 and up.
En regardant le code de ces projets vous allez avoir une meilleure vision de ce qui se passe avec les media queries. Et ainsi adapter leurs fonctionnements à votre propre projet.