Construire Une Interface De Tableau De Bord Modulaire Avec Pure

() translation by (you can also view the original English article)

Aujourd'hui, nous allons réaliser un tableau de bord minimaliste et élégant en utilisant Pure (voir le projet sur GitHub), la petite bibliothèque de modules CSS récemment lancée par Yahoo!. Nous aborderons et appliquerons par ailleurs quelques-uns des principes de SMACSS ("Scalable and Modular Architecture for CSS" soit "Architecture graduable et modulaire pour CSS"). Nous utiliserons en complément des icônes du site WeLoveIconFonts.com.

Note : Avant d'aller plus loin, précisons que nous n'insisterons qu'en passant sur les graphiques créés pour ce tableau de bord. Les meilleures conditions pour réaliser ce genre de graphiques supposent en effet un contexte Javascript plus lourd ; l'objet de ce tutoriel étant de traiter avant tout des CSS et seulement marginalement de JavaScript, nous ne nous attarderons donc pas sur les techniques de réalisations de graphiques.

Présentation rapide de Pure

Pure a été conçu avant toute chose par l'équipe Yahoo! et YUI comme un ensemble de modules très léger (moins de 6k). On peut le considérer comme une sorte de Normalize enrichi qui inclut en complément des styles pour des éléments aussi courants que des grilles, des formulaires, des boutons, des tableaux et des menus.

L'équipe YUI a conçu Pure comme un point de départ, et non une solution complète. A partir de ce point de départ, il est attendu des développeurs qu'ils (ou elles) enrichissent et conçoivent leurs propres CSS personnalisées comme une extension de cette base.

C'est pour cette raison que l'essentiel de ce que nous montrons dans ce tutoriel consiste en un ensemble de techniques qui enrichissent une bibliothèque basique comme Pure pour l'adapter à des interactions d'application, comme l'utilisation d'un tableau de bord.

Présentation rapide de SMACSS

SMACSS, acronyme de "Scalable and Modular Architecture for CSS" (soit "Architecture graduable et modulaire pour CSS"), est un ensemble de pratiques créé par Jonathan Snook et conçu pour permettre le développement de CSS faciles à comprendre, simples à enrichir - et qui laisse de côté la guerre des spécificités CSS.

Cette approche suppose aussi de ne pas utiliser d'ID pour la mise en forme et de limiter l'imbrication des sélecteurs autant que possible. L'idée est que les CSS peuvent être définies selon les catégories suivantes : base, structure, modules, états et thèmes. La structuration des CSS autour de ces catégories et le respect des conventions de nomenclature qui leur correspondent donnent à SMACSS une lisibilité et une clarté immédiates. Ceci permet notamment d'éviter les noms de classes à qui sont associés des styles arbitraires. Le principe de la catégorisation met ainsi en pratique ces conventions de nomenclature.

Base : pas de nom (éléments par défaut, pas de classes)
Structure : .layout, .grid, .grid-column, .grid-column.five.columns
Modules : .btn (nom du module), .btn-default, .btn-calltoaction; .modal, .modal-header
Etat : .is-hidden, .is-active (implique des modifications de classes déclenchées par JavaScript)
Thème : .theme-background, .theme-border, .font-1, .font-2

Ces types de classes décrivent ainsi leurs propres fonctionnalités et leurs propres catégories. Les règles de SMACSS restent toutefois davantage des lignes directrices, des approches ; n'hésitez pas à inspecter les sources des CSS Pure pour voir des exemples concrets de SMACSS.

C'est parti !

Créons tout d'abord un simple dossier pour notre projet en utilisant HTML5 Boilerplate et remplaçons Normalize.css par Pure. Pour ce tutoriel, nous utiliserons le lien CDN YUI de Pure <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">. Nous inclurons également Font Awesome, la collection de polices d'icônes de Twitter, en ajoutant une ligne à notre fichier CSS (voir les instructions sur weloveiconfonts). Tout au long du balisage du document, vous rencontrerez ainsi des icônes définies par des classes comme "fontawesome-calendar".

/* dans main.css */

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

<!-- dans index.html, à la place de normalize -->

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">

<link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=fontawesome">

Nous sommes maintenant prêts à utiliser ces outils pour notre design ! Commençons par définir une structure CSS de base qui contiendra nos éléments et que l'on insère dans 'body'.

<header>
	<nav></nav><!-- Le menu de navigation sera placé ici -->
</header>
<section class="dashboard">
	<!-- nos éléments de tableau de bord se logeront ici -->
</section>
<footer>
	<!-- les informations de copyright pourront être incluses ici -->
</footer>

