Catapulse

Compass est un formidable outil d'aide à la conception de feuilles de style. Fini les grosses migraines à peaufiner des feuilles de styles, à les rendre compatibles avec tous les navigateurs, à leurs donner une certaine apparence, un semblant de cohérence. Compass à été créé pour y pallier, il s'agit d'une nouvelle manière de générer et gérer les feuilles de styles. "Simple à implémenter et facile à maintenir"

Compass est basé sur le méta language SASS pour la génération du code CSS. Pour ne rien gacher il peut travailler en "frontal" de frameworks CSS ( Blueprint , YUI , 960.gs ) et propose quelques plugins ( 960.gs, Drupal, Elastic , ...)

Compass est un package gem écrit en Ruby (que je ne pratique pas). Toutes les dépendances seront installées avec rubygem.

# Installation des dépendances
apt-get install rubygems1.8

# Installation de Compass
$ gem sources --add http://gems.github.com/
$ gem install chriseppstein-compass
$ gem install yard
$ gem install maruku

La dépendance ' haml-2.2.2 ' est aussi installée lors de l'installation de chriseppstein-compass-0.8.8 .

$ gem list --local
*** LOCAL GEMS ***

chriseppstein-compass (0.8.8)
haml (2.2.2)
maruku (0.6.0)
syntax (1.0.0)
yard (0.2.3.3)

Le principe est le suivant :

export PATH=$PATH:/var/lib/gems/1.8/bin/
cd /tmp
compass -f blueprint MonProjet

# Editer les fichiers SASS dans le répertoire 'src'

# Update compass
compass -u

# Utiliser les CSS du répertoire 'stylesheets'

La suite de ce document est un résumé de ce screencast . Fort bien foutu mais malheureusement en anglais, qui n'est pas bien mon fort alors pardonnez les éventuelles erreurs ou imprécisions. Commençons par nous créer un espace de travail :

mkdir monprojet
cd monprojet
mkdir src stylesheets images

Lançons Compass en mode BigBrother, il vérifiera toutes modifications apportées à l'un des fichiers SASS du répertoire ' src ' et génèrera les css résultantes dans le répertoire ' stylesheets '.

compass --watch

Commençons par créer le fichier ' src/intro.sass ' contenant uniquement :

#header
  background-color: white

Compass voit apparaitre ce fichier et génère immédiatement le fichier ' stylesheets/intro.css ' suivant:

#header { background-color: white; }

En modifiant le fichier sass comme suit:

#header
  background-color: white
  #links
    float: right

Il nous retourne :

#header { background-color: white; }
#header #links { float: right; }

Rien de bien sorcier dans tout ça. Pour vraiment profiter de compass il nous faut connaitre quelques rudiments de SASS.

SASS est un pseudo language basé sur HAML pour produire le CSS. Les bases sont très succintement décritent dans ce chapitre.

!background_color = #eee

#header
  background_color= !background_color

#header { background-color: #eeeeee; }

!background_color = #eee
!dark_background_color = !background_color - #222
#header
  background-color= !background_color
  #links
    background-color= !dark_background_color
    float: right

#header { background-color: #eeeeee; }
#header #links { background-color: #cccccc; float: right; }

round(!width / 2)

=bordered
  border: 2px solid #777

...
  #links
    +bordered
...

#header #links { border: 2px solid #777; background-color: #cccccc; float: right; }

=bordered(!width = 2px)
  border: !width solid #777

#content
  + bordered(5px)

!background_color = #eee
!dark_background_color = !background_color - #222

=bordered
  border: 2px solid #777

@import base.sass
#header
...

Dans ce chapitre nous verrons comment utiliser le framework CSS Blueprint avec Compass.

mkdir /tmp/blueprint
cd /tmp/blueprint
compass -f blueprint .

Modifions le fichier src/screen.sass pour qu'il ne contient que :

@import blueprint/reset.sass
@import blueprint.sass

+blueprint

Tout notre attirail est disponible au travers du mixin +blueprint. Mettons à jour notre CSS en exécutant:

compass -u

Le fichier screen.css généré contient tout le nécessaire pour exploiter Blueprint.

Le fichier src/partials/_base.sass contient toutes les constantes pour configurer le framework Blueprint. On peux ainsi changer la "grille" (le nombre de colonne), la taille ... et plus si affinités.

Testons immédiatement avec le fichier 'sample' de Blueprint:

wget http://www.blueprintcss.org/tests/parts/sample.html
wget http://www.blueprintcss.org/tests/parts/test.jpg

Il nous faut modifier les 'link rel' dans l'entête HTML pour qu'il pointe sur les fichiers situés dans le répertoire 'stylesheets'.

firefox /tmp/blueprint/sample.html &

Hmmmm ??? ce n'est pas exactement le même visuel que http://www.blueprintcss.org/tests/parts/sample.html

En fait cette page HTML utilise des plugins de Blueprint (scaffolding et fancy-type) que l'on va s'empresser d'ajouter au fichier screen.sass qui devient:

@import blueprint/reset.sass
@import blueprint.sass
@import blueprint/modules/scaffolding.sass
@import blueprint/modules/fancy_type.sass

+blueprint
+fancy-type
+blueprint-scaffolding

Suivi d'un p'tit update de Compass:

compass -u

Et là ça va nettement mieux :)

Ca reste encore lourd à maintenir, il est toujours necessaire de modifier le code HTML pour modifier l'apparence du site (notamment les id et classes des balises).

Reprenons avec une simple page contenant un entête, une sidebar, le contenu, et enfin un pied de page.

<body>
      <div id="container">
        <div id="header"> <h1>...HEADER ....</h1></div>
        <div id="sidebar">
                <h1>.... SIDEBAR ...</h1>
        </div>
        <div id="content">
                <h1>.... CONTENT ....</h1>
        </div>

        <div id="footer"> <h1>...FOOTER ....</h1></div>
     </div>

