Skeleton - Version personnalisée

Template HTML/CSS responsive

Vous devriez utiliser cet outil si vous commencez un petit projet ou si vous n'avez pas envie de tout coder à la main à partir de rien. Il vous donnera une base sur laquelle commencer votre projet. En plus de la personnalisation du style général, j'ai également ajouté de nouveaux élements au skeleton de base ainsi qu'une traduction globale des élements en français.

Télecharger

1 - La grille

One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six

2 - Le texte

Titre h1

Titre h2

Titre h3

Titre h4

Titre h5
Titre h6

Ceci est un paragraphe. La taille de base est de 1.5rem (15px) avec une line-height de 1.6 (soit 24px).

Gras  Italique  Lien  Souligné

3 - Les boutons

Bouton ancre

4 - Les Formulaires

6 - Les barres de progression

40% Complete (success)
20% Complete (info)
60% Complete (warning)
80% Complete (danger)

7 - Les listes

  • Objet 1
  • Objet 2
    • Objet 2.1
    • Objet 2.2
  • Objet 3
  1. Objet 1
  2. Objet 2
    1. Objet 2.1
    2. Objet 2.2
  3. Objet 3

8 - Les tables

Nom Age Sexe Lieu
Julien Pelar 27 Homme San Francisco
Anne Moranov 28 Femme Rouen
Franck Doe 24 Homme Chicago

9 - Ecrire du code

                      
.votre-classe { background-color: red; }
                      
                    
                      
<pre>
  <code>
    .votre-classe {
      background-color: red;
    }
  </code>
</pre>

<!-- Retenez que chaque espace et retour à la ligne sera préservé dans un <pre>, ainsi que l'indentation de votre code -->