Guideline de Röcssti, exemples d’utilisation

Layout, mise en page

Röcssti offre divers systèmes pour gérer des positionnements usuels. Afin de mieux permettre de visualiser les exemples, des couleurs de fond et/ou des bordures ont été ajoutées au code.

Flottants

Les classes .left et .right permettent de transformer un élément en flottant. La classe .mod permet de créer un « contexte de formatage block », qui permet d’éviter entre autres que les flottants ne débordent de leur conteneur.

<div class="mod"> 
  <div class="left w10"> ici le contenu </div>
  <div class="left w80"> 
    Ici<br />un<br />long<br />contenu<br />je dis
  </div>
</div> 

Ce qui donne :

À noter, les classes .w10 et .w80 permettent de dimensionner les blocs en pourcentages.
Autre exemple, un texte « comme le h2 » qui tient tout en haut à droite :

<div class="h2 right mt0 pt0 ml2">Ici le texte h2 à droite</div>
       
<p>loremipsum toussa machin bidule et loremipsum toussa machin bidule et loremipsum et…</p> 

Ce qui donne :

loremipsum toussa machin bidule et loremipsum toussa machin bidule et loremipsum et…

Table-layout

Les classes .row et .col permettent d’utiliser le positionnement tabulaire de CSS. Ce mode de positionnement très robuste permet d’avoir des colonnes de même hauteur, des alignements verticaux facilités et des mises en pages simples.

<div class="row w100">  
  <div class="col alignbottom w30">
   Contenu a
  </div>
  <div class="col w5 gut"> </div>
  <div class="col w30">
    Contenu b<br />
    plus long
  </div>
  <div class="col w5 gut"> </div>
  <div class="col w30">
    Contenu c<br />
    beaucoup +<br />
    long
  </div> 
</div> 

Ce qui donne :

À noter, .col est aligné par défaut en haut (vertical-align: top). Dans l’exemple ci-dessus, la première cellule utilise alignbottom pour être aligné en bas de la cellule (alignmiddle permet un centrage vertical). .gut permet de simuler des gouttières.

Inline-block

Utiliser display: inline-block ou la classe .inbl est très utile : cela permet de dimensionner des éléments inline sans pour autant les transformer en blocs, cela permet également de présenter des formulaires élégamment sans se prendre la tête.

<label for="id_du_champ" class="bl">
  <span class="inbl w250p alignright pr1">Le champ</span>
  <input type="text" name="du_champ" id="id_du_champ" />
</label>
<label for="id_du_champ2" class="bl">
  <span class="inbl w250p alignright pr1">Un autre champ</span>
  <input type="text" name="du_champ2" id="id_du_champ2" />
</label>

Ce qui donne :

Le champ Un autre champ

Cela permet également de créer des grilles (voir l’onglet à ce sujet) ou de positionner des éléments côte à côte avec beaucoup de souplesse pour le responsive, particulièrement en mobile-first. La classe bl (qui applique un display: block) qui est mise sur les label permet de positionner chaque élément des formulaires les uns au-dessus des autres.

Créer une grille

Röcssti peut construire des grilles assez facilement, que ce soit via le table-layout ou via les classes .grid (inline-block et vertical-align: top) ou inbl (inline-block). La classe .gut sert aussi pour les espacements (pour notifier des éléments vides).
Exemple via .grid :

<div class="redborder">
   <div class="grid w25">...</div><!--
--><div class="grid w25">...</div><!--
--><div class="grid w25">...</div><!--
--><div class="grid w25">...</div>
</div>

Ce qui donne :

Notes : en ajoutant une classe personnalisée sur les éléments, vous pouvez aisément spécifier la largeur, et la faire varier selon les résolutions dans une ou plusieurs media-queries. C’est exactement la méthode que j’utilisée sur la page d’accueil (3×2 éléments puis 2×3 puis 1×6, avec des gouttières qui vont bien entre).

Dans votre immense sagesse, vous aurez noté les commentaires entre les éléments. Comme les éléments sont dit « en ligne », le moindre espace entre eux sera rendu (white-space). Il existe toutes sortes de « hacks » et de bricolages pour les éliminer, toutefois, les commentaires sont encore la méthode la plus propre et la plus simple. Si vous avez la possibilité de minifier le code HTML, cela marche aussi.

Je recommande la méthode .grid particulièrement en mobile-first.

Éléments de typographie

La gestion de la structure Hx utilise des valeurs permettant de créer un rythme vertical, ce qui rend la lecture beaucoup plus agréable. Ces valeurs sont inspirées de l’outil Vertical Rhythm Tool d’@eQRoeil. D’ailleurs, si vous utilisez la version CSS de Röcssti, vous pouvez directement utiliser cet outil et insérer les résultats quand vous customiserez votre projet. Les versions Sass et LESS incluent un calcul automatique de rythme vertical, avec 3 variantes possibles.

Dans votre immense sagesse (ou pas), vous aurez noté que la structure Hx, certains helpers ainsi que les media-queries sont définies en em. Cette unité a de nombreux avantages :

• Accessibilité : cette unité est relative, elle permet donc le zoom (global ou texte) sur tous les navigateurs ;
• Respect de l’utilisateur et de ses préférences : elle s’accomode très bien d’une taille de fonte différente chez votre utilisateur ;
• Ergonomie/accessibilité : les media-queries en em permettent de déclencher les breakpoints proportionnellement à la taille de la fonte par défaut. Si votre utilisateur a besoin d’un zoom texte puissant sur un grand écran, cela affichera la version mobile avec de très gros caractères. En somme, les contenus restent agréablement disposés quel que soit le niveau de zoom.

