Démos

<ul class='mymenu'>
	<li class='first current' onclick='setcurrenttab(this);'><a href='#'><p>Home</p></a></li>
	<li onclick='setcurrenttab(this);'><a href='#'><p>About Us</p></a></li>
	<li onclick='setcurrenttab(this);'><a href='#'><p>Contact</p></a></li>
	<li onclick='setcurrenttab(this);' class='last'><a href='#'><p>Sign In</p></a></li>
</ul>

<script type='text/javascript'>
function setcurrenttab(elem)
{
	$('.mymenu li').each(function(i,e){
		$(e).removeClass('current');
	});
	$(elem).toggleClass('current');
}
</script>

FormulaireTop of the page

Code GénéréTop of the page

Preset GénéréTop of the page

Manuel d'UtilisationTop of the page

A quoi ca sert ?

Ce script permet de générer du CSS dynamiquement, en fonction de vos besoins. Pour cela il vous suffit de modifier les valeurs du formulaire puis de le valider afin d'observer le résultat.La partie "Code généré" vous permet de copier/coller le code afin de l'insérer dans votre page plus facilement (a l'intérieur du header bien évidemment)

Comment l'utiliser ?

Première méthode

La première méthode est la méthode actuelle, le script par défaut réagit en affichant les démos, le formulaire, le code généré ainsi que ce manuel.

deuxième méthode

La seconde méthode n'est pas conseillée a l'utilisation. Elle permet d'utiliser ce script a distance. Pour cela il vous suffit de passer en GET les valeurs des paramètres ainsi que "s=1" afin de ne récupérer QUE le code CSS.

Liste des variables modifiables :

Voici la liste des variables que le script prend en compte pour cet élément (ici le menu)

Documentation :Top of the page

1. le controlleur

La partie "controlleur" est gérée par le fichier index.php. Il effectue dans l'ordre les taches suivantes :

• Récupère les librairies nécessaires puis crée les objets Request et CSSForm.
• Récupère les données nécessaires au lancement d'un module, ou utilise les valeurs par défaut.
• Inclut les fichiers du module demandé.
• Inclut le template global si demandé.

2. le template

La partie template est assurée par template.php.

C'est lui qui possède le plus de code HTML. Le code PHP qu'il contient se limite a des echo de variables. Il met en place la page de la manière suivante :

• #navbar : les menus de navigation.
• #required : affichée dans certains modules, décrit les pré requis.
• #demo : affiche une démo live ainsi que son code html.
• #form : affiche le formulaire afin de modifier la démo en live.
• #code : affiche le code généré ainsi que le preset généré.
• #user : affiche le manuel d'utilisation

3. les modules

Les modules sont des groupes de 2 fichiers :

• Mymodulecss.php
• Mymodulepresets.php

Ces fichiers sont inclus par le controlleur lors de l'appel a la page.

1. Mymodulecss.php :

   Ce fichier génère toutes les variables utilisées par le template :

   • $titre : titre affiché par la page html
   • $required : Texte expliquant les pré requis pour le module
   • $vars : tableau associatif décrivant les variables modifiables et leur valeur par défaut
   • $code : contient le code CSS généré. utilise bien entendu les variables de $vars.
   • $demos : contient le code de la démo live.
   • $form : contient le code du formulaire. Ce code est généré en fonction de $vars par l'objet CSSForm (méthode Display)
   • $preset : contient le code du formulaire des presets, généré a partir de $presets.
2. Mymodulepresets.php

   Ce fichier contient les différents presets disponibles. Ces presets sont contenus dans le tableau $presets.

4. la page html

• Partie Formulaire :
  1. General Details :

     Affiche les détails généraux concernant le CSS comme le nom de la classe générée.

  2. Global Details :

     Affiche les différents paramètres globaux concernant le CSS. Ces paramètres ne sont pas affectés par un évènement quelconque comme "hover", "active" ou "visited".

  3. Normal & Hover Detais :

     Affiche les différents paramètres spécifiques a un état de l'objet

     • normal pour gérer l'affichage de l'objet en temps normal
     • hover pour gérer l'affichage de l'objet lorsque la souris le survole.

  Le générateur de CSS du menu génère une classe "current" utilisée par le javascript de la démo, qui permet de garder en mémoire le dernier onglet cliqué. Attention : Si vous souhaitez utiliser le code de la démo, il vous FAUT copier le code javascript AUSSI. Sans quoi le premier onglet restera en surbrillance (sauf amélioration du code de votre part bien entendu)

• Partie Code :
  1. Code généré :

     Affiche le code CSS généré, un clic sur la zone sélectionne le tout.

  2. 2. Preset Généré :

     Affiche le preset généré. Si vous souhaitez que votre preset soit disponible sur la page du générateur, il vous suffit de m'envoyer un mail avec ce code, le titre que vous lui donnez ainsi que votre nom/prenom/pseudonyme. Je me chargerai de le mettre en ligne au plus tot.

• Partie Manuel :
  1. Manuel d'utilisation :

     Cette partie explique comment utiliser le générateur de CSS.

  2. Explications sur le code :

Documentation des classes utiliséesTop of the page

2 classes ont été créées pour que les générateurs fonctionnent :

• Request
• CSSForm

Je travaille actuellement sur deux autres classes... comme les résultats obtenus sont un peu trop rapides pour moi, j'essaie de continuer a innover, sans pour autant optimiser le code. Ces deux nouvelles classes ne sont peut être pas obligatoires et feront sans doute l'objet d'une fusion avec une existante plus tard. Voici donc les deux nouvelles classes qui vont bientot faire leur apparition :

• Parser
• CSSConfig

La classe Request

La classe request est une classe qui me sert d'interface avec la variable php $_REQUEST. Pour l'instant elle n'est constituée que de peu de méthodes. Voici lesquelles :

• Request():

  Rapatrie toutes les variables de $_REQUEST dans $this->params.

• hasParameter(string):

  Renvoie vrai si le paramètre nommé existe. Faux sinon.

• getParameter(string)

  Renvoie la valeur du paramètre nommé

• Retrieve(array)

  Le tableau passé en paramètre énumère des variables ainsi que leur valeur par défaut. La fonction définit les variables comme globales et leur affecte soit la valeur par défaut, soit celle passée en paramètre.

• Filter(string)

  Cette fonction utilise le tableau statique de la classe self::$forbidden. Ce tableau dit quelles valeurs ne sont pas autorisées pour telle ou telle variable.La fonction renvoie true si la valeur est acceptable, false sinon.

La classe CSSForm

Attributs :

Cette classe permet de générer dynamiquement des formulaires destinés a modifier un CSS. Pour cela, plusieurs attributs statiques sont déclarés :

• $config :

  propriété la plus importante. Elle définit le nom des variables, leur label, ainsi que le type d'input qui leur correspond. Par exemple, c'est elle qui dit que la variable CN aura pour label "Class Name" et sera renseignée par un TextInput

• $checkboxvalue :

  Cette propriété détermine la valeur que doivent prendre les checkbox pour les variables qui en utilisent. Par exemple, elle spécifie que la variable ld (pour Link Decoration) utilise une checkbox avec la valeur "underline". Si cette checkbox n'est pas cochée, la variable prendra alors la valeur par défaut : "none".

• $alignments :

  Ce tableau énumère les différents alignements possibles ainsi qu'un label pour l'afficher. Sert dans la méthode AlignInput

• $borderstyles :

  Ce tableau énumère les différents styles de bordure ainsi qu'un label pour les afficher. Sert dans la méthode BorderInput

• $inputs :

  définit les méthodes a utiliser lorsque l'on génère le champ de formulaire d'une variable. On trouve cette méthode grace au tableau config qui spécifie quel type d'input doit être utilisé

Méthodes :

Cette classe a aussi bien évidemment quelques méthodes permettant principalement de générer du code HTML pour les formulaires. Les voici :

• TextInput() :

  Génère un champ de saisie de texte afin d'y entrer une valeur comme "10px"

• BorderInput() :

  Génère un select afin d'y choisir un style de bordure

• BoxInput() :

  Génère une checkbox afin d'activer ou non une option (comme la décoration des liens)

• ColorInput() :

  Génère un champ de saisie de texte qui fait apparaitre une palette de couleur

• AlignInput() :

  Génère un select afin d'y choisir un type d'alignement.

• Display($nom,$vars,$options) :

  Fonction utilisée par les modules. C'est elle qui fait tout le travail de génération. Elle génère un fieldset avec le nom $name, puis les inputs des variable qui y sont liées dans le tableau $vars. $options permet d'ajouter des options a tel ou tel input.

• presetForm() :

  Cette fonction permet de générer le formulaire des presets.

• toPreset() :

  Cette fonction génère le code a afficher dans la partie "code généré - Preset"