Table des matières
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.
Des variables peuvent évidement être utilisées dans les scripts SASS :
!background_color = #eee #header background_color= !background_color
La substitution fonctionne :
#header { background-color: #eeeeee; }
Il est tout à fait possible de faire des opérations sur ces variables. Pour le mettre en évidence ajoutons la couleur ' dark_background_color ' que l'on applique aux liens.
!background_color = #eee !dark_background_color = !background_color - #222 #header background-color= !background_color #links background-color= !dark_background_color float: right
qui une fois transformé en CSS devient:
#header { background-color: #eeeeee; } #header #links { background-color: #cccccc; float: right; }
ou encore un arrondi :
round(!width / 2)
Ils s'apparentent à des fonctions utilisables dans les scripts SASS. Ils débutent par le signe ' = '
=bordered border: 2px solid #777
Le signe ' + ' permet ensuite d'utiliser la "fonction" 'bordered':
... #links +bordered ...
le résultat :
#header #links { border: 2px solid #777; background-color: #cccccc; float: right; }
Nous pouvons aussi passer des arguments à nos mixins, par exemple pour forcer une valeur par défaut de l'épaisseur du bord du "mixin" 'bordered':
=bordered(!width = 2px) border: !width solid #777
Si une variable est affectée à un mixin elle surchargera la variable par défaut:
#content + bordered(5px)
Pour illustrer le principe, les variables et le mixin bordered
seront regroupées dans un fichier SASS nommé
'
_base.sass
'. Tous les fichiers débutant par
'
_
' ne seront pas pris en compte lors
de la génération du CSS. Il n'y aura donc pas de fichier
'
_base.css
' de créé. Indispensable aux fichiers
d'import.
!background_color = #eee !dark_background_color = !background_color - #222 =bordered border: 2px solid #777
Et on importe le fichier '_base.sass' dans 'intro.sass'
@import base.sass #header ...
Pour en savoir plus, voir les liens suivants :
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
Commentaires: