Ce site est entièrement responsive. Néanmoins, certains styles peuvent être mieux appréciés sur un écran plus grand.

Documentation

Découvrez le fonctionnement du framework Slim à travers la documenation. Tous les composants y sont abordés, et illustrés des mises en situation.

Typographie

La typographie est l'une des caractéristiques la plus importante d'un site web. C'est avec sa taille, son espacement, et sa lisibilité que vous allez donner envie aux internautes de lire votre contenu.

Titre et sous-titre

Titre h1

<h1>Titre h1</h1>

Titre h2

<h2>Titre h2</h2>

Titre h3

<h3>Titre h3</h3>

Titre h4

<h4>Titre h4</h4>
Titre h5
<h5>Titre h5</h5>
Titre h6
<h6>Titre h6</h6>

L'ajout de la class .soustitre sur une balise titre premet de décliner un sous-titre avec une typographie plus fine.

Exemple | Titre h1

Exemple | Sous-titre h1

<h1>Exemple | Titre h1</h1>
<h1 class="soustitre">Exemple | Sous-titre h1</h1>

Paragraphe mis en avant "lead"

Eh ! a propos de devenir marteau, vous savez que chez moi ça peut aller assez loin. Parce que mettons, là on se pose, on analyse le truc, le crincrin ça fait des heures que ça dure, et en plus vous vous y mettez à plusieurs. Et bin moi, le machin, une fois que j'en ai fais des copeaux, je peux très bien mettre le feu au plumard, même au mobilier, ça m'fait pas peur! - Kaamelott

<p class="lead">Eh ! a propos de devenir marteau ... </p>

Paragraphe simple

Eh ! a propos de devenir marteau, vous savez que chez moi ça peut aller assez loin. Parce que mettons, là on se pose, on analyse le truc, le crincrin ça fait des heures que ça dure, et en plus vous vous y mettez à plusieurs. Et bin moi, le machin, une fois que j'en ai fais des copeaux, je peux très bien mettre le feu au plumard, même au mobilier, ça m'fait pas peur! - Kaamelott

<p>Eh ! a propos de devenir marteau ... </p>

Citation

"Ah ça y est, je viens de comprendre à quoi ça sert la canne. En fait ça sert à rien… Du coup ça nous renvoie à notre propre utilité : l’Homme face à l’Absurde!"

<blockquote>
	<p>"Ah ça y est, je viens de comprendre ... "</p>
</blockquote>

Citation avec auteur et sources

La balise <small> pour l'auteur et la <cite> pour la référence à l'oeuvre

"Ah ça y est, je viens de comprendre à quoi ça sert la canne. En fait ça sert à rien… Du coup ça nous renvoie à notre propre utilité : l’Homme face à l’Absurde!"

Perceval le GalloisKaamelott
<blockquote>
	<p>"Ah ça y est, je viens de comprendre ... "</p>
	<small>Perceval le Gallois</small> — <cite>Kaamelott</cite>
</blockquote>

Adresse

Les adresse sont contenu dans une balise <address>.

Adresse de la tour Eiffel
Champ de Mars, 5 Avenue Anatole France,
75007 Paris
France
<address>
	<strong>Adresse de la tour Eiffel</strong> <br>
	Champ de Mars, 5 Avenue Anatole France, <br>
	75007 Paris <br>
	France
</address>

Listes simples

  • Cuisine
  • Cakes
    • Cakes olives
    • Cakes jambon
    • Cakes légumes
      • Cakes tomates
      • Cakes carottes
  • Desserts
    • Tartes
    • Glaces
  • Soupes
  • A propos
<ul>
	<li>Cuisine</li>
	<li>Cakes
		<ul>
			<li>Cakes olives</li>
			<li>Cakes jambon</li>
			<li>Cakes légumes
				<ul>
					<li>Cakes tomates</li>
					<li>Cakes carottes</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>Desserts
		<ul>
			<li>Tartes</li>
			<li>Glaces</li>
		</ul>
	</li>
	<li>Soupes</li>
	<li>A propos</li>
</ul>

Listes numéroté

Même fonctionnement que la liste simple mais avec la balise <ol> à la place de <ul>

  1. Cuisine
  2. Cakes
    1. Cakes olives
    2. Cakes jambon
    3. Cakes légumes
      1. Cakes tomates
      2. Cakes carottes
  3. Desserts
    1. Tartes
    2. Glaces
  4. Soupes
  5. A propos
<ol>
	<li>Cuisine</li>
	<li>Cakes
		<ol>
			<li>Cakes olives</li>
			<li>Cakes jambon</li>
			<li>Cakes légumes
				<ol>
					<li>Cakes tomates</li>
					<li>Cakes carottes</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>Desserts
		<ol>
			<li>Tartes</li>
			<li>Glaces</li>
		</ol>
	</li>
	<li>Soupes</li>
	<li>A propos</li>
</ol>

Afficher du code avec <pre>

Présentez du code source avec la balise <pre>. Pour la colorisation syntaxique, utilisez la classe .prettyprint .

if ( 1 == 1 ){
   echo "Logique !";
}
<pre class="prettyprint">
if ( 1 == 1 ){
   echo "Logique !";	
}
</pre>
					

Éléments de type "En-ligne"

« En-ligne » est une catégorie d’éléments HTML, par opposition aux éléments de « niveau bloc ». Les éléments en-ligne peuvent se placer dans des éléments de niveau bloc ou dans d’autres éléments en-ligne. Leur taille s’adapte à leur contenu. (source)

Code HTML Resultat
<del> Texte barré
<mark> ou <ins> Texte surligné
<abbr> WYSIWYG
<em> ou <i> Italic
<strong> ou <b> Strong
<sub> 2 ex: H2O
<sup> 2 ex: 15m2
<code> .class-objet
<kbd> cmd + F
<samp> Texte programme