TRUCss
framework CSS
Download (exemple + framework)


Téléchargez et utilisez facilement ce framework, idéal pour construire la base de vos applications web.
responsive
Responsive
responsive
Simple
responsive
Léger

Documentation


La grille
La grille est basée sur 12 colonnes. Facile a utiliser et à prendre en main pour un résultat 100% responsive.
Chaque ligne se construit avec la classe .row
1
11
2
10
3
9
4
8
5
7
6
6
12
<!-- Code pour une colonne de 8 et une de 4 -->
<div class="row">
<div class="col-8">
</div>
<div class="col-4">
</div>
</div>
Typographie

Titre H1

Titre H2

Titre H3

Titre H4

Titre H5
Titre H6

Paragraphe


Utilisez ces classes pour l'alignement du texte : .text-left, .text-center, .text-right, .text-justify

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet


Notes : Chaque éléments de votre HTML peux hériter de la classe .bold ou .italic
Bouton
Lorem ipsum dolor sit amet Cliquez-ici
<a class="button">Cliquez-ici</a>
Lien
Lorem ipsum dolor sit amet Cliquez-ici
<a>Cliquez-ici</a>
Les alertes
Une alerte est un div contenant l'une des classes suivantes .alert, .alert-success, .alert-warning, .alert-danger, .alert-info

Alert
Success
Warning
Danger
Info
Formulaires


Tableaux
Forme Couleur
Carré Rouge
Rond Jaune
Deux classes sont disponibles pour les tableaux : .table (premier tableau) ou .table-light (deuxième tableau)
Forme Couleur
Carré Rouge
Rond Jaune
Pour ajouter le style zébrures à vos tableaux, ajoutez la classe .bounce sur la balise table
Liste simple
  • Kiwi
  • Pomme
  • Banane
<!-- Liste simple -->
<ul>
<li>Kiwi</li>
<li>Pomme</li>
<li>Banane</li>
</ul>
Liste style
  • Kiwi
  • Pomme
  • Banane
<!-- Liste style -->
<ul class="list-inline">
<li>Kiwi</li>
<li>Pomme</li>
<li>Banane</li>
</ul>
Compléments
Un tag est un span contenant l'une des classes suivantes .tag, .tag-success, .tag-warning, .tag-danger, .tag-info

  • Tag
  • Success
  • Warning
  • Danger
  • Info

Voici quelques classes supplémentaires :

Bloc blanc : .bloc
Bloc vide, masqué en responsive : .col-hidden (à appliquer à la suite d'une balise col)

Titre d'un bloc : .title
Titre d'un sous-bloc : .title-bar

Couleur de background d'un élément : .bg-color
Couleur de texte d'un élément : .text-color