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.

Boutons

Boutons simples

Les boutons d'action sont des liens a avec la class btn

Normal Moyen Petit
<a class="btn">Normal</a>
<a class="btn moyen">Moyen</a>
<a class="btn petit">Petit</a>

Boutons light

Un bouton avec un affichage léger grâce à la class .btn-lg.

Bouton fin
<a class="btn-lg">Bouton fin</a>

Boutons 3D

Ce bouton à un style 3D (visited/hover/active), utilisez la class .btn-3d pour utiliser ce style.

Bouton 3D
<a class="btn-3d">Bouton fin</a>

Angles des boutons

Vous pouvez gérez les angles de vos boutons avec les class d'aide .btn-round ou .btn-square

Bouton Carré Bouton arrondi

Bouton Carré Bouton arrondi

Bouton Carré Bouton arrondi
<a class="btn btn-square">Bouton Carré</a>
<a class="btn btn-round">Bouton arrondi</a>

<a class="btn-lg btn-square">Bouton Carré</a>
<a class="btn-lg btn-round">Bouton arrondi</a>

<a class="btn-3d btn-square">Bouton Carré</a>
<a class="btn-3d btn-round">Bouton arrondi</a>

Boutons avec icone

Ajouter une icone au bouton avec .btn-icon et l'icone avec la class .icon-xxxx (liste des icones disponibles).

Télécharger

Ajouter un utilisateur
<a class="btn-icon icon-download">Télécharger</a>
<a class="btn-icon icon-user-add">Ajouter un utilisateur</a>

Style de boutons (couleurs)

Les boutons peuvent êtres décliné en plusieurs couleur. Pour effectuer le changement, il suffit d'appliquer la class btn-xxx ou btn-xxx-3d en fonction de la couleur et du type de bouton. Ces styles s'appliquent à tous les style de boutons à part les boutons lights.

<!-- Boutons classics -->

<a class="btn btn-green">.btn-green</a>

<a class="btn btn-red">.btn-red</a>

<a class="btn btn-blue">.btn-blue</a>

<a class="btn btn-dark">.btn-dark</a>

<a class="btn btn-disable">.btn-disable</a>

<a class="btn btn-grey">.btn-grey</a>
<!-- Boutons 3D -->

<a class="btn-3d btn-green-3d">.btn-green-3d</a>

<a class="btn-3d btn-red-3d">.btn-red-3d</a>

<a class="btn-3d btn-blue-3d">.btn-blue-3d</a>

<a class="btn-3d btn-dark-3d">.btn-dark-3d</a>

<a class="btn-3d btn-disable-3d">.btn-disable-3d</a>

<a class="btn-3d btn-grey-3d">.btn-grey-3d</a>

Boutons avec icone seule

Ajouter des icones dans vos bouton à la place du texte avec icon-xxxx (liste des icones disponibles)

<a class="btn btn-red icon-heart width-20"></a>

<a class="btn btn-green icon-user-add width-20"></a>

<a class="btn btn-blue icon-chat width-20"></a>