Bulma est un framework CSS assez complet, avec une nomenclature commode et de nombreux composants. Il est purement CSS et ne comporte donc pas d'éléments javascript. Il a un style par défaut proche de Bootstrap. Le layout utilise la flexbox avec les classes nécessaires pour bâtir un site responsive. Il est utilisé pour le thème des tutoriaux fournis avec Automad.

Démarrer avec Bulma

Lundi 7 janvier 2019

Pourquoi un framework CSS ?

Si je ne vois pas d'inconvénient à en utiliser un, je ne vois pas trop de raisons de s'en passer. Que nous offre-t-il ?

  • une cohérence de style sur tous les éléments d'un site dés lors qu'on applique ses classes on parvient très facilement à des pages harmonieuses
  • une bonne compatibilité avec tous les navigateurs, sans effort
  • des aides à la mise en oœuvre du responsive design
  • des composants qui rendent simple la réalisation d'objets courants, avec une bonne base esthétique : formulaires, cartes médias, hors-texte, étiquettes, menus, autres éléments de navigation, bannières…

Ce qui est parfois reproché aux frameworks CSS c'est qu'à utiliser leur style par défaut on finit par faire des sites qui se ressemblent trop. On peut voir ça aussi comme un avantage. Le framework fournit une base solide qu'il convient ensuite de personnaliser.

Un framework pure CSS, ça suffit pour mon site ?

Si le site est avant tout documentaire et non applicatif, ça peut répondre tout à fait au besoin. Quand on souhaite avoir un site plus dynamique côté client, l'absence de composants javascript peut être alors un problème. Ce sera le cas :

  • pour un site applicatif, site de commerce par exemple
  • si on souhaite évoluer vers le matériel design, pour un site graphiquement dynamique

Les solutions populaires et efficaces pour intégrer aussi le javascript sont nombreuses comme Bootstrap ou Foundation, et plus particulièrement pour le material design on peut faire appel à Material design lite (de Google quile met en oeuvre sur Android), Angular Material ou Materialize.

Ensuite, puisque le but du framework CSS est de gagner en temps et cohérence; on doit logiquement l'utiliser avec des techniques comme LESS ou Sass. Ces langages apportent aux feuilles de style ce qui manque, à savoir des méthodes permettant de définir des variables par exemple.ceci permet de modifier simplement une couleur pour l'ensemble d'un site, sans devoir le faire pour chacune des règles CSS qui l'utilise. Et ces variables ne sont que l'apport le plus basique de ces technologies. Un point particulièrement important est aussi l'application automatique de préfixes pour les propriétés CSS dont l'implantation est encore différente d'un navigateur à un autre.

En résumé; LESS et Sass, ce sont des langages qui s'ajoutent à la syntaxe CSS, et un préprocesseur qui va transformer ces ajouts en CSS standards. Ce sont ces feuilles CSS générées par le préprocesseur qu'on va mettre en ligne sur le site.

Quand on débute Sass est plus facile à utiliser, car avec une installation simple, on peut disposer de toutes les fonctionnalités, sans devoir rechercher, sélectionner et installer diverses extensions.

En pratique, comment mettre en place tout ça ?

Il y a toujours plusieurs façons de procéder, je me contente à celle qui m'a semblé la plus commode ce qui ne veut pas dire que j'ai trouvé la meilleure même pour mon cas personnel ;-)

Bulma

La page officielle de Bulma donne le lien de téléchargement et l'aacès à l'ensemble de la documentation. Quand on décompresse l'archive on trouve essentiellement un dossier CSS et un dossier SASS.

Si on veut simplement utiliser le style par défaut de Bulma sans le modifier, il suffit de lier la feuille de style bulma.min.css à ses pages web, puis de faire appel à la documentation pour l'utiliser.

Sass

Pour être compilé, Sass utilise Ruby qui doit donc être présent sur le poste de travail. Sur Mac c'est déjà le cas d'emblée, on peut donc installer simplement le préprocessur. Sur Mac, Linux ou Windows on peut installer Koala qui facilite la configuration et la compilation pour Sass ou LESS parmi d'autres.

Automad, Bulma et Koala

Je me suis efforcé ici de pouvoir utiliser facilement les variables déjà existantes dans Bulma, y ajouter les miennes en leur donnant la priorité, et bien classer mes apports pour faciliter la maintenance. Je suis parti sur le principe d'utiliser la feuille de style complète de Bulma tel qu'elle est et d'ajoter plusieurs feuilles de styles personnelles (typo, layout, etc.) Ensuite, dans les modèles j'utilise les règles de Bulma et j'ajoute ensuite les miennes pour affiner le rendu graphique.

  1. j'installe Koala
  2. je télécharge et décompresse Bulma
  3. je télécharge et décompresse Automad (si ce n'est déjà fait)
  4. dans le dossier packages d'Automad je place le dossier de mon thème perso (voir aussi Démarrer avec Automad)
  5. dans ce dossier créer un dossier css et un dossier sass
  6. dans le dossier sass, je place mes feuilles de styles persos (extensions .sass), un fichier de variables persos (_custom-variables.sass) et le fichier des variables de Bulma (_initial-variables.sass). Le premier sert à stocker mes variables utilisées dans les autres fichiers sass, le deuxième à disposer des variables Bulma; par exemple les break points pour des créer des règles responsive.
  7. quand un fichier sass a un nom qui commence par un underscore, il n'est pas compilé mais il peut être appelé pour compiler un autre fichier.
  8. je crée un premier fichier sass, ses deux premières lignes seront @import custom-variables @import initial-variables
  9. dans Koala, j'ajoute le projet, c'est-à-dire le dossier sass sur lequel je travaille
  10. je règle les préférences du projet de façon à ce que les fichiers sass soiet compilés dans le dossier css de mon thème
  11. j'active la compilation automatique ainsi que Autoprefix
  12. avec la première règle écrite, je sauvagarde et vérifie que tout marche bien

Les deux premières lignes de mes fichiers sass :

@import custom-variables
@import initial-variables

Les préférences de Koala (exemple)

// Default project settings, you can edit it and set custom settings.
{
    // The mappings of source directory and output directory
    "mappings": [
         {
            "src": "/Applications/XAMPP/xamppfiles/htdocs/mad/packages/chantier/sass",
            "dest": "/Applications/XAMPP/xamppfiles/htdocs/mad/packages/chantier/css"
         }
    ],

    // Add the ignore rules that Koala will not search them.
    // e.g. ["*.json", "*.txt", "test", "path/libs"]
    "ignores": [],

    // Options of Compilers.
    "options": {
        // "key": "val",
        // "key2": "val2"
        // ...
    },

    // An array of filesystem paths which should be searched for js/LESS/Sass templates imported with the @import/@append/@prepend directive.
    "includePaths": []
}