Pour ce qui est de la palette de couleurs, nous avons opté pour Yellow Tree Frog, conçu par l'utilisateur LJK sur le site colourlovers.

En première étape, référençons ces couleurs en commentaire en haut du fichier CSS.

/*
	red: #E73F3F
	orange: #F76C27
	yellow: #E7E737
	blue: #6D9DD1
	purple: #7E45D3
*/

Astuce : Il est souvent intéressant de commencer en utilisant d'abord les mots-clés associés aux couleurs CSS puis de chercher/remplacer les codes hex plus tard, de manière à ne pas à avoir à copier/coller le code hex constamment.

Définition du menu

PureCSS fournit un module de menu prêt à l'emploi que nous allons utiliser pour définir un menu pour notre tableau de bord. Pour commencer, appliquons les directives de SMACSS et utilisons la nomenclature de module basée sur les classes de Pure.

<nav class="pure-menu pure-menu-open pure-menu-horizontal">
    <a href="#" class="pure-menu-heading">WebDesignTuts</a>
    <ul>
        <li class="pure-menu-selected"><a href="#">Tableau de bord</a></li>
        <!-- other items ... -->
    </ul>
</nav>

Notez que ce menu ne sera pas fonctionnel dans ce tutoriel. En passant, on peut voir que notre menu a été créé avec une mise en forme horizontale par défaut. Continuons en modifiant le fond du menu pour le passer en noir semi-transparent.

.pure-menu {
    font-weight: lighter;
}
.pure-menu.pure-menu-fixed {
    position: fixed;
}
.pure-menu.pure-menu-blackbg {
    background: #222;
}
.pure-menu.pure-menu-blackbg .pure-menu-heading:hover {
    color: #efefef;
}
.pure-menu.pure-menu-blackbg a {
    color: #fff;
}
.pure-menu.pure-menu-blackbg a:hover {
    background: #666;
}
.pure-menu.pure-menu-blackbg .pure-menu-selected a {
    background: #7E45D3;
}
.pure-menu.pure-menu-blackbg .pure-menu-selected a:hover {
    color: #efefef;
}

Notez ici l'application des conventions proposées par SMACSS et Pure. Nous définissons deux nouvelles classes, 'pure-menu-blackbg' et 'pure-menu-fixed', puis les sous-styles nécessaires à la prise en compte de cette classe. Vous remarquerez aussi que des classes d'origine sont écrasées (par exemple la classe 'pure-menu' est modifiée avec une épaisseur de police moindre).

Création d'un module de tableau de bord

Créons maintenant un module de tableau de bord. Nous utiliserons des styles basiques pour notre élément "bloc" de base.

.dashboard-piece {
    min-height: 300px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    position: relative;
    padding-bottom: 40px;
}

Maintenant que notre module de base est défini, nous allons l'étendre en créant de nouvelles classes avec le préfixe 'dashboard-piece'. Commençons par créer les classes de couleurs de fond.

.dashboard-piece-redbg {
    background-color: #E73F3F;
}
.dashboard-piece-orangebg {
    background-color: #F76C27;
}
.dashboard-piece-yellowbg {
    background-color: #E7E737;
}
.dashboard-piece-bluebg {
    background-color: #6D9DD1;
}
.dashboard-piece-purplebg {
    background-color: #7E45D3;
}
.dashboard-piece-graybg {
    background-color: #798388;
}

Ensuite, définissons le balisage des différents éléments du tableau de bord. Intégrons le SVG en-ligne du logo Envato, qui prendra ainsi toute la largeur de la grille.

