Skeleton
Avant de partir en pensée design css pour construire une page d’accueil « above-the-fold » avec un menu personnalisé et d’autres layouts fondamentaux, je découvre avec enchantement les potentiels de mise en forme du Skeleton, le boilerplate intégré dans le thème hugo-zen.
Typographie
La typo est définie avec les rems, de sorte que les tailles de police et les relations spatiales peuvent être évaluées en fonction d’une propriété <html> unique font-size. En sortie de boîte, Skeleton ne change jamais la taille de police <html>, mais il reste là dans le cas où vous en avez besoin pour votre projet. Toutes les mesures sont toujours de base 10, un <h1> avec une font-size de 5.0rem signifie simplement 50px.
- La typographie de base est Raleway servie par Google, définie à 15rem (15px) sur une hauteur de 1.6 lignes (24px). D’autres types de base comme les ancres, le gras, l’emphase et le souligné sont tous évidemment inclus.
- En-têtes : créez une famille de tailles distinctes chacune avec des
letter-spacing,line-heightetmarginsspécifiques.
Titre1
Titre2
Titre3
Titre4
Titre5
Titre6
La typo de base est de 15px sur une hauteur de ligne de 1.6 (24px)
Gras Italique Coloré Souligné
Boutons
Formulaire
Listes
- Les listes non ordonnées ont des styles basiques
-
Elles utilisent le style de liste circle
- Les listes encapsulées peuvent être gérées
- Elles peuvent imbriquer n'importe quel type de liste l'une dans l'autre
- Juste plus d'items de liste lorem ipsum
- Les listes ordonnées ont aussi des styles basiques
-
Elles utilisent le style de liste décimal
- Les listes ordonnées et non ordonnées peuvent être imbriquées
- Tout type de liste rentre l'une dans l'autre
- Dernier item de liste juste pour rire
Tableau
| Nom | Age | Sexe | Ville |
|---|---|---|---|
| Dave Gamache | 26 | Homme | San Francisco |
| Dwayne Johnson | 42 | Homme | Hayward |
<table class="u-full-width">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dave Gamache</td>
<td>26</td>
<td>Male</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Dwayne Johnson</td>
<td>42</td>
<td>Male</td>
<td>Hayward</td>
</tr>
</tbody>
</table>
La Grille Skeleton
La grille est une grille fluide de 12 colonnes avec une largeur max de 960px, qui rétrécit avec le navigateur/terminal pour les plus petites tailles. La largeur maximale peut être modifiée avec une ligne de CSS et toutes les colonnes se retailleront. La syntaxe reste simple et facilite un code responsive. Retaillez le navigateur.