Introduction à Bootstrap Sass

b-sass

Dans le monde du web, deux frameworks sont particulièrement célèbres pour faire l'intégration des sites responsives : Bootstrap de Twitter et Foundation de Zurb. Ils intègrent déjà quelques composants et des plugins JavaScripts basés sur jQuery, prêts à l'emploi.

Dans notre article, nous nous intéressons surtout au premier :  Bootstrap de Twitter. Selon moi, c'est le plus facile à prendre en main et à installer. D'ailleurs, vous pouvez consulter respectivement leurs sites pour le constater.

Pourquoi "Sass" ?

Au commencement, le Framework utilise déjà un préprocesseur CSS dont LESS. Même s' il remplit bien son rôle, son principal inconvénient est l'utilisation d'un compilateur JavaScript. C’est-à-dire que la compilation s'effectue pendant le chargement de la page à afficher, sur la machine du client.Ce système pourrait pénaliser le temps d'affichage de la page. C 'est pour cette raison que certains développeurs sont réticents à son utilisation.

Au fil du temps, une version Sass est apparue et est devenue officielle. Contrairement à LESS, Sass fait la compilation pendant le développement de la page, sur la machine du développeur, ainsi, le livrable est un fichier CSS.

Installations

Avant de pouvoir utiliser Sass, il faut d'abord installer Ruby et Compass (recommandé) sur la machine de développement. Ensuite, sur la page Github du projet (https://github.com/twbs/bootstrap-sass), il existe plusieurs méthodes d'installation selon l'environnement de travail, mais nous allons nous intéresser seulement aux 2 méthodes suivantes car ce sont les plus couramment utilisées pour faire de l’intégration de site Web :

1. Compass sans Rails

Cette méthode permet d'installer le framework dans le système de la machine du développeur une bonne fois pour toute. Ainsi  à chaque projet, il suffit juste de faire l'import des librairies :

Installation : 

$ gem install bootstrap-sass

Création de projet en utilisant Compass :

$ compass create my-new-project -r bootstrap-sass --using bootstrap

Cela crée les 2 fichiers suivants : styles.sass, le fichier sass principal du projet et _bootstrap-variables.sass contenant les variables bootstrap que l'on peut surcharger.

2. Avec Bower

Contrairement à la première, cette méthode installe les packages de bootstrap Sass dans le répertoire du projet. Il faut noter que Bower nécessite la présence de NodeJs sur la machine. Pour faire l'installation, il faut rentrer dans le répertoire du projet et faire la commande suivante :

$ bower install bootstrap-sass

Ainsi à chaque projet, il faut toujours faire cette commande.

Configuration

En premier lieu, il faut être sur que la ligne suivante est présente en haut du fichier config.rb qui se trouve à la racine du projet :

require 'bootstrap-sass'

Ensuite, dans le fichier styles.scss, il faut rajouter les lignes :

// Import Bootstrap Compass integration 
@import "bootstrap-compass"; 

// Import custom Bootstrap variables 
@import "bootstrap-variables"; 

// Import Bootstrap for Sass 
@import "bootstrap"; 

// Import Compass 
@import "compass";

Il est recommandé de respecter cet ordre d'importation.

Enfin, il faut modifier les variables dans bootstrap-variables.scss pour qu'elles correspondent aux données de la charte graphique proposée. Ci-dessous celles qu'il faut toujours modifier le plus souvent :

  • $font-family-sans-serif : C'est la famille de la police par défaut utilisée dans le site.
  • $font-size-base: La taille de la police par défaut ( 14px ou 16px).
  • $grid-columns : Nombre de colonnes dans la grille, 12 par défaut
  • $grid-gutter-width : La largeur de la gouttière ( espacement vertical entre 2 blocs côte à côte )
  • $container-* : Largeur du contenu selon la largeur de l'écran.

Avantages

Voici quelques avantages de l'utilisation de ce framework Sass :

1 - Facilement paramétrable :

Toutes les personnalisations sont à portée de main. Auparavant, pour le faire, il faut modifier/activer/désactiver les paramètres sur la page  http://getbootstrap.com/customize/ et ensuite, le télécharger. Il faut faire cette manipulation à chaque nouvelle personnalisation.  Par contre, en mode Sass, il faut juste modifier le fichier  _bootstrap-variables.scss pour la personnalisation des dimensions et couleurs des composants et importer dans style.scss les composants nécessaires au projet comme indiqué sur le lien http://beneb.info/2015/01/taming-the-beast-optimising-bootstrap-3/ ( CF méthode 1 ).

2 - Mixins disponibles :

La version Sass intègre avec elle plusieurs mixins ( fonctions réutilisables ) dont les plus intéressants sont :

@mixin make-row($gutter: $grid-gutter-width) : Il permet de styliser un élément conteneur d'une série de colonnes avec une valeur de gouttière particulière, souvent différente de celle par défaut définie dans  bootstrap-variables.scss.

@mixin make-*-column($columns, $gutter: $grid-gutter-width) : C'est le mixin qui permet de styliser la largeur des colonnes. Il est surtout utile quand il s'agit de créer par exemple un bloc contenant des colonnes dont le nombre n'est pas un diviseur de celui défini dans la grille. Par exemple, pour avoir un conteneur de 5 colonnes dans une grille de 12, il faut écrire :

mycontainer { 
  @include make-row(); 
    .mycolumn { 
      @include make-md-column (2.4);  // 2.4 = 12 / 5 
    } 
  }
}

Une autre utilité aussi, c 'est quand il s'agit de définir la largeur des colonnes selon la classe parente indépendamment de la largeur de l'écran, par exemple :

// prend toute la largeur du bloc en mode liste 
.list .mycolumn { 
    @include make-md-column (12);  
}

// prend 25% de la largeur en mode tuile 
.thumbs .mycolumn { 
    @include make-md-column (3);   
} 

Il y a probablement d'autres avantages mais ceux que je vous ai cités en sont les principaux.

Conclusion

En conclusion, si vous voulez utiliser un Framework CSS pour développer un site responsive, je vous recommande d'adopter Bootstrap car il est plus facile à prendre en main, et surtout prendre cette version Sass pour plus de souplesse.

Qu'attendez-vous ? A vos éditeurs !

3 commentaires

  1. Bonjour,

    Pour informations complémentaires sur LESS on peut aussi utiliser les outils de Build Front End tels que Grunt ou Gulp ce qui nous évite comme vous l’avez mentionné d’avoir recours au fameux fichier Javascript. Sinon sans utiliser Grunt ou Gulp, on peut également installer un compilateur Less globalement sur sa machine via NodeJS et lancer la commande lessc styles.less > styles.css pour compiler less en css. Donc tout ceci pour dire qu’on peut travailler aussi localement avec LESS en développement et compiler le tout en css en mode production. LESS et SASS sont proches syntaxiquement mais Sass est plus tendance aujourd’hui voir comparatif : https://www.keycdn.com/blog/sass-vs-less/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *