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-spacingline-height et margins spé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

Bouton Ancre

Bouton Ancre

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
  1. Les listes ordonnées ont aussi des styles basiques
  2. 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
  3. 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.

Un
Onze
Deux
Dix
Three
Neuf
Quatre
Huit
Cinq
Sept
Six
Six
Sept
Cinq
Huit
Quatre
Neuf
Trois
Dix
Deux
Onze
Un
Un
Onze

Deux
Dix

23
12
12

“Skeleton” a été mise à jour le :
Améliorer cette page