1	<section class="dashboard pure-g-r clearfix">
2	<div class="pure-u-1 dashboard-piece dashboard-piece-redbg dashboard-piece-logo">
3	<h1>
4	<svg x="0px" y="0px" width="132.89669167px" height="120px" viewBox="0 0 73.351 82.791" enable-background="new 0 0 73.351 82.791" xml:space="preserve">
5	<g><path fill="#FFFFFF" d="M7.372,27.487C-1.903,39.206-2.261,55.13,5.369,67.05c6.858-17.611,15.499-37.423,26.14-55.114
6	C21.514,16.159,12.19,21.405,7.372,27.487z M73.333,2.971c-0.11-0.924-0.589-1.7-1.276-2.216C71.4,0.204,70.53-0.084,69.612,0.021
7	c0,0-2.738,0.589-7.093,1.704C41.722,21.698,24.654,48.459,11.43,74.155c0.492,0.427,0.991,0.857,1.512,1.268
8	c14.784,11.696,36.239,9.194,47.936-5.57C74.349,52.822,73.333,2.971,73.333,2.971z"/></g>
9	</svg>
10	</h1>
11	</div>
12	<div class="pure-u-1-3 dashboard-piece dashboard-piece-bluebg">
13	<div class="dashboard-content">
14	<h2><i class="fontawesome-twitter"></i></h2>
15	<p class="dashboard-metric">+20 followers<span class="light"><i class="fontawesome-angle-up"></i>6.8%</span></p>
16	</div>
17	</div>
18	<div class="pure-u-1-3 dashboard-piece dashboard-piece-orangebg">
19	<div class="dashboard-content">
20	<h2><i class="fontawesome-github"></i></h2>
21	<p class="dashboard-metric">
22	142 Commits
23	<div class="light bar-horizontal">
24	<div class="bar-horizontal-bar" style="width:57%">
25	57% Capacity
26	</div>
27	</div>
28	</p>
29	</div>
30	</div>
31	<div class="pure-u-1-3 dashboard-piece dashboard-piece-yellowbg">
32	<div class="dashboard-content">
33	<p class="dashboard-metric">
34	<h2><i class="fontawesome-check"></i></h2>
35	<div class="dashboard-metric">
36	<strong>63 / 90</strong><br><small>Tasks Complete</small>
37	</div>
38	</p>
39	</div>
40	<div class="bar-vertical" style="height:70%;"></div>
41	</div>
42	</section>

Il y a beaucoup de choses à noter dans ce balisage. Tout d'abord, nous utilisons 'pure-u-1-3' (et autres classes pure-u-*) à l'intérieur d'un élément de ligne de grille, 'pure-g-r'. Ces classes font partie du système de grille Pure. Pour bien le comprendre, consultez la documentation complète de YUI sur les grilles ; le concept de base est que la classe de grille pure-u-1-3 équivaut à 1/3 de la largeur de la grille complète ; une classe pure-u-3-4 équivaudra donc à 3/4 de la largeur de la grille. Le module qui abrite le logo a ainsi une classe pure-u-1, ce qui lui permet de s'étendre sur toute la largeur de la grille.

Les autres éléments du tableau de bord sont utilisés pour l'affichage de différents types de données. Les règles CSS suivantes sont utilisées pour mettre en forme ces données et d'autres sections au sein des éléments de notre tableau de bord.

.dashboard-piece-logo h1 {
    line-height: 100px;
}
.dashboard-piece-logo svg {
    margin-top: 80px;
}
.dashboard-piece h1 {
    line-height: 300px;
    font-size: 3.6em;
    margin: 0;
}
.dashboard-content {
    position: relative;
    z-index: 999;
}
.dashboard-content p {
    font-weight: lighter;
}
.dashboard-content .light {
    opacity: 0.4;
    display: block;
}
.dashboard-content h2 i {
    font-size: 4em;
    opacity: 0.4;
}
.dashboard-metric {
    text-transform: uppercase;
    font-size: 1.6em;
    line-height: 1;
}
.dashboard-metric i {
    margin-right: 0.6em;
}

Les classes de barres horizontales et verticales sont par ailleurs définies séparément des modules de contenu du tableau de bord.

.bar-horizontal {
    height: 36px;
    background-color: rgba(255,255,255,0.4);
    position: relative;
    display: block;
    margin-top: 20px;
}
.bar-horizontal-bar {
    background: #fff;
    height: 36px;
    line-height: 36px;
    color: #444;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.8em;
    letter-spacing: 0.2em;
    position: absolute;
    top: 0;
    left: 0;
}
.bar-vertical {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background: rgba(200,200,200,0.5);
}

Enfin, nous faisons appel aux modules pré-développés de Pure pour créer et mettre en forme un tableau pour un module "événements" ; nous réutilisons aussi la classe de barre horizontale pour le module "météo". Ces classes sont étendues avec des éléments de CSS personnalisés. Voici le balisage pour les deux derniers modules.

