Documentation

Auto_css permet de générer des fichiers css à partir de fichiers masters et de raccourcis personnels, d'une syntaxe native et de fonctions de génération de contenu.
Auto_css est capable de détecter les changements apportés à un des masters css ou à sa propre configuration pour régénérer automatiquement les fichiers css finaux.
Si aucun changement n'est apporté, il ne régénère pas les fichiers css et évite ainsi une charge serveur trop importante.

1- INSTALLATION

- Copiez le fichier dans le même dossier que les fichiers css, ce qui est le plus logique. Vous pouvez toutefois le mettre ailleurs.
- Ajoutez la ligne suivante dans le fichier appelant normalement les feuilles de style <?php include('CHEMIN/VERS/auto_css.php'); ?>
C'est tout !

2- CONFIGURATION

Tout d'abord, il faut préciser le nom des fichiers css à traiter. On peut donner autant de fichiers que l'on veut en les ajoutant dans l'array(): $css_files=array( 'style.css', 'style_admin.css', ); Vous pouvez ensuite configurer le comportement d'auto_css de deux façons différentes:

2-1 - Dans la rubrique AUTO_CSS CONFIG du fichier auto_css.php, plusieurs variables permettent de configurer auto-css:

$auto_css['merge_css_files']=false; :

Si vous avez plusieurs fichiers css à traiter, ils peuvent être mixés en un seul fichier css afin d'optimiser le nombre de requêtes serveur. Par défaut à false, il suffit de passer à true.

$auto_css['minifie']=true;

Supprime tout caractère inutile afin d'optimiser le poids du ou des fichiers css (fonction récupérée chez Seebz, merci à lui ^^).

$auto_css['auto_add_PIE']=false;

Cette option ajoute les comportements de Pie (une demande d'Idleman à l'origine)

$auto_css['pie_path']='PIE.php';

