Tutoriel Sass – Créer une grille en Sass avec Neat 2.0

Je vais vous présenter le framework Neat 2.0. Neat est un framework développé par l’agence Thoughtbot qui permet de créer des grilles par l’intermédiaire de mixins. Dans cette version, Neat utilise la propriété calc pour effectuer les calculs des colonnes. Sachez que cette prorpiété n’est pas gérée par tous les navigateurs alors je vous conseille d’aller voir le site can i use pour voir s’il est intéréssant ou non pour vos projets d’utiliser Neat .

Voir une demo

Installation

Neat est dépendant de Bourbon et pour cela nous devons installer Bourbon avant d’installer Neat.

gem install bourbon
gem install neat

Puis dans votre projet, installez Bourbon et Neat avec les commandes suivantes :

bourbon install
neat install

Vous allez avoir deux nouveaux dossiers dans votre projet, le dossier bourbon et le dossier neat, vous devez ensuite les importer dans votre fichier Sass.

@import "bourbon/bourbon"; 
@import "neat/neat"; 

Avant de commencer

Vous devez savoir avant de commencer que Neat propose des variables qu’on peut overrider et qui permet de configurer votre grille, sachez que Neat à été pensé mobile-first , c’est à dire qu’on commence par développer à partir du mobile vers l’ordinateur. Lorsque vous allez créer votre grille, gardez en tête la configuration que vous allez faire s’appliquera en premier pour les mobiles puis pour les tablettes et enfin pour les ordinateurs. $neat-grid ne peut pas être changé à partir d’une média query, c’est une variable de configuration globale. Toutefois, il existe la mixin grid-media permettant de créer une media query et de changer le nombre de colonnes globales, nous verrons ça plus tard dans le tutoriel.

$neat-grid: (
  columns: 12,
  gutter: 20px,
);

Container

Une fois que c’est fait, vous pouvez commencer à programmer votre grille, l’avantage de Neat c’est de ne pas être dépendant d’une structure fixe comme pour bootstrap ou foundation avec des classes prédéfinies comme .container ou .col-ms-6.

grid-container

Pour créer votre premier container, vous devez ajouter à votre élément le mixin grid-container :

.container {
  @include grid-container();
}

grid-container va générer un clearfix sur votre élément, à l’heure où j’écris ces lignes, lorsque vous serez sur la version ordinateur, je vous conseille d’ajouter la taille maximale de votre container sauf si vous êtes sur un contenu fluide ( collé à l’écran ). Pour cela on va créer une variable qui va contenir toute la configuration de notre grille en mode ordinateur, cette variable sera réutilisée plusieurs fois, on l’utlisera avec la mixin grid-media.

$media-desktop-neat-grid: (
    columns: 12,
    gutter: 20px,
    media: 1080px
);

.container {
  @include grid-container();
  @include grid-media($media-desktop-neat-grid) {
            max-width: 1080px;
            margin: 0px auto;
    }
}

grid-collapse

Peut être voudrez-vous retirer les gouttières à gauche et à droite de votre container pour qu’elles soient collées à votre écran. Pour cela, il existe la mixin grid-collapse qui se charge de retirer les gouttières.

.container {
  float: left;
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
}

.container {
    @include grid-container();
    @include grid-media($media-desktop-neat-grid) {
            @include grid-collapse;
            max-width: 1080px;
            margin: 0px auto;
    }
}

Colonnes

Maintenant que vous avez un container, on va se concentrer sur les colonnes, gardez en tête que tant que vous ne lui indiquez pas le contraire, vos colonnes feront toujours référence à $neat-grid, par défaut $neat-grid s’affiche en 12 colonnes avec 20px pour les gouttières.
Je vous conseille de toujours garder le nombre de colonnes à 12, même avec les grid-media car sinon cela va être une source de problèmes pour vous.

grid-column

Vous pouvez gérer les colonnes avec la mixin grid-column. L’avantage, comme je l’ai dit pour Neat, c’est de pouvoir réaliser une grille directement sur nos balises sans passer par des classes. Vous pouvez structurer votre site sans passer par des classes, vous gagnez en liberté et vous pouvez créer n’importe quelle grille selon vos besoins.

$max-columns: 12;
$max-desktop: 1080px;

$neat-grid: (
    columns: $max-columns,
    gutter: 20px
);

$media-tablet-neat-grid: (
    columns: $max-columns,
    gutter: 20px,
    media: 750px
);

$media-desktop-neat-grid: (
    columns: $max-columns,
    gutter: 30px,
    media: $max-desktop
);

.container {

  @include grid-container();
  @include grid-visual();

  @include grid-media($media-desktop-neat-grid) {

    @include grid-collapse;
    max-width: $max-desktop;
    margin: 0px auto;

  }

}

article, aside {
  @include grid-column(12);
  background-color: rgba(0, 0, 0, 0.1);
}

aside {
  text-align: center;
}

@include grid-media($media-tablet-neat-grid) {
  article { @include grid-column(6); }
  aside { @include grid-column(6); }
}

@include grid-media($media-desktop-neat-grid) {
  article { @include grid-column(8); }
  aside { @include grid-column(4); }
}

Voir une demo

Astuce

Vous pouvez afficher la grille avec la mixin grid-visual qui affichera les colonnes. N’hésitez pas à jeter un oeil sur la documentation de Neat 2.0. Je n’en ai pas parlé dans mon article mais il y a d’autres mixins comme grid-shiftou grid-pushqui vous permettent de pousser vos colonnes comme dans Bootstrap ou Foundation.

···