MiddleMan : design avec Slim et SCSS

publié en mars 2014

Dans l'article précédent, "Créer un blog statique avec MiddleMan", nous avons vu comment mettre en place les bases d'un blog statique avec MiddleMan. Aujourd'hui, nous allons voir comment adapter ce MiddleMan à nos besoins, avec l'utilisation de votre langage de template préféré et SASS/SCSS.

Les templates comme vous aimez

Par défaut, et comme bon nombre de frameworks web en Ruby, MiddleMan vous propose de rédiger vos templates au langage ERB. Bien qu'intéressant, je préfère personnellement un autre moteur de template à la syntaxe plus épurée, à savoir Slim. C'est celui que j'utilise pour tous mes projets Sinatra notamment, et j'aimerais pouvoir l'utiliser pour ce blog également. Rien de plus facile !

Slim comme langage de template

MiddleMan implémente en effet Tilt, une interface qui lui permet d'accepter tous les moteurs de template compatibles, parmi lesquels on peut citer erb, haml ou slim. C'est justement lui qui nous intéresse.

Installer Slim

Avant toute chose, on rajoute la gem Slim dans le Gemfile :

1

gem "slim"

Puis comme d'habitude, on lance la commande $ bundle dans un terminal, et… c'est tout, on peut utiliser Slim !

Traduire nos templates

Comme nous avons déjà généré notre projet précédemment, les templates ont déjà été créés au format ERB et il est donc nécessaire de les convertir en Slim. C'est heureusement assez rapide à faire, voici la marche à suivre :

  1. Changer l'extension des templates de .erb à .slim,
  2. Réécrire le code (principalement, supprimer le chevron entrant des balles, supprimer les balises fermantes et adapter l'indentation).

Syntaxe: ERB vs Slim

Un exemple de template au format ERB…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine or request Chrome Frame -->
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

    <!-- Use title if it's in the page YAML frontmatter -->
    <title><%= current_page.data.title || "The Middleman" %></title>

    <%= stylesheet_link_tag "normalize", "all" %>
    <%= javascript_include_tag  "all" %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Et ce même template traduit en Slim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

doctype 5
html
  head
    meta charset="utf-8"

    / Always force latest IE rendering engine or request Chrome Frame
    meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"

    / Use title if it's in the page YAML frontmatter
    title = current_page.data.title || "The Middleman"

    = stylesheet_link_tag "normalize", "all"
    = javascript_include_tag  "all"

  body
    = yield

Helpers

MiddleMan fournit toute une liste de helpers destinés à vous simplifier la vie. Ceux-ci sont empruntés à Padrino, un framework web qui se place entre le minimaliste Sinatra et le all-inclusive Rails. Si vous avez déjà utilisé Padrino ou Rails, alors vous ne devriez pas être déstabilisé.

Parmi les principaux notables :

  • link_to {texte} {url du lien} pour créer un lien,
  • image_tag {image} pour insérer une image,
  • stylesheet_tag {stylesheet} pour insérer une feuille de style,
  • javascript_include_tag {script} pour insérer un script,
  • escape_html() et son alias h() pour échapper les caractères d'une chaîne,
  • truncate({texte}, :length => n) pour renvoyer les n premiers caractères d'une chaîne, et truncate_words({texte}, :length => n) pour obtenir les n premiers mots d'une chaîne.

À noter aussi que MiddleMan propose des helpers pour vous faciliter le prototypage et la création de "dummy content". Même s'il vaut mieux en général mieux utiliser un contenu pertinent et en rapport avec votre projet, ce type de helpers peut vous faciliter la vie dans les premières heures de vie de votre projet :

  • lorem.words 5, lorem.paragraph, lorem.paragraphs 10, pour créer du contenu basé sur le fameux Lorem Ipsum,
  • lorem.date, lorem.name, lorem.first_name, lorem.last_name, lorem.email
  • De même, si vous avez besoin d'images, vous pouvez avoir facilement recours au très bon service placehold.it via les helpers lorem.image. Plus d'informations sur la documentation MiddleMan.

SASS/SCSS : un blog qui a du style

Définir la structure de vos pages, c'est bien, mais par défaut, aucun style n'est appliqué, et il faut bien avouer qu'on est loin du design de vos rêves è

Mais vous avez de la chance : en effet, MiddleMan intègre par défaut le préprocesseur de feuilles de style SASS/SCSS. Vous n'avez donc rien à faire pour profiter de la puissance de ce superbe outil qui vous apporte entre autres variables, styles imbriqués et mixins.

Vos feuilles de style sont situées dans le répertoire source/stylesheets/ par défaut. Pour ma part, j'aime bien que les répertoires contenant mes scripts, feuilles de styles et images soient tous regroupés au sein d'un même répertoire parent, afin d'éviter de polluer la racine du répertoire source. Pour ce faire, il faut éditer le fichier config.rb à la racine du projet, avec les directives suivantes :

1
2
3

set :css_dir,     'public/stylesheets'
set :js_dir,      'public/javascripts'
set :images_dir,  'public/images'

Désormais, lorsque vous lancerez un serveur de test avec la commande middleman server déjà vue précédemment, vos feuilles de styles seront recompilées à la volée lors de chaque modification.

Désormais, vous savez donc créer un nouveau projet MiddleMan, écrire des articles, modifier les structures de vos pages et éditer le code CSS pour la mise en page ! À vous de jouer !