En mode projet, sequel : écrire sa feuille avec style | Épisode 1

En mode projet, sequel^[1]Si vous n’êtes pas adepte du vocabulaire des séries TV: un sequel, c’est la suite d’une série (et ça diffère d’un spin-off, qui est une nouvelle série avec un personnage secondaire de … Continue reading : Ecrire sa feuille de avec style
La série EN MODE PROJET inaugure de nouveaux types de billets, principalement des tutoriels, permettant de réaliser une des opérations dont vous pourrez avoir besoin pour votre projet. Le billet est publié en parallèle des fichiers HTML et CSS sur la dropbox.
Le sequel « Écrire sa feuille avec style » se destine à accompagner votre finalisation ; il correspond au dossier Playground_feuille_de_style que vous trouverez dans le dossier PratiqueDuWeb sur notre Dropbox.

Épisode 1 | L’Ordre et la Structure

---

Ne pas avoir travaillé pour rien

Rappelez-vous : un site web est un projet au long court, qui se construit par étape; vous avez déjà franchi plusieurs de ces étapes, en préfigurant votre site avec vos wireframes, vos planches de tendance, votre squelette HTML.

Au stade de la création de votre feuille de style, vous n’inventez plus rien : vous exécutez les instructions de votre design, à la lettre.
Si vous vous demandez par où commencer, reprenez votre wireframe et vérifier que votre fichier HTML lui correspond exactement.
Bien entendu, je considère que le contenu de vos fichiers HTML est complet: vous avez mis tout le texte, toutes les images (celles qui sont intégrées dans une figure), et, surtout, tous les liens et ancres qui vous permettent de naviguer à l’intérieur de votre page web ou d’une page à l’autre de votre site.

C’est ok ? Alors, allons-y pour la feuille de style.

Organiser sa feuille de style

Pour créer une bonne feuille de style, il faut trois choses : de la méthode, de la méthode, et de la méthode.

Ok, je m’inspire très fortement de la célèbre phrase d’Henri-Georges Clouzot :

Mais c’est pour mieux vous faire comprendre que l’élaboration de la feuille de style CSS demande d’être assez méthodique, pour ne pas se faire déborder. Je vais donc détailler une méthode qui vous permettra de penser à tout sans être submergé·e par les détails.
Le principe est simple : aller du général au particulier, des éléments les plus génériques (s’appliquant à tous les blocs et à toutes les pages), aux plus spécifiques (s’appliquant, par exemple, à un ID propre à une page particulière).

Il est aussi profitable de partager votre feuille de style en section, vous permettant de vite vous repérer visuellement.
Les développeurs utilisent souvent les commentaires pour créer ces sections, et certains « décorent » les titres des sections pour les distinguer des simples commentaires de code.
C’est ce que je vous ai montré dans les différentes feuilles de style vues en cours, comme ici:

/**********************
 *** DESIGN GÉNÉRAL ***
 **********************/

body {
    background-color: #383838;
}

h1,
h2,
h3,
figcaption {
    margin: auto;
    text-align: center;
} /* si vous utilisez une même règle CSS pour plusieurs balises, ces balises peuvent être indiquées les unes à la suite des autres, séparées par une virgule : ici, tous mes titres, mes figcaptions et mes éléments de menu sont centrés */

Les titres de section sont ici en majuscule et entourés d’astérisque, pour les différencier des commentaires sur le code. Sur des feuilles de style longues, certains développeurs numérotent carrément leurs sections, pour mieux s’y retrouver.

Par convention, je mettrais dans ce tutoriel un code HTML simplifié: les balises de niveau 1, 2 ou 3, 4 si vraiment c’est nécessaire, pour ne pas alourdir la démonstration.
En ce qui concerne vos pages HTML, si les balises de niveaux inférieures gênent votre compréhension, pensez à les fermer.[^1]

[^1]: vous vous rappelez qu’on peut le faire, dans Brackets, en cliquant sur le tiret vert à gauche d’une balise ? Son contenu est alors réduit, et on voit un CODE en capitales vertes s’afficher à la place.

1. La feuille de style par défaut

Pour commencer, votre feuille de style nécessite peut-être que vous ayez modifié quelques éléments par défaut, qui vont s’appliquer indifféremment à toutes les pages de votre design. C’est dans cette section que vous mettrez, par exemple,

• la règle d’Ethan Marcotte, grâce à laquelle les images deviennent responsive et s’adaptent à la taille de leur parent ;
• un reset CSS, c’est-à-dire une remise à zéro des feuilles de style des navigateurs (ce qui leur donne le même comportement avec votre feuille de style, plutôt que ces différences agaçantes, selon le navigateur avec lequel vous accédez à votre site);
• le fond sombre de votre body, qui vaudrait pour toutes vos pages.

Voici un exemple de ce que ça peut donner :

/***********************************
 *** FEUILLE DE STYLE PAR DÉFAUT ***
 ***********************************/

/* un "reset" simpliste */ 

header
h1,
h2,
h3,
nav,
div,
section {
    margin: 0;
    padding: 0;
    /* met les marges des blocs à zéro, pour que tous les navigateurs aient le même comportement */
    box-sizing: border-box; /* harmonise toutes les largeurs et hauteurs de boites */
}

/* pour que les images soient responsives et régies par la figure qui est leur bloc parent */
img {
    max-width: 100%;
    height: auto;
}

body {
    background-color: #383838;
}

J’ai utilisé un « reset » ultra-simple, qui évite que les blocs de structure de la page soient collés ou écartés différemment selon le navigateur (quand on créé par exemple des blocs de titre qui débordent de leurs contenants, les marges peuvent vite devenir agaçantes).
Vous pouvez ajouter à la liste les blocs de votre choix.

Il existe plusieurs CSS Reset dont le plus célèbre est celui d’Eric Meyer.
Mais attention, plus un reset CSS est complet, plus vous aurez à réécrire les règles qu’il aura effacé.
Aussi, si vous en voyez l’utilité, contentez-vous d’un reset que vous comprenez et qui vous est entièrement utile. Sinon, n’en utilisez pas, ce n’est absolument pas nécessaire, et ce sera moins compliqué pour vous.

2. La structure de la page

Selon votre fichier HTML, votre page est structuré en plusieurs balises : vous pouvez, par exemple, avoir

• un header, un main et un footer de premier niveau,
• puis, dans le header, un h1, un h2et un nav de second niveau,
• et dans le main, plusieurs section de second niveau,
• et enfin, dans chacune des sections, une ou plusieurs div de troisième niveau (avec la class .card, par exemple).

En HTML, cela donnera l’organisation suivante (avec 4 sections contenant chacune 4 divisions avec la classe .card):

<body>
    <header>
       <h1>Le Titre</h1>
       <h2>le sous-titre</h2>
       <nav>le menu de navigation</nav>
    </header>
    <main>
        <section>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
        </section>
        <section>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
        </section>
        <section>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
        </section>
    </main>
    <footer></footer>

</body>

La structure de votre page dépend de la façon dont ces balises sont agencées, niveau par niveau. J’ai mis trois sections dans cet exemple, mais par la suite je ne détaillerai que l’intérieur d’une section.

Le modèle des boites

Les balises de niveau 1

Au niveau 1, par exemple, vous savez que vos blocs s’aligneront les un en dessous des autres, et ça vous convient. Ok, rien à écrire, dans ce cas.
Mais vous pouvez vouloir que votre site ait une taille maximale fixe (par exemple, 1440px, et une taille en pourcentage pour toutes les valeurs que prendra la fenêtre du navigateur en dessous de la taille maximale (par exemple, 80% du body).

En CSS, cela donnera

/**************************
 *** STRUCTURE GÉNÉRALE ***
 **************************/

 header, main, footer {
     max-width: 1440px;
     width: 80%;
 }

Il y a un autre moyen d’obtenir le même résultat, c’est d’avoir un conteneur (ou un parent) englobant pour tout son site: c’est alors lui qui va donner les limites extérieures à tous ses enfants. Cela donnera alors le résultat suivant:

 <body>
    <main id="site-content"> /* je lui donne un ID pour ne pas le confondre avec le main qui englobe le contenu (divisions, sections, etc.) */
          <header>
              <h2></h2>
              <h1></h1>
              <nav></nav>
          </header>
          <main>
              <section>
                  <div class="card"></div>
                  <div class="card"></div>
                  <div class="card"></div>
                  <div class="card"></div>
              </section>
              <section>
                  <div class="card"></div>
                  <div class="card"></div>
                  <div class="card"></div>
                  <div class="card"></div>
              </section>
              <section>
                  <div class="card"></div>
                  <div class="card"></div>
                  <div class="card"></div>
                  <div class="card"></div>
              </section>
          </main>
   </body>

#site-content {
    margin: auto 10%; /* 10% à gauche et à droite */
    max-width: 1440px;
}

C’est un principe à bien comprendre : un conteneur parent peut-être plus efficace pour positionner plusieurs enfants.
Ici la différence n’est pas trop flagrante, mais dès que vous avez beaucoup d’enfants à gérer, ça devient clair.
Par exemple, nos sections vont être très utiles pour gérer le positionnement des .card, à l’aide de flexbox.

Les balises de niveau 2 et 3 : un design fluide

La largeur variable du header, du mainet du footerindique déjà que vous aller créer un design fluide. Les balises de niveau 2 et de niveau 3 vont renforcer cette fluidité. On utilisera principalement les possibilités de display:flex pour cela, notamment la propriété flex-wrap : wrap, qui nous permettra de faire passer une balise sous une autre dès qu’elle n’a plus la place de se mettre à côté.
Mais nous utiliserons aussi les proportions variables (les pourcentages), si besoin.

1. Le header

À l’intérieur du header, au niveau 2, vous afficherez, l’un en dessous de l’autre, votre titre, votre sous-titre et votre menu de navigation.
Là non plus, rien à écrire, les blocs s’alignent par défaut les uns en dessous des autres.

Par contre, à l’intérieur de votre menu de navigation (au niveau 3, donc), vous voudrez que les éléments s’alignent horizontalement; on utilisera display:flexpour ça. Mais si la fenêtre du navigateur est trop petite, se serait bien que les éléments du menu passent les uns en dessous des autres, au fur et à mesure que l’on réduit la fenêtre. Ok, c’est possible avec flex-wrap : wrap.
Mais le menu a une petite particularité : c’est un nav (niveau 2) l’intérieur duquel on crée une liste ul (niveau 3), à l’intérieur de laquelle il y a des éléments de liste li(niveau 4); c’est donc la liste ul qu’il faudra passer en display:flex, pour que ses enfants li soient flexibles. Si vous passez la nav en display:flex, ça ne donnera rien, puisqu’elle ne contient qu’un enfant (la liste ul).

En CSS, vous devrez donc écrire :

header nav ul {
     display: flex;
     flex-wrap: wrap;
 }/* header nav ul : indique un enchassement: seules les listes ul enchâssées dans un nav enchâssé dans un header sont concernées par la règle CSS qui suit. */

2. Le main
   On va aussi réutiliser display:flex sur le main, pour que les sections soient flexibles.
   Mais pour faire en sorte que les sections passent les unes en dessous des autres à partir d’une certaine largeur de fenêtres, on va utiliser les medias queries.
   Donc pour l’instant, notre CSS complète ressemble à ça:

/***********************************
 *** FEUILLE DE STYLE PAR DÉFAUT ***
 ***********************************/

/* un "reset" simpliste */ 

header
h1,
h2,
h3,
nav,
div,
section {
    margin: 0;
    padding: 0;
    /* met les marges des blocs à zéro, pour que tous les navigateurs aient le même comportement */
    box-sizing: border-box; /* harmonise toutes les largeurs et hauteurs de boites */
}

/* pour que les images soient responsives et régies par la figure qui est leur bloc parent */
img {
    max-width: 100%;
    height: auto;
}

body {
    background-color: #383838;
}

/**************************
 *** STRUCTURE GÉNÉRALE ***
 **************************/

 header, main, footer {
     max-width: 1440px;
     width: 80%;
 }

#site-content {
    margin: auto 10%; /* 10% à gauche et à droite */
    max-width: 1440px;
 }

header nav ul {
     display: flex;
     flex-wrap: wrap;
 }/* header nav ul : indique un enchassement: seules les listes ul enchâssées dans un nav enchâssé dans un header sont concernées par la règle CSS qui suit. */

main {
    display:flex;
}

To be continued

Et voilà : à l’issue de ce premier épisode, vous aurez écrit une page web fluide, grâce à une feuille de style flexible 🙂

Dans le prochain épisode, nous parlerons des media queries pour adapter notre site aux appareils qui le consulte: téléphone, tablette.