Top

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

Besoin d'aide?

Rendez-vous sur le forum de PluXml, posez vos questions, et participez aux discussions.

Forum de PluXml

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>

Titres

Titre

Titre

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>

Lien

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>
  1. Liste de premier niveau
  2. 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

1
2
1
2
1
2
1
2
1
2
1
2
<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

1
1
1
2
1
1
2
<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

1
2
1
2
1
2
<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

1
1
1
<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

1
1
2
1
2
<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

1
2
1
2
1
2
<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

Image

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

Légende d'image

pictire
Légende de l'image
<figure>
	<img src="" alt="" title="">
	<figcaption>...</figcaption>
</figure>

Cadre Responsive

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

Formulaire

Étiquette

<label>...</label>

Champs de saisie

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

Case à cocher

Case à cocher
Case à cocher désactivée
<label>...</label>
<input type="checkbox" checked> ...<br />
<input type="checkbox" disabled> ...

Bouton radio

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="h1" value="">
<input type="submit" class="h2" value="">
<input type="submit" class="h3" value="">
<input type="submit" class="h4" value="">
<input type="submit" class="h5" value="">
<input type="submit" class="h6" value="">
<input type="submit" class="blue" value="">
<input type="submit" class="green" value="">
<input type="submit" class="orange" value="">
<input type="submit" class="red" 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>

Navigation

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>

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>

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>

Autres composants

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>
<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 h1">...</a>
<a href="#" class="button h2">...</a>
<a href="#" class="button h3">...</a>
<a href="#" class="button h4">...</a>
<a href="#" class="button h5">...</a>
<a href="#" class="button h6">...</a>
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>

Badge

Commentaires12
<a href="#">...<span class="badge">...</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>
2%
<div class="progress">
		<span style="width: 2%;">2%</span>
</div>
0%
<div class="progress">
		<span style="width: 0%;">0%</span>
</div>

Helper

Classe Code CSS
.h1 font-size: 2.5rem;
.h2 font-size: 2rem;
.h3 font-size: 1.67rem;
.h4 font-size: 1.5rem;
.h5 font-size: 1.33rem;
.h6 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;