7 frameworks CSS pour développer en Responsive Web Design

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.

1140 CSS Grid

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.

Less Framework 4

Mobile Boilerplate

Mobile Boilerplate est une collection de CSS, HTML et diverses bibliothèques Javascript permettant de bien démarrer un projet web mobile.

Mobile Boilerplate

Skeleton

Skeleton contient une grille CSS et un style de base (typographie, formulaire, boutons…) pour commencer un projet.

Skeleton

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.

Golden Grid System

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.

The Semantic Grid System

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 Skeletonj’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.

Si vous en connaissez d’autres, n’hésitez pas à en parler aux gens avec les commentaires.

Vus : 453
Publié par Rydgel : 137