Hé oui, même le responsive est fonction de la typographie !

La gestion de la césure est également possible, elle est activable sur tout un projet ou sur un élément particulier via la classe .cut. D’autres styles par défaut comme pour les balises abbr, code, kbd, etc. sont également disponibles.

Gestion du responsive

Röcssti offre plusieurs systèmes pour faciliter la création de sites responsives. Le premier est une batterie de classes permettant de cacher/faire apparaître des contenus selon que l’on soit sur desktop, tablettes ou mobile.

<p>Ce contenu doit rester dans tous les cas.</p>
<p class="nomobile">Ce contenu doit disparaître sur mobile.</p>
<p class="noprint">Ce contenu doit disparaître sur la version imprimable.</p>
<p class="nodesktop">Ce contenu ne sera pas affiché sur desktop (donc apparaîtra à partir des tablettes).</p>
<p class="nodesktop notablet">Ce contenu doit apparaître sur les smartphones.</p>
<p class="hidden onprint">Ce contenu doit apparaître uniquement sur la version print.</p> 

Ce qui donne (redimensionnez votre fenêtre pour voir le résultat) :

Une autre possibilité est d’« empiler » des éléments positionnés via flottants ou table-layout à partir des tablettes/mobiles via les classes .autotablet et .automobile. Reprenons l’exemple plus haut :

<div class="row w100">  
  <div class="col-noalign alignbottom w30 automobile">
   Contenu a
  </div>
  <div class="col w5 gut nomobile"> </div>
  <div class="col w30 automobile">
    Contenu b<br />
    plus long
  </div>
  <div class="col w5 gut nomobile"> </div>
  <div class="col w30 automobile">
    Contenu c<br />
    beaucoup +<br />
    long
  </div> 
</div> 

Ce qui donne :

Si vous redimensionnez la fenêtre, vous verrez que les 3 blocs positionnés côte à côte vont s’empiler comme par magie sur mobile. Cela marche également pour les flottants.

Site en Right to Left

Si le site est multilingue avec une langue qui se lit de droite à gauche (Right to Left), Röcssti propose quelques outils pour simplifier l’adaptation d'un template pour une langue RTL. Exemple :

• Les alignements de textes sont adaptés, exemple : [dir="rtl"] .alignright { text-align: left; }
• Les flottants sont inversés, exemple : [dir="rtl"] .left { float: right; }
• Certains helpers sont également adaptés : [dir="rtl"] .mr0 { margin-left: 0; }
• Sous les vieux IE, le table-layout est adapté via un fallback en flottants, eux-mêmes adaptés au RTL.
• Etc.

À noter, le table-layout s’adapte automatiquement à un passage en RTL (tout comme les éléments en display: inline-block). Pour en savoir plus, vous pouvez lire : Un site et une CSS en RTL.

Les vieux IE

Pré-requis pour les vieux IE

Certains outils sont disponibles pour gérer les vieux IE, même si ces derniers commencent à disparaître. Voici un exemple des classes conditionnelles posées sur l’élément html.

<!--[if lte IE 6]> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" class="ie6 oldies"> <![endif]-->
<!--[if lte IE 7]> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" class="ie7 oldies"> <![endif]-->
<!--[if IE 8]> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" class="ie8 oldies">  <![endif]-->
<!--[if IE 9]> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" class="ie9">  <![endif]-->
<!--[if gt IE 9]><!--> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> <!--<![endif]--> 

Ces dernières permettent par exemple de rectifier certains éléments pour IE.

.mon-module {
…
}
.ie7 .mon-module {
/* ici un fix  */
} 

À noter, dans le cas d’adaptations très rapides et sans faire le détail pour des vieux IE, les classes .nooldies (on cache sur IE8 et inférieurs), .noie6 (7, 8 et 9 sont disponibles aussi) permettent de cacher des éléments trop évolués pour les brontosaures microsoftiens.

Des choses à savoir

Le table-layout ne fonctionne qu’à partir d’IE8. Pour IE7 et inférieurs, il est « fallbacké » via des flottants. Ce qui implique que si vous souhaitez réellement prendre en compte IE7 et inférieurs, il vous faudra systématiquement dimensionner chaque cellule, sinon vous allez avoir de mauvaises surprises.

Les classes .inbl et .grid (bref, tout ce qui est en display: inline-block) fonctionneront sur les vieux IE uniquement si les éléments sur lesquels elles seront mises sont des éléments inline par défaut (comme les liens a, les span, etc.). Sinon il faudra rajouter un hack de ce genre :

.element { 
  zoom: 1; /* HasLayout */
  display: inline;
} 

Comme indiqué dans la news sur le border-box, ce dernier ne fonctionne qu’à partir d’IE8. Si vous devez intégrer sur des versions plus vieilles, c’est tout à fait faisable, il suffit de s’interdire de mettre un padding sur un bloc dimensionné, et de le mettre dans ledit bloc, exemple :

<div class="w33">
 <div class="p1">
  …
 </div>
</div>
 

Certes c’est un peu moins élégant, un peu moins beau, mais cela vous permettra d’éviter de pleurer des larmes de sang au moment de tester et d’adapter votre intégration sous IE6/7.