<section class="dashboard pure-g-r clearfix">
    <div class="pure-u-2-3 dashboard-piece dashboard-piece-graybg dashboard-piece-events">
        <div class="dashboard-content">
            <p class="dashboard-metric">
                <h2><i class="fontawesome-calendar"></i></h2>
                <h3>Upcoming Events</h3>
                <table class="pure-table pure-table-center pure-table-horizontal pure-table-dark">
                    <thead>
                        <tr>
                            <th>With:</th>
                            <th>Where:</th>
                            <th>When:</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John Smith</td>
                            <td>WDTuts Office</td>
                            <td>Jun 20, 9:30AM</td>
                        </tr>
                        <tr class="pure-table-odd">
                            <td>George Bluth</td>
                            <td>Sudden Valley</td>
                            <td>Jun 23, 4PM</td>
                        </tr>
                        <tr>
                            <td>Michael Scott</td>
                            <td>Scranton, PA</td>
                            <td>Jun 24, 2:45PM</td>
                        </tr>
                    </tbody>
                </table>
            </p>
        </div>
    </div>
    <div class="pure-u-1-3 dashboard-piece dashboard-piece-purplebg weather weather-rain">
        <div class="dashboard-content">
            <p class="dashboard-metric">
                <h2><i class="fontawesome-umbrella"></i></h2>
                <div class="dashboard-metric">
                    <strong>80% Chance</strong><br><small>of Precipitation</small>
                    <div class="light bar-horizontal">
                        <div class="bar-horizontal-bar" style="width:80%">80%</div>
                    </div>
                </div>
            </p>
        </div>
    </div>
</section>
<footer>
    &copy; 2013 Envato
</footer>

Et les classes de tableau Pure enrichies.

.pure-table-center {
    margin: 0 auto;
}
.pure-table-dark { color: #ddd; }
.pure-table-dark .pure-table-odd { color: #444; }

Pour finir, nous allons introduire un peu d'espacement dans la partie supérieure du module Météo de manière à ce qu'il s'aligne plus précisément sur le module Evénements. Pour ce faire, nous utiliserons simplement la classe "weather" complémentaire en ajustant son espacement haut. Pour finaliser l'ensemble, nous mettrons en forme la baissière (footer) pour qu'elle soit assortie au menu de navigation haut.

.weather {
    padding-top: 60px;
}
footer {
    background: rgb(20,20,20);
    color: #aaa;
    padding: 10px;
    font-size: 0.6em;
    font-weight: bold;
}

Enrichissement de l'aspect responsive

Pure contient des éléments de grille responsive pré-définis. Ils sont identifiés par le sélecteur suivant.

1	.pure-g-r>[class ^="pure-u"]

C'est un sélecteur d'aspect un peu complexe (consultez cet article The 30 CSS Selectors you Must Memorize pour des explications avancées) qui cible tout d'abord les enfants directs des éléments ".pure-g-r". Ces enfants doivent ensuite avoir un attribut de classe qui commence par le préfixe "pure-u"... fiou !

Il pointe par exemple sur cette div :

1	<section class="dashboard pure-g-r clearfix">
2	<div class="pure-u-2-3 dashboard-piece dashboard-piece-graybg dashboard-piece-events">

Ce sélecteur est utilisé au sein des @media queries pour réordonner les éléments de la grille suivant la largeur disponible. Ces éléments unitaires sont ainsi réduits à 100% en-dessous de 767px, ce qui est excessif pour notre tableau de bord : réduisons-les à seulement 50% entre 480 et 767px à l'aide des @media queries suivantes.

@media only screen and (max-width:767px) {
    .pure-g-r>[class ^="pure-u"]{width:50%; float: left;}
}
@media only screen and (max-width:480px) {
    .pure-g-r>[class ^="pure-u"]{width:100%; }
}

Une pincée de JavaScript

Dans 'main.js', nous allons écrire un peu de JavaScript pour nous assurer que tous les modules d'une même ligne sont bien de la même hauteur.

(function(){
var to;

	function pieceHeights(){
		to = setTimeout(function(){
			$(".pure-g-r").each(function(i,el){
				var contentPieces = $(el).find(".dashboard-piece");
				var max = 0;
				contentPieces.css("min-height","");
				$.grep(contentPieces, function(el,i){
					max = Math.max($(el).outerHeight(),max);
				});
				contentPieces.css("min-height", max);
			});
		}, 400);
	}

	$(window).on("resize", function(){
		clearTimeout(to);
		pieceHeights();
	}).trigger("resize");

}());

Ce JavaScript définit une fonction qui boucle, pour chaque ligne, à travers chacun des éléments possédant une classe de "dashboard-piece", puis identifie le plus grand module de cette ligne. Il paramètre ensuite la hauteur de tous les éléments de cette ligne selon la hauteur du plus haut des éléments de la ligne.

Conclusion

Ce tutoriel ne fait qu'aborder quelques-uns des modules proposés par Pure. Sur la base des modèles utilisés dans ce tutoriel, vous pouvez créer des CSS à la maintenance, la lecture et la gradualité facilitées. L'utilisation d'une petite bibliothèque comme Pure vous permet de mettre en œuvre une solution puissante, testée et bien documentée pour répondre aux problématiques les plus répandues.

Et vous, que faites-vous d'autre avec Pure ? Dites-le nous dans les commentaires !