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.

Navigation

Barre de navigation horizontale

<nav class="navbar">	
	<ul>
		<li><a href="#">Cuisine</a></li>
		<li class="current"><a href="#">Cakes</a></li>
		<li><a href="#">Desserts</a></li>
		<li><a href="#">Soupes</a></li>
		<li><a href="#">À propos</a></li>
	</ul>
</nav>

Barre de navigation pleine largeur horizontale

<nav class="navbar full">	
	<ul>
		<li><a href="#">Cuisine</a></li>
		<li class="current"><a href="#">Cakes</a></li>
		<li><a href="#">Desserts</a></li>
		<li><a href="#">Soupes</a></li>
		<li><a href="#">À propos</a></li>
	</ul>
</nav>

Double barre de navigation horizontale

<nav class="navbar navbar-left">	
	<ul>
		<li><a href="#">Cuisine</a></li>
		<li class="current"><a href="#">Cakes</a></li>
		<li><a href="#">Desserts</a></li>
		<li><a href="#">Soupes</a></li>
		<li><a href="#">À propos</a></li>
	</ul>
</nav>
<nav class="navbar navbar-right">	
	<ul>
		<li><a href="#">Livres de cuisine</a></li>
		<li><a href="#">Recettes</a></li>
	</ul>
</nav>
<nav class="nav">	
	<ul>
		<li><a href="#">Cuisine</a></li>
		<li class="current"><a href="#">Cakes</a></li>
		<li><a href="#">Desserts</a></li>
		<li><a href="#">Soupes</a></li>
		<li><a href="#">À propos</a></li>
	</ul>
</nav>
<nav class="nav nav-separ">	
	<ul>
		<li><a href="#">Cuisine</a></li>
		<li class="current"><a href="#">Cakes</a></li>
		<li><a href="#">Desserts</a></li>
		<li><a href="#">Soupes</a></li>
		<li><a href="#">À propos</a></li>
	</ul>
</nav>
<nav class="nav nav-box">	
	<ul>
		<li><a href="#">Cuisine</a></li>
		<li class="current"><a href="#">Cakes</a></li>
		<li><a href="#">Desserts</a></li>
		<li><a href="#">Soupes</a></li>
		<li><a href="#">À propos</a></li>
	</ul>
</nav>

L'utilisation d'un fil d'riane se fait à partir d'une liste normal avec la classe .navbar-fil

<nav class="navbar-fil">	
	<ul>
		<li><a href="#">Cuisine</a></li>
		<li><a href="#">Desserts</a></li>
		<li class="current"><a href="#">Cakes</a></li>
		<li><a href="#">Cakes olivess</a></li>
	</ul>
</nav>

Pour changer le séparateur par un trait utilisez la classe .sep-pipe

<nav class="navbar-fil sep-pipe">	
	<ul>
		<li><a href="#">Cuisine</a></li>
		<li><a href="#">Desserts</a></li>
		<li class="current"><a href="#">Cakes</a></li>
		<li><a href="#">Cakes olivess</a></li>
	</ul>
</nav>

Pour changer le séparateur par un trait oblique utilisez la classe .sep-slash

<nav class="navbar-fil sep-slash">	
	<ul>
		<li><a href="#">Cuisine</a></li>
		<li><a href="#">Desserts</a></li>
		<li class="current"><a href="#">Cakes</a></li>
		<li><a href="#">Cakes olivess</a></li>
	</ul>
</nav>

Pagination

Utilisez une liste avec la classe .pagination. Pour changer l'aspect de l'onglet courrant, appliquez la classe .current sur la balise li ou aou mettez le entre <span> ... </span>.

<ul class="pagination">
	<li><a href="page-1.hml">1</a></li>
	<li><a href="page-2.hml">2</a></li>
	<li><span>3</span></li>
	<!-- 
	  Autres méthodes pour mettre en onglet courrant avec la classe .current
	-->
		
	<li><a href="page-3.html" class="current">3</a></li>

	<!-- ou -->

	<li class="current"><a href="page-3.html">3</a></li> 
</ul>