Documentation de PluCSS

Bien démarrer avec PluCSS

PluCSS est un Framework CSS dédié au CMS PluXml. Cet outil est Full CSS (sans JavaScript), pensé pour le mobile (Mobile First), s'adapte à toutes les résolutions d'écran (Responsive Web Design) et respecte les normes W3C. Il est supporté par les princinpaux navigateurs modernes (Chrome, Firefox, Internet Explorer 10+, Opera, Safari).

Inclus dans le thème par défaut, PluCSS se présente sous la forme d'un fichier CSS nommé plucss.css qu'il est déconseillé de modifier. Pour concevoir votre thème, adaptez directement le fichier theme.css et utilisez cette documentation pour modifier vos fichiers PHP (home.php, article.php...).

Découvrir PluXml

Conteneur et grille

Le conteneur .container est utile pour gérer la structure globale de votre site. Cette classe vous permet de centrer l'ensemble de votre contenu, d'appliquer une largeur maximale de 1280px, et d'ajouter une marge horizontale ajustée en fonction de la résolution d'écran.

La grille se compose de colonnes (jusqu'à 12) que vous pouvez imbriquer, décaler, déplacer, centrer... Vous disposez de 3 points d'arrêt pour configurer votre grille en fonction de la résolution :

.sml-... : pour les mobiles
.med-... : pour les tablettes
.lrg-... : pour les ordinateurs de bureau

<div class="container">
	<div class="grid">
		<div class="col sml-12 med-3 lrg-4">...</div>
		<div class="col sml-12 med-9 lrg-8">...</div>
	</div>
</div>

Documentation sur la grille

Typographie

Par défaut, PluCSS applique des couleurs sur certains éléments dont voici une liste non exhaustive :

color: #444; font-family: sans-serif; line-height: 1.5; pour les textes,
color: #258fd6; text-decoration: none; pour les liens,
border: 1px solid #bbb; pour les tableaux et les champs de formulaires,
background-color: #777; pour les boutons (d'autres couleurs sont disponibles)
background-color: #258fd6; pour les menus, les badges, les étiquettes, et les barres de progressions

Documentation sur la typographie

Helper

PluCSS dispose de classes réutilisables avec 3 points d'arrêt pour que vous puissiez les utiliser en fonction de la résolution d'écran :

.sml-... : pour les mobiles
.med-... : pour les tablettes
.lrg-... : pour les ordinateurs de bureau

Liste des helpers

Typographie

Titres

Titre H1

Titre H2

Titre H3

Titre H4

Titre H5

Titre H6

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

Titre

<h1 class="heading-large">...</h1>
<h1 class="heading-medium">...</h1>
<h1 class="heading-small">...</h1>

Paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.

<p>
	...
</p>

Liens

Voici un lien

<a href="#" title="">...</a>

Listes

Liste de premier niveau
Liste de premier niveau
- Liste de second niveau
- Liste de second niveau

<ul>
	<li>...</li>
	<li>...
		<ul>
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
</ul>

Liste de premier niveau
Liste de premier niveau
1. Liste de second niveau
2. Liste de second niveau

<ol>
	<li>...</li>
	<li>...
		<ol>
			<li>...</li>
			<li>...</li>
		</ol>
	</li>
</ol>

Liste de premier niveau
Liste de premier niveau
- Liste de second niveau
- Liste de second niveau

<ul class="unstyled-list">
	<li>...</li>
	<li>...
		<ul>
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
</ul>

Liste de premier niveau
Liste de premier niveau
Liste de premier niveau

<ul class="inline-list">
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

Terme: Description
Terme: Description

<dl>
	<dt>...</dt>
	<dd>...</dd>
	<dt>...</dt>
	<dd>...</dd>
</dl>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
Auteur

<blockquote>
	<p>
		...
	</p>
	<cite>...</cite>
</blockquote>

Adresse

Nom
Adresse
Ville
Courriel

<address>
	...<br>
	...<br>
	...<br>
	<a href="mailto:#" title="">...</a>
</address>

Texte préformaté

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.

<pre>...
...</pre>

Texte coloré

Texte bleu

Texte vert

Texte orange

Texte rouge

<p class="text-blue">...</p>
<p class="text-green">...</p>
<p class="text-orange">...</p>
<p class="text-red">...</p>

Autres balises HTML

Balise abbreviation

Balise bold

Balise code

Balise ~~deleted~~

Balise emphasis

Balise italic

Balise mark

Balise small

Balise strong

Balise _subscript

Balise ^superscript

Balise underline

<abbr title="">...</abbr>
<b>...</b>
<code>...</code>
<del>...</del>
<em>...</em>
<i>...</i>
<mark>...</mark>
<small>...</small>
<strong>...</strong>
<sub>...</sub>
<sup>...</sup>
<u>...</u>

Grille

Colonnes basiques

<div class="grid">
	<div class="col sml-1 med-11 lrg-1">...</div>
	<div class="col sml-11 med-1 lrg-11">...</div>
</div>
<div class="grid">
	<div class="col sml-2 med-10 lrg-2">...</div>
	<div class="col sml-10 med-2 lrg-10">...</div>
</div>
<div class="grid">
	<div class="col sml-3 med-9 lrg-3">...</div>
	<div class="col sml-9 med-3 lrg-9">...</div>
</div>
<div class="grid">
	<div class="col sml-4 med-8 lrg-4">...</div>
	<div class="col sml-8 med-4 lrg-8">...</div>
</div>
<div class="grid">
	<div class="col sml-5 med-7 lrg-5">...</div>
	<div class="col sml-7 med-5 lrg-7">...</div>
</div>
<div class="grid">
	<div class="col sml-6">...</div>
	<div class="col sml-6">...</div>
</div>

Imbriquer des colonnes

<div class="grid">
	<div class="col sml-12">
		<div class="grid">
			<div class="col sml-6">
				<div class="grid">
					<div class="col sml-6 lrg-5">...</div>
					<div class="col sml-6 lrg-7">...</div>
				</div>
			</div>
			<div class="col sml-6">
				<div class="grid">
					<div class="col sml-6 lrg-7">...</div>
					<div class="col sml-6 lrg-5">...</div>
				</div>
			</div>
		</div>
	</div>
</div>

Décaler des colonnes

<div class="grid">
	<div class="col sml-4">...</div>
	<div class="col sml-5 sml-offset-3 med-4 med-offset-4 lrg-5 lrg-offset-3">...</div>
</div>
<div class="grid">
	<div class="col sml-3">...</div>
	<div class="col sml-6 sml-offset-3 med-5 med-offset-4 lrg-6 lrg-offset-3">...</div>
</div>
<div class="grid">
	<div class="col sml-2">...</div>
	<div class="col sml-7 sml-offset-3 med-6 med-offset-4 lrg-7 lrg-offset-3">...</div>
</div>

Centrer des colonnes

<div class="grid">
	<div class="col sml-6 sml-centered med-uncentered lrg-10 lrg-centered">...</div>
</div>
<div class="grid">
	<div class="col sml-8 sml-centered med-uncentered lrg-8 lrg-centered">...</div>
</div>
<div class="grid">
	<div class="col sml-10 sml-centered med-uncentered lrg-6 lrg-centered">...</div>
</div>

Pousser / tirer des colonnes

<div class="grid">
	<div class="col sml-4 sml-push-8 med-push-4 lrg-push-0">...</div>
</div>
<div class="grid">
	<div class="col sml-6 sml-push-6 lrg-push-0">...</div>
	<div class="col sml-6 sml-pull-6 lrg-pull-0">...</div>
</div>
<div class="grid">
	<div class="col sml-9 sml-push-3 med-push-0">...</div>
	<div class="col sml-3 sml-pull-9 med-pull-0">...</div>
</div>

Afficher / masquer des colonnes

<div class="grid">
	<div class="col sml-6 lrg-12">...</div>
	<div class="col sml-6 lrg-hide">...</div>
</div>
<div class="grid">
	<div class="col sml-12 med-6">...</div>
	<div class="col sml-hide med-6 med-show">...</div>
</div>
<div class="grid">
	<div class="col sml-12 lrg-6">...</div>
	<div class="col sml-hide lrg-6 lrg-show">...</div>
</div>

Tableau

Tableau basique

Mes produits
#	Article	Description de l'article	Prix
1	Article 1	Description de l'article	10,00 €
2	Article 2	Description de l'article	13,00 €
3	Article 3	Description de l'article	15,00 €

<table>
	<caption>...</caption>
	<thead>
		<tr>
			<th>...</th>
			<th>...</th>
			<th>...</th>
			<th>...</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>...</td>
			<td>...</td>
			<td>...</td>
			<td>...</td>
		</tr>
		<tr>
			<td>...</td>
			<td>...</td>
			<td>...</td>
			<td>...</td>
		</tr>
		<tr>
			<td>...</td>
			<td>...</td>
			<td>...</td>
			<td>...</td>
		</tr>
	</tbody>
</table>

Tableau scrollable

Mes produits
#	Article	Description	Prix
1	Article 1	Description de l'article	10,00 €
2	Article 2	Description de l'article	13,00 €
3	Article 3	Description de l'article	15,00 €

<div class="scrollable-table">
	<table>
		<caption>...</caption>
		<thead>
			<tr>
				<th>...</th>
				<th>...</th>
				<th>...</th>
				<th>...</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>...</td>
				<td>...</td>
				<td>...</td>
				<td>...</td>
			</tr>
			<tr>
				<td>...</td>
				<td>...</td>
				<td>...</td>
				<td>...</td>
			</tr>
			<tr>
				<td>...</td>
				<td>...</td>
				<td>...</td>
				<td>...</td>
			</tr>
		</tbody>
	</table>
</div>

Image

<img src="" alt="" title="">

<img class="img-circle" src="" alt="" title="">

<img class="img-rounded" src="" alt="" title="">

Légende d'image

<figure>
	<img src="" alt="" title="">
	<figcaption>...</figcaption>
</figure>

Cadre Responsive

<div class="frame">
	<iframe>...</iframe>
</div>

Formulaire

Étiquette

Mon label

<label>...</label>

Champs de saisie

<input type="text" value="">
<input type="text" placeholder="">
<input type="text" placeholder="" disabled>

Case à cocher

Label Case à cocher
Case à cocher désactivée

<label>...</label>
<input type="checkbox" checked> ...<br />
<input type="checkbox" disabled> ...

Bouton radio

Label Bouton radio
Bouton radio désactivé

<label>...</label>
<input type="radio" name="radio" checked> ...<br />
<input type="radio" name="radio" disabled> ...

Champ de fichier

<input type="file">
<input type="file" disabled>

Champ de sélection

<select>
	<optgroup label="">
		<option>...</option>
		<option>...</option>
	</optgroup>
	<optgroup label="">
		<option>...</option>
		<option>...</option>
	</optgroup>
</select>

<select disabled>
	<optgroup label="">
		<option>...</option>
		<option>...</option>
	</optgroup>
</select>

Zone de texte

<textarea rows="5"></textarea>
<textarea rows="5" disabled></textarea>

Boutons

<input type="submit" value="">
<input type="submit" value="" disabled>
<button type="button">...</button>
<button type="button" disabled>...</button>

Taille des boutons

<input type="submit" class="s1" value="">
<input type="submit" class="s2" value="">
<input type="submit" class="s3" value="">
<input type="submit" class="s4" value="">
<input type="submit" class="s5" value="">
<input type="submit" class="s6" value="">

Couleur des boutons

<input type="submit" class="blue" value="">
<input type="submit" class="green" value="">
<input type="submit" class="orange" value="">
<input type="submit" class="red" value="">
<input type="submit" class="yellow" value="">

Formulaire basique

<form>
	<fieldset>
		<div class="grid">
			<div class="col sml-12">
				<label>...</label>
				<input type="text" placeholder="">
			</div>
		</div>
		<div class="grid">
			<div class="col sml-12">
				<label>...</label>
				<input type="email" placeholder="">
			</div>
		</div>
		<div class="grid">
			<div class="col sml-12">
				<label>...</label>
				<textarea rows="5"></textarea>
			</div>
		</div>
		<div class="grid">
			<div class="col sml-12">
				<input type="submit" value="">
			</div>
		</div>
	</fieldset>
</form>

<form>
	<fieldset>
		<div class="grid">
			<div class="col sml-12 med-6">
				<label>...</label>
				<input type="text" placeholder="">
			</div>
			<div class="col sml-12 med-6">
				<label>...</label>
				<input type="email" placeholder="">
			</div>
		</div>
		<div class="grid">
			<div class="col sml-12">
				<label>...</label>
				<textarea rows="5"></textarea>
			</div>
		</div>
		<div class="grid">
			<div class="col sml-12">
				<input type="submit" value="">
			</div>
		</div>
	</fieldset>
</form>

<form>
	<fieldset>
		<div class="grid">
			<div class="col sml-12 med-3 label-centered">
				<label>...</label>
			</div>
			<div class="col sml-12 med-9">
				<input type="text" placeholder="">
			</div>
		</div>
		<div class="grid">
			<div class="col sml-12 med-3 label-centered">
				<label>...</label>
			</div>
			<div class="col sml-12 med-9">
				<input type="email" placeholder="">
			</div>
		</div>
		<div class="grid">
			<div class="col sml-12 med-3 label-centered">
				<label>...</label>
			</div>
			<div class="col sml-12 med-9">
				<textarea rows="5"></textarea>
			</div>
		</div>
		<div class="grid">
			<div class="col sml-12 med-9 med-offset-3">
				<input type="submit" value="">
			</div>
		</div>
	</fieldset>
</form>

Formulaire en ligne

<form class="inline-form">
	<fieldset>
		<label>...</label>
		<input type="text" placeholder="">
		<input type="password" placeholder="">
		<input type="submit" value="">
	</fieldset>
</form>

Menu horizontal

<ul class="menu">
	<li class="active"><a href="#">...</a></li>
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
</ul>

Menu vertical

<ul class="menu vertical">
	<li class="active"><a href="#">...</a></li>
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
</ul>

Menu élargi

<ul class="menu expanded">
	<li class="active"><a href="#">...</a></li>
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
</ul>

<ul class="menu vertical expanded">
	<li class="active"><a href="#">...</a></li>
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
</ul>

Menu Responsive

<div class="responsive-menu">
	<label for="...">...</label>
	<input type="checkbox" id="...">
	<ul class="menu">
		<li class="active"><a href="#">...</a></li>
		<li><a href="#">...</a></li>
		<li><a href="#">...</a></li>
		<li><a href="#">...</a></li>
	</ul>
</div>

<div class="responsive-menu">
	<label for="...">...</label>
	<input type="checkbox" id="...">
	<ul class="menu vertical">
		<li class="active"><a href="#">...</a></li>
		<li><a href="#">...</a></li>
		<li><a href="#">...</a></li>
		<li><a href="#">...</a></li>
	</ul>
</div>

Fil d'ariane

<ul class="menu breadcrumb">
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
	<li class="active"><a href="#">...</a></li>
</ul>

<ul class="menu breadcrumb expanded">
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
	<li class="active"><a href="#">...</a></li>
</ul>

Pagination

Pagination à gauche

«
- 1
- 2
- 3
- 4
- ...
- 15
»

<div class="pagination">
	<ul>
    	<li class="prev"><a href="#">«</a></li>
    	<li>
      		<ul>
        		<li class="active"><a href="#">1</a></li>
          		<li><a href="#">2</a></li>
          		<li><a href="#">3</a></li>
          		<li><a href="#">4</a></li>
          		<li class="disabled">...</li>
          		<li><a href="#">15</a></li>
        	</ul>
      	</li>
    	<li class="next"><a href="#">»</a></li>
  	</ul>
</div>

Pagination centrée

«
- 1
- 2
- 3
- 4
- ...
- 15
»

<div class="pagination text-center">
	<ul>
    	<li class="prev"><a href="#">«</a></li>
    	<li>
      		<ul>
        		<li class="active"><a href="#">1</a></li>
          		<li><a href="#">2</a></li>
          		<li><a href="#">3</a></li>
          		<li><a href="#">4</a></li>
          		<li class="disabled">...</li>
          		<li><a href="#">15</a></li>
        	</ul>
      	</li>
    	<li class="next"><a href="#">»</a></li>
  	</ul>
</div>

Pagination à droite

«
- 1
- 2
- 3
- 4
- ...
- 15
»

<div class="pagination text-right">
	<ul>
    	<li class="prev"><a href="#">«</a></li>
    	<li>
      		<ul>
        		<li class="active"><a href="#">1</a></li>
          		<li><a href="#">2</a></li>
          		<li><a href="#">3</a></li>
          		<li><a href="#">4</a></li>
          		<li class="disabled">...</li>
          		<li><a href="#">15</a></li>
        	</ul>
      	</li>
    	<li class="next"><a href="#">»</a></li>
  	</ul>
</div>

Pagination justifée

Previous
- 1
- 2
- 3
- 4
- ...
- 15
Next

<div class="pagination text-center">
	<ul>
    	<li class="prev"><a href="#">«</a></li>
    	<li>
      		<ul>
        		<li class="active"><a href="#">1</a></li>
          		<li><a href="#">2</a></li>
          		<li><a href="#">3</a></li>
          		<li><a href="#">4</a></li>
          		<li class="disabled">...</li>
          		<li><a href="#">15</a></li>
        	</ul>
      	</li>
    	<li class="next"><a href="#">»</a></li>
  	</ul>
</div>

Autres composants

Information

<button onclick="$('#modal-info').show()">Afficher</button>

<div id="modal-info" style="display:none">
	<div class="modal-mask">
		<div class="modal-container">
			<div class="modal-header">
				<button class="modal-btn-close float-right" onclick="$('#modal-info').hide()"></button>
				<div class="modal-title h1 text-blue">Information</div>
			</div>
			<div class="modal-body">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
			</div>
		</div>
	</div>
</div>

Dialogue

<button onclick="$('#modal-dialog').show()">Afficher</button>

<div id="modal-dialog" style="display:none">
	<div class="modal-mask">
		<div class="modal-container">
			<div class="modal-header">
				<button class="modal-btn-close float-right" onclick="$('#modal-dialog').hide()"></button>
				<div class="modal-title h1 text-blue">Dialog</div>
			</div>
			<div class="modal-body">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
			</div>
			<div class="modal-footer">
				<button class="blue" onclick="alert('Saving...')">Save changes</button>
				<button onclick="$('#modal-dialog').hide()">Cancel</button>
			</div>
		</div>
	</div>
</div>

Formulaire

<button onclick="$('#modal-form').show()">Afficher</button>

<div id="modal-form" style="display:none">
	<div class="modal-mask">
		<div class="modal-container">
			<div class="modal-header">
				<button class="modal-btn-close float-right" onclick="$('#modal-form').hide()"></button>
				<div class="modal-title h1 text-blue">Dialog</div>
			</div>
			<div class="modal-body">
				<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
				</p>
				<p>
					<label for="fld1">Field 1</label>
					<input id="fld1" name="fld1" type="text" placeholder="field 1">
				</p>
				<p>
					<label for="fld2">Field 2</label>
					<textarea id="fld2" name="fld2" rows="5"></textarea>
				</p>
			</div>
			<div class="modal-footer">
				<button class="blue" onclick="alert('Saving...')">Save changes</button>
				<button onclick="$('#modal-form').hide()">Cancel</button>
			</div>
		</div>
	</div>
</div>

Galerie

<ul class="gallery sml-12 med-6 lrg-3">
	<li><img src="" title=""></li>
	<li><img src="" title=""></li>
	<li><img src="" title=""></li>
	<li><img src="" title=""></li>
</ul>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.
Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.

<ul class="gallery sml-12 med-12 lrg-6">
	<li>...</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

Alerte

Info : Lorem ipsum dolor sit amet!

Success : Lorem ipsum dolor sit amet!

Warning : Lorem ipsum dolor sit amet!

Error : Lorem ipsum dolor sit amet!

<div class="alert blue">
	<strong><a href="#" title="">...</a></strong>...
</div>
<div class="alert green">
	<strong><a href="#" title="">...</a></strong>...
</div>
<div class="alert orange">
	<strong><a href="#" title="">...</a></strong>...
</div>
<div class="alert red">
	<strong><a href="#" title="">...</a></strong>...
</div>

Bouton

Mon lien

<a href="#" class="button">...</a>

Mon lien Mon lien Mon lien Mon lien Mon lien Mon lien

<a href="#" class="button s1">...</a>
<a href="#" class="button s2">...</a>
<a href="#" class="button s3">...</a>
<a href="#" class="button s4">...</a>
<a href="#" class="button s5">...</a>
<a href="#" class="button s6">...</a>

Mon lien Mon lien Mon lien Mon lien Mon lien

<a href="#" class="button blue">...</a>
<a href="#" class="button green">...</a>
<a href="#" class="button orange">...</a>
<a href="#" class="button red">...</a>
<a href="#" class="button yellow">...</a>

Badge

Commentaires12 Commentaires12

<a href="#">...<span class="badge">...</span></a>

<a href="#">...<span class="badge sup">...</span></a>

<ul class="menu">
	<li class="active"><a href="#">...<span class="badge">...</span></a></li>
	<li><a href="#">...<span class="badge">...</span></a></li>
	<li><a href="#">...<span class="badge">...</span></a></li>
	<li><a href="#">...<span class="badge">...</span></a></li>
</ul>

<ul class="menu vertical">
	<li class="active"><a href="#">...<span class="badge">...</span></a></li>
	<li><a href="#">...<span class="badge">...</span></a></li>
	<li><a href="#">...<span class="badge">...</span></a></li>
	<li><a href="#">...<span class="badge">...</span></a></li>
</ul>

<ul class="menu expanded">
	<li class="active"><a href="#">...<span class="badge">...</span></a></li>
	<li><a href="#">...<span class="badge">...</span></a></li>
	<li><a href="#">...<span class="badge">...</span></a></li>
	<li><a href="#">...<span class="badge">...</span></a></li>
</ul>

<ul class="menu vertical expanded">
	<li class="active"><a href="#">...<span class="badge">...</span></a></li>
	<li><a href="#">...<span class="badge">...</span></a></li>
	<li><a href="#">...<span class="badge">...</span></a></li>
	<li><a href="#">...<span class="badge">...</span></a></li>
</ul>

Étiquette

Mon titreNouveau

<h3>...<span class="label">...</span></h3>

Mon lienNouveau

<a href="#" title="">...<span class="label">...</span></a>

Barre de progression

100%

<div class="progress">
		<span style="width: 100%;">100%</span>
</div>

25%

<div class="progress">
		<span style="width: 25%;">25%</span>
</div>

<div class="progress">
		<span style="width: 2%;">2%</span>
</div>

<div class="progress">
		<span style="width: 0%;">0%</span>
</div>

<ul>
<li><a class="tooltip tooltip-top" href="#">en haut<span>Bulle d'information en haut</span></a></li>
<li><a class="tooltip tooltip-right" href="#">à droite<span>Bulle d'information à droite</span></a></li>
<li><a class="tooltip tooltip-bottom" href="#">en bas<span>Bulle d'information en bas</span></a></li>
<li><a class="tooltip tooltip-left" href="#">à gauche<span>Bulle d'information à gauche</span></a></li>
</ul>

Helper

Classe	Code CSS
.h1, .s1	`font-size: 2.5rem;`
.h2, .s2	`font-size: 2rem;`
.h3, .s3	`font-size: 1.67rem;`
.h4, .s4	`font-size: 1.5rem;`
.h5, .s5	`font-size: 1.33rem;`
.h6, .s6	`font-size: 1.17rem;`
.heading-large	`font-size: 8rem;`
.heading-medium	`font-size: 6.5rem;`
.heading-small	`font-size: 4rem;`
.text-left	`text-align: left;`
.text-center	`text-align: center;`
.text-right	`text-align: right;`
.text-justify	`text-align: justify;`
.float-left	`float: left;`
.float-center	`margin-left: auto; margin-right: auto;`
.float-right	`float: right;`
.float-none	`float: none;`
.show	`display: block;`
.hide	`display: none;`
.full-width	`width: 100%;`
.width-auto	`width: auto;`
.no-margin	`margin: 0;`
.no-padding	`padding: 0;`

Documentation de PluCSS

Bien démarrer avec PluCSS

Conteneur et grille

Typographie

Helper

Typographie

Titres

Titre H1

Titre H2

Titre H3

Titre H4

Titre H5

Titre H6

Titre

Titre

Titre

Paragraphe

Liens

Listes

Blockquote

Adresse

Texte préformaté

Texte coloré

Autres balises HTML

Grille

Colonnes basiques

Imbriquer des colonnes

Décaler des colonnes

Centrer des colonnes

Pousser / tirer des colonnes

Afficher / masquer des colonnes

Tableau

Tableau basique

Tableau scrollable

Image

Image

Légende d'image

Cadre Responsive

Formulaire

Étiquette

Champs de saisie

Case à cocher

Bouton radio

Champ de fichier

Champ de sélection

Zone de texte

Boutons

Taille des boutons

Couleur des boutons

Formulaire basique

Formulaire en ligne

Navigation

Menu horizontal

Menu vertical

Menu élargi

Menu Responsive

Fil d'ariane

Pagination

Pagination à gauche

Pagination centrée

Pagination à droite

Pagination justifée

Autres composants

Fenêtre modale

Information

Dialogue

Formulaire

Galerie

Alerte

Bouton

Badge

Étiquette

Mon titreNouveau

Barre de progression

Bulle d'information

Helper