Le chemin vers le fichier pie (.htc ou .php, voir la doc de css3pie pour plus d'infos)

$auto_css['media']='screen';

Permet de préciser le contenu de la balise media=""

$auto_css['reset_css']=true;

Ajoute automatiquement une reset css (celle de HTML5Doctor.com).

$auto_css['auto_add_css_links']=true;

Ajoute automatiquement le lien html vers la ou les feuille(s) de style.

$auto_css['path_to_css_file']='';

TRES IMPORTANT si tous vos fichiers (css,php) ne sont pas dans le même dossier, comme dans le cas d'un site utilisant des themes par exemple.
Il faut préciser ici le chemin qui part du fichier appelant auto_css.php jusqu'audossier des fichiers css.
Ne pas oublier le "/" final.
Cette variable peut être attribuée à partir d'une autre variable système dans un cms

$auto_css['path_to_css_file']=$config['theme_path'] par exemple...
plus généralement, ce sera $auto_css['path_to_css_file']='css/';

$auto_css['allow_auto_css_regex_replacement']=true;

Autorise auto_css à utiliser sa syntaxe native.
Si vous souhaitez éviter d'utiliser les commandes natives d'auto_css, passez à false cette variable

2-2 - Directement dans le master css

Depuis la version 1.3, vous pouvez configurer auto_css directement depuis le fichier css via la commande config() placée dans un espac de commentaire (voir la partie 3 sur les commandes et variables ci-dessous):
config(auto_add_css_links,"true") dans le master css est identique à $auto_css['auto_add_css_links']=true; dans le fchier auto_css.php

3- UTILISATION DANS LE FICHIER CSS

Pour utiliser des variables ou des fonctions dans le fichier css, il suffit de les mettre dans des commentaires: /* ... */
Vous pouvez faire un seul bloc de commentaires d'initialisation ou plusieurs... Tout ce qui n'est pas un format VARIABLE="valeur" ou VARIABLE=fontion(ARGUMENTS) sera considéré comme un commentaire.

A- Créer des variables contenant une chaine de remplacement

Ainsi, vous pouvez créer des variables qui seront remplacées par leur contenu dans le fichier css: /* Cette ligne ne sera pas interprétée Couleur_de_fond="#F00" Couleur_de_texte="white" Bouton_arrondi="roundc 10 vgradient #F00 #0F0 boxraise 1 boxshadow 0 2" */ Ce système permet d'utiliser une variable dans une autre: /* Couleur_de_fond="#F00" Couleur_de_texte="white" Bouton_arrondi="roundc 10 vgradient Couleur_de_fond Couleur_de_texte boxraise 1 boxshadow 0 2" */

B- Utiliser les fonctions d'auto_css pour manipuler des variables ou des valeurs

darken(COULEUR, POURCENTAGE): assombrit une couleur de x%

lighten(COULEUR, POURCENTAGE): éclaircit une couleur de x%

reverseColor(COULEUR): inverse une couleur.

dimensions(path_to_images): renvoie 'width:LARGEUR DE L'IMAGE;Height:HAUTEUR DE L'IMAGE;

/* Couleur_de_fond="#F00" couleur_plus_sombre=darken(Couleur_de_fond,50) mais aussi couleur_plus_sombre=darken(#F00,50) couleur_plus_claire=lighten(Couleur_de_fond,50) mais aussi couleur_plus_claire=lighten(#F00,50) couleur_plus_claire=reverse(Couleur_de_fond) mais aussi couleur_plus_claire=reverse(#F00) Logo automatique chemin_logo="img/logo" dimensions_logo=dimensions(chemin_logo) dans le css lui-même: div.logo{background-image:url(chemin_logo);dimensions_logo} Ainsi, on peut changer le nom de fichier et le css s'adapte automatiquement. Si on change l'image en conservant le nom, les dimensions s'adapteront tout de même en régénérant le fichier css */

C- Une syntaxe propre à auto_css pour créer rapidement du code css

Cette fonction d'auto_css n'était pas prévue au début mais elle en devient la fonction principale ^^.
J'ai implémenté une liste de commandes toutes prêtes qui raccourcissent et simplifient les css.
Les commandes suivantes peuvent être utilisées dans les balises css ou être implémentées dans des variables: /* Commandes dans une variable VARIABLE="txtc txtshadow underon" */ ou alors a{txtshadow underoff} Elles supportent de plus l'argument !important

» COMMANDES DE TEXTE

> txtl

text-align: left;

> txtr

text-align: right;

> txtc

text-align: center;

> txtj

text-align: justify;

> txti

font-style: italic;

> txtb

font-weight: bold;

> txtxb

font-weight: bolder;

> underon

text-decoration: underline;

> strikeon

text-decoration:line-through;

> overon

text-decoration:overline;

> underoff|overoff|strikeoff

text-decoration: none;

> txtshadow

text-shadow: 0px 1px 1px black;

> txtsmooth COULEUR

Adoucit un texte via un ombrage léger

> txtshadowoff|txtsmoothoff

text-shadow: none;

> txtemboss

Effet de texte gravé

> txthalo COULEUR

Crée un halo coloré autour d'un texte

> txtblur INTENSITE COULEUR

Crée un effet de flou sur un texte

> capital

text-transform:capitalize;

> ucase

text-transform:uppercase;

> lcase

text-transform:lowercase;

> lh TAILLE (UNITE FACULTATIVE)

line-height: TAILLE; (si aucune unité n'est précisée, auto_css utilisera l'unité par défaut, fixée dans $auto_css['default_unit'])

» COMMANDES DE POLICES

> fs TAILLE (UNITE FACULTATIVE)

font-size: TAILLE; (si aucune unité n'est précisée, auto_css utilisera l'unité par défaut, fixée dans $auto_css['default_unit'])

> smallcaps

font-variant:small-caps;

> ff_impact

font-family: Impact, Charcoal, sans-serif;

> ff_palatino

font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

> ff_tahoma

font-family: Tahoma, Geneva, sans-serif;

> ff_century

font-family: Century Gothic, sans-serif;

> ff_lucida

font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;

> ff_verdana

font-family: Verdana, Geneva, sans-serif;

> ff_copperplate

font-family: Copperplate / Copperplate Gothic Light, sans-serif;

> ff_gill

font-family: Gill Sans / Gill Sans MT, sans-serif;

> ff_trebuchet

font-family: 'Trebuchet MS', Helvetica, sans-serif;

> ff_courrier

font-family: 'Courier New', Courier, monospace;

> ff_georgia

font-family: Georgia, Serif;

> ff_bitter

font-family: 'Bitter';

> ff_myriad

font-family: 'Myriad Pro', Arial, Helvetica, Tahoma, sans-serif;

> ff_times

Font-Family: 'Times New Roman', Times, serif;

» COMMANDES DE PADDING

> pad TAILLE (UNITE FACULTATIVE)

padding : TAILLE; (si aucune unité n'est précisée, auto_css utilisera l'unité par défaut, fixée dans $auto_css['default_unit'])

> padt TAILLE (UNITE FACULTATIVE)

padding-top : TAILLE; (si aucune unité n'est précisée, auto_css utilisera l'unité par défaut, fixée dans $auto_css['default_unit'])

> padb TAILLE (UNITE FACULTATIVE)

padding-bottom : TAILLE; (si aucune unité n'est précisée, auto_css utilisera l'unité par défaut, fixée dans $auto_css['default_unit'])

> padl TAILLE (UNITE FACULTATIVE)

padding-left : TAILLE; (si aucune unité n'est précisée, auto_css utilisera l'unité par défaut, fixée dans $auto_css['default_unit'])

> padr TAILLE (UNITE FACULTATIVE)

padding-right : TAILLEpx; (si aucune unité n'est précisée, auto_css utilisera l'unité par défaut, fixée dans $auto_css['default_unit'])

» COMMANDES DE MARGIN

> mar TAILLE (UNITE FACULTATIVE)

margin : TAILLE; (si aucune unité n'est précisée, auto_css utilisera l'unité par défaut, fixée dans $auto_css['default_unit'])

> mart TAILLE (UNITE FACULTATIVE)

margin-top : TAILLE; (si aucune unité n'est précisée, auto_css utilisera l'unité par défaut, fixée dans $auto_css['default_unit'])

> marb TAILLE (UNITE FACULTATIVE)

margin-bottom : TAILLE; (si aucune unité n'est précisée, auto_css utilisera l'unité par défaut, fixée dans $auto_css['default_unit'])

> marl TAILLE (UNITE FACULTATIVE)

margin-left : TAILLE; (si aucune unité n'est précisée, auto_css utilisera l'unité par défaut, fixée dans $auto_css['default_unit'])

> marr TAILLE (UNITE FACULTATIVE)

margin-right : TAILLE; (si aucune unité n'est précisée, auto_css utilisera l'unité par défaut, fixée dans $auto_css['default_unit'])

> marauto

margin:0 auto;

» EFFETS VISUELS

> boxshadow DISTANCE TAILLE

Crée l'ombre d'un objet (crossbrowser)

> insetshadow DISTANCE TAILLE

Crée une ombre à l'intérieur d'un objet (crossbrowser)

> opacity NIVEAU

Fixe l'opacité d'un objet (crossbrowser)

> vgradient COULEUR1 COULEUR2

Crée un dégradé vertical (crossbrowser)

> hgradient COULEUR1 COULEUR2

Crée un dégradé horizontal (crossbrowser)

> boxhalo COULEUR

Crée un halo autour d'un objet (crossbrowser)

> insethalo COULEUR

Crée un halo à l'intérieur d'un objet (crossbrowser)

> boxemboss TAILLE

Crée un effet de creux sur un objet

> boxraise TAILLE

Crée un effet de relief sur un objet

» COINS ARRONDIS

> roundc TAILLE

Coins arrondis (crossbrowser)

> leafleft TAILLE

Coins arrondis en haut à gauche et en bas à droite

> leafright TAILLE

Coins arrondis en haut à droite et en bas à gauche

> roundtop TAILLE

Coins supérieurs arrondis

> roundbottom TAILLE

Coins inférieurs arrondis

> roundleft TAILLE

Coins gauches arrondis

> roundright TAILLE

Coins droits arrondis

» COMMANDES DE CURSEUR

> curhand

cursor: pointer;

> curcros

cursor: crosshair;

> curarro

cursor: default;

> curtext

cursor: text;

> curwait

cursor: wait;

> curhelp

cursor: help;

> curnowe

cursor: nw-resize;

> cureast

cursor: ne-resize;

> cursout

cursor: s-resize;

> cursoes

cursor: se-resize;

» COMMANDES DE TRANSITION (CSS3 UNIQUEMENT)

> transitall TEMPS s|ms ease-in|ease-out|ease-in-out|linear

Fixe l'effet de transition de tous les effets
ex: transitall 500ms , transitall 1s ease-in

> resize RATIO

Redimensionne un objet
ex: resize 2 (double), resize 0.5 (moitié)

> xsize RATIO

Redimensionne la largeur de l'objet

> ysize RATIO

Redimensionne la hauteur de l'objet

> move DISTANCE_X DISTANCE_Y

Déplace un objet: si DISTANCE est positif, vers la droite ou le bas, si DISTANCE est négatif, vers la gauche ou le haut.

> rotate ANGLE

Tourner un objet

» COMMANDES DE MEDIAQUERIES

> @all

@media all and

> @screen

@media screen and

> @tv

@media tv and

> &&

and

> !!

not

> miniscreen

(max-device-width: 320px)

> mobile

(max-device-width: 480px)

> portrait

(orientation: portrait)

> landscape

(orientation: landscape)

> max TAILLE (UNITE FACULTATIVE)

(max-device-width:TAILLEpx)

> min TAILLE (UNITE FACULTATIVE)

(min-device-width:TAILLEpx)

» COMMANDES DIVERSES

> minh TAILLE (UNITE FACULTATIVE)

Min-height crossbrowser (si aucune unité n'est précisée, auto_css utilisera l'unité par défaut, fixée dans $auto_css['default_unit'])

> noselect

Empêche la sélection par l'utilisateur (crossbrowser)

> antioverflow

Empêche le débordement de <pre> (crossbrowser)

> noresiz

Empêche le redimensionnemment des textareas dans Chrome

> hideme

display:none;

> disbl

display:block;

> disin

display:inline;

> disib

display:inline-block;

> flol

float:left;

> flor

float:right;

> floc

clear:both;

» PSEUDO ELEMENTS

> fot

first-of-type ex: p:fot{}

> lot

last-of-type ex: p:lot{}

> oot

only-of-type ex: p:oot{}

> fch

first-child ex: p:fch{}

> lch

last-child ex: p:lch{}

> och

only-child ex: p:och{}

> flet

first-letter ex: p:flet{}

> flin

first-line ex: p:flin{}

> even/pair

nth_child(even) ex: p:even{}/p:pair{}

> odd/impair

nth_child(odd) ex: p:odd{}/p:impair{}

» COMMANDES FILTER EXPERIMENTALES

> desaturate [INTENSITE]

Désature une image (si un nb est précisé, il désature de xx% sinon, 100%))

> sepia [INTENSITE]

Change une image en sépia (si un nb est précisé, de xx% sinon, 100%)

> negative [INTENSITE]

Change une image en négatif (si un nb est précisé, de xx% sinon, 100%)

> blur [INTENSITE]

Floute une image (le nombre est en pixels sans préciser l'unité, ex: blur 5)