Bien démarrer avec le framework CSS Sparkl

Je vous avez présenté une traduction pour bien démarrer avec le framework Blueprint CSS. Aujourd’hui nous allons découvrir Sparkl et voir rapidement comment construire un petit template.

Installation

Tout d’abord vous devez vous procurer la dernière version de Sparkl. Dans cet article nous utiliserons la version 0.4 datant d’avril téléchargeable sur la page du projet.

Une fois l’archive décompressée 3 dossiers vont attirer notre regard :

• images : ce dossier servira pour inclure les images de votre site (et non du thème)
• javascripts : contient un fichier javascript pour régler votre page (notemment sous ie)
• stylesheets : contient toutes les définitions pour la mise en page

Regardons plus en détail le dernier dossier.

• stylesheets/core.css : ceci est la base de Sparkl ce fichier incorpore toutes les feuilles de styles dont nous avons besoin. Pour supprimer l’application d’un style sur un groupe d’éléments, il nous suffit de supprimer la ligne correspondante. C’est aussi dans ce fichier que nous pouvons ajouter notre propre feuille de style.
• stylesheets/modules/advanced-layout.css : Ce module nous permets de créer des mises en pages avec 1, 2 ou 3 conteneurs en changeant simplement le nom d’une classe. Par exemple si vous voulez une mise en page sur 3 colonnes, avec le second conteneur en premier, le premier ensuite puis le troisième il faudra utiliser la classe ’spt’ (secondary, primary et tertiary ou second, premier et troisième).
• stylesheets/modules/code.css : ajoute un code pré-formaté en usant une police ‘monospaced’ et un background plus foncé pour donner à votre code un aspect terminal.
• stylesheets/modules/grid-layout.css : permet de créer une mise en page basée sur des grilles en séparant le conteneur en 2, 3, 4, 5 ,6 ou 8 colonnes. L’espace entre les colonnes peut être ajusté.
• stylesheets/modules/ie-only.css : contient des hacks pour ie.
• stylesheets/modules/image-replacement.css : ce fichier est donné à titre d’exemple, il vous montre comment remplacer un texte dans une balise h1, par une image.
• stylesheets/modules/images.css : permet d’ajuster la taille d’une image par rapport à un conteneur.
• stylesheets/modules/links.css : régle les propriétés des liens.
• stylesheets/modules/reset.css : fait un reset du navigateur qui lira la page pour partir sur les mêmes bases.
• stylesheets/modules/tables.css : présentation des tables.
• stylesheets/modules/tabs.css : permet de transformer une liste en un menu en ajoutant une classe.
• stylesheets/modules/test.css : est vide, c’est juste un test. Peu être le fichier où vous effectuerez vos tests avant de les inclurent dans une feuille de style.
• stylesheets/modules/typography.css : définit le style de base pour le texte.
• stylesheets/modules/vertical-tabs.css : permet de créer un menu vertical.

Nous avons pleins de fichiers dont il est important de connaître les fonctions, si nous ne voulons pas surcharger notre feuille de style, le meilleur moyen pour comprendre comment fonctionne Sparkl est encore une fois de regarder dans les sources.

Pour initialiser Sparkl, il suffit de placer le code suivant entre les balises ouvrante et fermante ‘head’.

<link rel="stylesheet" href="stylesheets/core.css" type="text/css" media="screen, projection">
<!--[if IE]>
<style type="text/css">
@import url("stylesheets/modules/ie-only.css");
</style>
<![endif]-->

Attention Sparkl est livré avec un thème par défaut (Vanilla), dont les paramètres ne sont pas forcément ceux que nous voulons.

Quelques exemples

Commençons par définir un conteneur :

<div class="page">
    <p>Hello Sparkl World!</p>
</div>

Puis nos trois conteneurs principaux.

<div id="page">
  <div id="content">

    <div id="primaryContent">
    Conteneur 1
    </div>

    <div id="secondaryContent">
    Conteneur 2
    </div>

    <div id="tertiaryContent">
    Conteneur 3
    </div>

  </div>
</div>

Si comme moi, vous avez gardé le fichier core.css intact, vous devriez voir dans votre navigateur nos trois phrases sur un fond gris. Enlevons la ligne correspondante à l’importation de la feuille de style pour vanilla et voyons le résultat (ainsi que image-replacement.css, tabs.css et vertical-tabs.css).

Ajoutons maintenant deux grilles dans le conteneur numéro 2.

<div id="secondaryContent">
     <div class="two-col grid">

       <div>
       <p>Le contenu de notre première colonne</p>
       </div>

       <div>
       <p>Le contenu de notre deuxième colonne</p>
       </div>

      </div>
 </div>

Sur notre balise contenant l’identifiant ‘content’, essayez d’ajouter les combinaisons suivantes : class=”x” ou x sera tps, spt, pts, sppp t, ssp, sppt… Vous trouverez plus d’exemple en lisant le fichier ‘advanced-layout.css’.

Enfin n’hésitez pas à consulter le wiki si vous avez des questions ou les poser directement ici.