24SSgrid

Les grilles CSS

Les grilles sont à l’origine un principe utilisé en imprimerie, permettant d’harmoniser l’agencement des blocs de texte et des images sur une page. Il est tout à fait possible de transposer ce principe dans le domaine du web, et c’est ce que beaucoup d’équipes font. Voici quelques avantages de ces grilles :

• avoir des pages bien organisées (alignement, espacement…)
• simplifier et accélérer l’intégration
• faciliter la mise en place d’une page responsive

En contrepartie, vous perdez quelques possibilités en terme de mise en page, mais il est tout à fait possible de passer outre la grille dans certains cas particuliers.

24SSgrid

C’est assez naturellement que j’ai créé mon propre système de grille CSS. Les raisons sont multiples et pas forcément valables, disons que le projet était intéressant. Utilisant aujourd’hui SASS sur tous mes projets perso ou pro, j’avais la possibilité de mettre en place une grille simplement, que je puisse adapter au besoins de ces différents projets. Voici comment est né 24SSgrid !

Pourquoi 24 colonnes

Le nombre de colonnes s’est imposé très rapidement, quand on voit les diviseurs des différents choix :

• 12 colonnes : divisible par 1, 2, 3, 4, 6 et 12
• 16 colonnes : divisible par 1, 2, 4, 8 et 16
• 24 colonnes : divisible par 1, 2, 3, 4, 6, 8, 12 et 24

Le choix des 12 colonnes était attirant, mais les 24 colonnes apportent des possibilités supplémentaires sans rien enlever à la simplicité d’utilisation de la grille.

Installation

Vous utilisez SASS ? Rien de plus simple :

• Rendez-vous sur le projet Github pour télécharger la dernière version
• Ajoutez le fichier scss/24SSgrid.scss à votre projet
• Importez le depuis votre ficher SASS principal : @import "24SSgrid";

Vous êtes prêts à utiliser 24SSgrid !

Utilisation

24SSgrid fournit cinq classes :

• .row : à placer sur votre conteneur (permet de limiter à 24 colonnes, et de centrer le tout)
• .col : à placer sur chacune de vos colonnes
• .col-x : à placer sur chacune de vos colonnes, pour définir sa largeur
• .offset-x : permet d’avoir des colonnes vides avant la colonne courante (optionnel)
• .break : permet de forcer une nouvelle ligne (optionnel)

Ci dessous, un example d’utilisation :

<div class="row debug">
  <div class="col col-24 break"></div>
  <div class="col col-4 offset-1">
    <div class="col col-1"></div>
  </div>
  <div class="col col-4 offset-2">
    <div class="col col-1 offset-1"></div>
  </div>
  <div class="col col-4 offset-2">
    <div class="col col-1 offset-2"></div>
  </div>
  <div class="col col-4 offset-2 break">
    <div class="col col-1 offset-3"></div>
  </div>
  <div class="col col-12"></div>
  <div class="col col-12 break"></div>
</div>

Et si les 960px ne me conviennent pas ?

Il n’est pas possible de changer le nombre de colonnes, mais leurs dimensions sont paramétrables. Il est désormais possible de changer le nombre de colonnes, pour utiliser 24SSgrid avec 10 colonnes par exemple (wait… what ?). Vous avez accès à 5 variables :

• $sg-nb-column : définit le nombre de colonnes
• $sg-class-prefix : permet de préfixer les classes utilisées
• $sg-column-width : définit la largeur des colonnes
• $sg-gutter-width : définit la largeur des gouttières (entre les colonnes)
• $sg-margin-width : définit la largeur des marges (autour des lignes)

Par défaut, les largeurs sont fixées à 30px/10px/5px, ce qui donne une largeur totale de 960px (24 * 30 + 23 * 10 + 2 * 5). Voici quelques valeurs possibles avec 24 colonnes :

• 24px/8px/4px, pour une largeur de 768px
• 30px/10px/5px, pour une largeur de 960px
• 29px/12px/10px, pour une largeur de 992px
• 30px/12px/2px, pour une largeur de 1000px
• 33px/14px/13px, pour une largeur de 1140px
• 34px/16px/8px, pour une largeur de 1200px

Vous pouvez facilement calculer ces dimensions à l’aide du site Gridcalculator. J vous déconseille Gridulator qui, bien qu’utile, ne gère pas les marges extérieures, et peut vous proposer une gouttière de 0px.

Les autres grilles existantes

• 960 Grid System : 12 ou 16 colonnes, 960px de large
• Fluid 960 Grid System : 12 ou 16 colonnes, fluide
• 1140px : 12 ou 16 colonnes, 1140px de large
• Responsive Grid System : 12, 16 ou 24 colonnes, responsive

Liens

24SSgrid Le projet Github Gridcalculator Gridulator