Choisir sa grille CSS
Organisation de l'espace
Différentes grilles CSS
- Twitter Bootstrap
- Foundation
- Css Wizardry Grids
- Profound
- Dead Simple Grid
- Responsive Grid System
- The Semantic Grid System
- Skeleton
- Voir les 145 résultats suivants
Les caractéristiques
Les dimensions
Les paramètres
Les fondamentals
- Le nombre de colonnes
- La valeur de la gouttière
Les optionnels
- La largeur maximale
- La largeur des colonnes
- Un padding sur les blocs
Les points d'arrêt
| Name | Screen Size | Row Width | Column Count |
|---|---|---|---|
xs |
smaller than 500px | 300px | 3 |
sm |
smaller than 740px | 480px | 3 |
md |
740px to 980px | 720px | 6 |
lg |
980px to 1220px | 960px | 12 |
xl |
larger than 1220px | 1200px | 12 |
2 manières de procéder
La méthode traditionnelle
La grille précalculée
Le principe consiste à appeler un fichier CSS contenant des classes auxquelles correspondent des dimensions des différentes colonnes.
Puis à baliser les fichiers de templates afin de structurer les affichages.
La méthode geeko-bobo
La grille générée
Dans ce cas, on compose d'abord les fichiers de templating selon nos préférences, en nommant les éléments conteneurs à notre convenance.
Puis, on génére les styles de structure pour positionner les éléments grâce à des fonctions fournies par des préprocesseurs.
La stratégie
Analyser votre chaîne de production
Votre grille doit répondre à un besoin. Elle doit permettre de mettre en page les éléments selon ce qui a été défini durant la phase de conception. Elle doit correspondre à des objectifs de production.
Les grand acteurs
Elle permet de composer des pages rapidement. Elles sont très pratiques pour le prototypage rapide et/ou les équipes avec une faible culture web. Elles sont souvent grand public couvrent un grand nombre de cas, mais ne permettent pas de réaliser des choses plus adaptées.
Exemples
Les grilles spécifiques
Ce sont souvent des librairies pour préprocesseurs, elles recouvrent un très grand nombre de cas et peuvent être substituées aux grilles des différents Frameworks.
Exemples
Les grilles maisons
La grille maison permet de disposer du strict nécessaire pour la mise en page voulue. Il peut permettre de minimiser le volume de code mais peut aussi limiter la maintenance par d'autres développeurs.
Exemple
- Rin
La conception fine
Sans maîtrise la puissance n'est rien
Votre grille doit à un contexte et à votre niveau de maîtrise. Pour des sites de contenu, les informations se doivent toujours être le plus lisible possible en évitant les débordements, recouvrements ou disparitions. Pour un site plus applicatif, la mise en page doit privilégier la rapidité d'analyse et d'action, le positionnement peut se révéler plus délicat ; il faut donc avoir une véritable maîtrise de sa grille.