</body>

Modifions le fichier src/screen.sass comme suit:

@import blueprint.sass
@import blueprint/modules/scaffolding.sass
@import compass/reset.sass



+blueprint-typography
+blueprint-scaffolding

#container
  +container

#header, #footer
  +column(15)

#sidebar
  +column(5)

#content
  +column(10, true)

Maintenant on peux voir l'intérêt de la chose, l'ensemble du visuel d'un site Web peut être paramétré dans un simple fichier SASS au moyen de fonctions et modules Compass. Ainsi le 'mixin' column du module grid.sass permet de positionner précisement les contenus.

Voir les différents modules disponibles dans /var/lib/gems/1.8/gems/chriseppstein-compass-0.8.8/frameworks/blueprint/stylesheets/blueprint/modules et /var/lib/gems/1.8/gems/chriseppstein-compass-0.8.8/frameworks/compass/stylesheets/compass/utilities/

Certaines fonctions de ces modules nous facilitent bien les choses. Par exemple le mixin ' horizontal-list ' du module ' compass/utilities ' chargé d'afficher les listes sous forme horizontale et bien plus. Un conseil, fouiller dans ces modules pour y découvrir les possibilités offertes. Prochaine étape, créer un fichier SASS utilisant Blueprint adapté au Wiki Mojomojo ...

Dans ce chapitre, nous créerons rapidement un thème spécifique à MojoMojo.

Nota: J'ai créé un dépot Debian qui fournit tous les packages nécessaires au fonctionnement de MojoMojo (voir http://apt.catapulse.org et installer cpan-libmojomojo-perl )

Installer les sources de MojoMojo:

git clone  git://github.com/marcusramberg/mojomojo.git
cd mojomojo

# Création de la base de donnée SQLite
./script/mojomojo_spawn_db.pl

# Exécution du serveur http écoutant sur le port 3000
./script/mojomojo_server.pl

Ouvrir le navigateur sur l'url http://localhost:3000 et se loguer en admin / admin

Cliquer sur ' Site settings ', nous avons alors le choix parmi 7 thèmes proposés. Les feuilles CSS de derniers sont stockées dans les répertoires root/static/themes/NOM_DU_THEME/ . Les feuilles de styles sont accessibles via l'url http://localhost:3000/static/themes/NOM_DU_THEME/*.css

Le thème se nommera 'catapulse':

mkdir root/static/themes/catapulse

Il suffit alors de recharger la page 'Site settings' pour voir apparaitre le nouveau thème 'catapulse' dans la liste déroulante.

Ok il ne peut être plus minimaliste puisqu'il ne comporte aucune feuille de style. Donc reprenons la mécanique précédente pour y intégrer le couple Compass/Blueprint.

cd root/static/themes/catapulse
compass -f blueprint .

La feuille de style générée par défaut par Compass est /static/themes/catapulse/stylesheets/screen.css mais MojoMojo nécessite une feuille nommée /static/themes/catapulse/theme.css :(

Le répertoire de destination des fichiers CSS créé par Compass doit donc être modifié. Cela se fait dans le fichier config.rb avec la variable ' css_dir ':

css_dir = "."

Il est aussi nécessaire de renommer le fichier SASS pour qu'il créé le fichier ' theme.css ' et de relancer compass

mv src/screen.sass src/theme.sass
compass -u
rm -rf stylesheets/

Avec le plugin Firebug de Firefox on découvre facilement la structure HTML de Mojomojo suivante:

body id="page"

   div id="container" class="container"

       div id="header"
           H1 Titre

       div id="breadcrumbs"
           div class="float-left"
               A HREF ...
           div class="float-right"
       div id="toplinks"
           FORM
               UL
                 LI - A HREF
           UL id="toplinks-for-user"

       div id="pagenav"
           UL
             LI - A HREF

       div id="content"
           div id="current"
               ...
           div id="changes" class="display-none"
               div id="diff"
           div class="byline"

       div id="showtag"
       div id="addtag"
       div id="tags"
       div id="bottomnav"
               UL
                 LI - A HREF
       div id="powered"

Avec ces informations et quelques lignes SASS nous pouvons très simplement peaufiner l'apparence du thème.

Dans un terminal nous lançons Compass en mode surveillance:

compass --watch

Et modifons le fichier src/theme.sass comme nous l'avons vu précédement:

@import blueprint/reset.sass
@import blueprint.sass
@import blueprint/modules/scaffolding.sass
@import blueprint/modules/fancy_type.sass

+blueprint
+fancy-type
+blueprint-scaffolding

J'y ajoute quelques lignes SASS, et voilà en quelques minutes un nouveau style pour MojoMojo :)

@import blueprint/reset.sass
@import blueprint.sass
@import blueprint/modules/scaffolding.sass
@import compass/utilities.sass

+blueprint-typography

=mj-horizontal-list
  +horizontal-list
  border: 0px solid #777
  margin: 3px
  padding: 3px
  font-family: sans-serif
  a
    border: 1px solid #000
    color: #OOO
    -moz-border-radius: 5px
    -webkit-border-radius: 5px
    background-color: #ADD8E6
    text-decoration: none
    padding: 2px

body
  color: #FFFFFF
  background-color: #083e61

#container
  +container
  h1, h2, h3, h4
    color: #FFFF00

#header, #breadcrumbs, #toplinks, #pagenav, #content, #showtag, #tags, #bottomnav, #powered
  +column(24)

#toplinks, #pagenav, #pageoptions, #bottomnav
  +mj-horizontal-list



#header
  h1
    color: #ADD8E6

#breadcrumbs
  a
    color: #0F0