Documentation de PluCSS

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

Exemple de template HTML5

<!DOCTYPE html>
<html lang="...">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>...</title>
		<link rel="stylesheet" href="css/plucss.css">
	</head>
	<body>
		...
	</body>
</html>

Conteneur

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.

<div class="container">
	...
</div>

Grille

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

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: helvetica, arial, sans-serif; line-height: 1.4; 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 et les menus élargis.

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