Forums Développement Multimédia

Aller au contenu

CSSBuilder : un bout de code php pour dynamiser le CSS

CODE css php

5 réponses à ce sujet

#1 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 24 November 2015 - 01:55 AM

Hello !

Je me suis mis au CSS hier et je sens que ça va me prendre la tête de modifier tout les codes couleurs si le client le demande... Idem pour toutes les valeurs de tailles....

Je n'ai pas trop de patience pour ce genre de choses alors j'ai pris les devants et j'ai fait en sorte qu'on puisse créer des variables réutilisable en CSS.

Les variables se déclarent comme ça :


[variables]
@mainColor = #ff0000;
@titleSize = 16px;
@descriptionSize = 2em;
[/variables]
 

Il est inutile de déclarer toutes les variables au début du code CSS, on peut ouvrir plusieurs "balise" [variable] au sein du même fichier


Puisque j'étais bien lancé, j'ai également ajouté des fonctions permettant de manipuler ces variables :



- toWhite( percent )
S'utilise sur une variable contenant un code couleur, et qui permet de trouver une déclinaison plus clair du code couleur originel. Elle attend en paramètre un nombre compris entre 0 et 1.

- toBlack( percent )
S'utilise sur une variable contenant un code couleur, et qui permet de trouver une déclinaison plus sombre du code couleur originel. Elle attend en paramètre un nombre compris entre 0 et 1.

- to(newValue , percent)
S'utilise sur une variable contenant un nombre (formatté en "px" ou en "em") , et qui permet de tendre vers une nouvelle valeur en fonction d'un pourcentage

- add(val)
S'utilise une variable contenant un nombre (formatté en "px" ou en "em") et permet d'ajouter une valeur à celle contenue dans la variable

- sub(val)
S'utilise une variable contenant un nombre (formatté en "px" ou en "em") et permet de soustraire une valeur à celle contenue dans la variable

- multiply(val)
S'utilise une variable contenant un nombre (formatté en "px" ou en "em") et permet de multiplier une valeur à celle contenue dans la variable


Concrètement, pour s'en servir, il faut créer un fichier CSS avec des variables puis demander à php de charger ce fichier, de l'interpréter et de créer un nouveau fichier qui va contenir le vrai code CSS.

Ma classe php, avant de commencer à travailler, vérifie si le fichier de sortie existe déjà et, si oui, si les dernieres modifications apporté à ce fichier sont plus récente que la dernière modifications apporté sur le fichier source, de telle manière que le fichier CSS ne soit recompilé que si nécessaire :)

On l'utilise tout simplement comme ça


<?php
include("CSSBuilder.php");
$builder = new CSSBuilder;
$builder->build("input.css","output.css");
?>

Voilà le code contenu dans mon "input.css"


[variables]
@titleSize = 20px;
@titleColor = #FF0000;
@titlePosx = 100;
@titlePosy = 50;
[/variables]
*{
position:absolute;
}

.titleContainer{
left:@titlePosx;
top:@titlePosy;
background-color:@titleColor.toWhite(0.8);
}
.titleContainer p {
color:@titleColor;
font-size:@titleSize;
}
.navContainer {
background-color:@titleColor.toBlack(0.5);
left:@titlePosx.sub(50);
top:@titlePosy.add(200);
}
.navBtn{
left:@titlePosx.to(200,0.5);
}
.navBtn p {
color:@titleColor.toBlack(0.65);
}
 

Et voilà le code généré par php, dans mon output.css


*{
position:absolute;
}
.titleContainer{
left:100;
top:50;
background-color:#ffcccc;
}
.titleContainer p {
color:#FF0000;
font-size:20px;
}
.navContainer {
background-color:#7f0000;
left:50px;
top:250px;
}
.navBtn{
left:150px;
}
.navBtn p {
color:#590000;
}
 


Avec ça, le CSS me rebute déjà un peu moins :)

EDIT : Le arobas situé au début du nom des variables n'est pas obligatoire. Vous pouvez utiliser "$" si vous préférez, ou même rien du tout (mais si vous n'utilisez rien, faites attention aux noms que vous utilisez. Par exemple, si vous utilisez une variable qui s'appelle "color" , ca va rentrez en conflit avec les propriétés css "color", "border-color", "background-color", et tout les autres propriétés (si elles existent) qui contiennent le mot "color". Il est donc recommandé d'utiliser un charactere spécial en début (ou en fin ) de nom de variable pour éviter les problèmes.

EDIT 2: Le code qui gère les fonctions se fait dans un second temps, il est donc possible d'utiliser des variables en paramètres des fonctions. Si vous faite une opération sur une variable contient un chiffre en "px" et que vous le multipliez par un autre défini en "em", c'est le format de la variable sur laquelle on appelle la fonction qui prend le dessus, donc "px" dans ce cas.

EDIT 3 : si un modo passe dans le coin, peut il mettre à jour le titre de ce sujet et mettre "CSSBuilder : un bout de code php pour dynamiser le CSS" à la place (histoire qu'on puisse le retrouver en tapant CSSBuilder dans le moteur de recherche :) )
Merci d'avance ! ;-)

Fichier(s) joint(s)



#2 paodao

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 7065 messages

Posté 24 November 2015 - 17:45 PM

je te repond ici aussi

tu devrais regarder du coté de less et sass
les variables et les fonctions sont déjà pris en compte ;-)
et par la même occasion tu devrais regarder npm et gulp/grunt pour les générer et avoir d'autres outils sympa.
a+

#3 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 24 November 2015 - 18:12 PM

Salut Paodao !

J'avais vu less, je vais regarder sass :)
Je n'avais pas vu qu'on pouvait utiliser les fonctions par contre.... (avec less)

Mais le "problème" de "less", pour moi - et cela n'engage que moi - , c'est son installation : soit on le précompile via une ligne de commande (et perso je trouve ça pénible) , soit on le "compile" à chaque lancement d'une page via une library javascript.

Ma solution permet de compiler le css uniquement lorsque le fichier css source à été modifié, directement depuis php sans avoir besoin de javascript.

Par contre, mon outil est relativement statique dans le sens ou on ne peut pas implémenter facilement de nouvelles fonctions mais apriori on peut tout faire avec celle que j'ai implémenté.

Enfin, même si less était parfait, je l'aurai probablement réécris quand même car ce qui me plait dans le dev c'est d'être capable de tout faire de A à Z et donc je n'utilise jamais - ou presque jamais - des library écrit par d'autres :)
J'ai conscience que ce n'est pas très intelligent de réinventer la roue à chaque fois - on me le répète souvent -, mais moi ça me passionne :)

Je vais quand même jeter un oeil sur sass par curiosité ;)

Merci pour ton retour

EDIT : je viens de regarder sass, et ça a l'air vraiment bien ! Merci encore ;)

#4 paodao

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 7065 messages

Posté 24 November 2015 - 18:33 PM

Citation

soit on le "compile" à chaque lancement d'une page via une library javascript.
je connais pas.

Citation

soit on le précompile via une ligne de commande (et perso je trouve ça pénible)
tout a fait. Mais en fait c'est pas si penible que ça.
avec gulp tu peux créer des taches (cela devrais te plaire). Tu peux donc créer une tache qui va compiler tes fichier less en enficher css. Il faut a chaque fois appeller la commande depuis le terminal (un peu penible).
Mais avec gulp tu peux aussi lancer une tache qui va s'occuper de regarder (function "watch") lorsqu'un fichier est modifier et appeller une tache en conséquence.
par exemple tu definni le truc pour qu'a chaque changement d'un fichier .scss (fichier less) cela recompile automatiquement les fichiers css. (beaucoup moins pénible puisqu'automatique ;-) )

gulp t'apporte aussi un autre outil pratique: "browsersync". c'est un outil qui te permet de synchroniser la/les page/s html afficher dans le/les browser ouvert. Du coup tu peux faire un "watch" sur les fichiers du site et dès qu'il y en a un qui est modifié cela recharge toutes les pages ouverte dans les browser. Browsersybc te permet aussi de synchroniser tous les navigateur ouvert sur ta page. Ainsi quand tu sroll sur l'un, cela scroll sur les autres et TOUS les autres: ceux de ton pc (firefox, ie..) ceux de ton mac qui s'est connecté au pc (safari...), ceux de ton android, de tes ipad, iphone.......

et enfin tu peux linker les differentes tache que tu crée dans gulp. Donc par exemple quand tu modifie un fichier scss, cela regenere les fichiers css et cela reload les pages html ouvertes dans les browsers (pc, mac, android, apple...)

Sinon less t'apporte aussi le fait de pouvoir importer des fichiers. Tu créé un fichier contants.scss, que tu importe dans tes autres fichiers scss, ainsi tes couleur, taille de typo, sont centralisé et rapidement modifiable

#5 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 24 November 2015 - 19:49 PM

"Sinon less t'apporte aussi le fait de pouvoir importer des fichiers. Tu créé un fichier contants.scss, que tu importe dans tes autres fichiers scss, ainsi tes couleur, taille de typo, sont centralisé et rapidement modifiable "

Ca me donne une idée ! :)
Je vais générer un fichier de constantes à partir des variables contenu dans mes input.css et faire en sorte que si un input soit modifié la liste de constantes soit mis a jour et réciproquement, si on met à jour les constantes, que ça mette à jour les inputs

"
gulp t'apporte aussi un autre outil pratique: "browsersync" "
J'avais déjà lu ce mot "browersync" mais je ne savais pas ce que c'était. Merci pour ton explication !
Ca a l'air tellement pratique que je vais peut être l'utiliser :)


Sinon, il y a quelque chose que je ne comprend pas bien...
Gulp, ça fonctionne offline uniquement ? - sous entendu, les fichiers online sont différent des fichiers offline (?) -

#6 paodao

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 7065 messages

Posté 24 November 2015 - 19:59 PM

Citation

Gulp, ça fonctionne offline uniquement ? - sous entendu, les fichiers online sont différent des fichiers offline (?) -
je n'ai jamais utilisé gulp pour gérer les sites online, mais il me semble que tu peux créer des taches pour gerer les upload de fichiers et tout le reste.

Sinon non les fichiers sont les mêmes. En général (en tout cas pour moi et de ce que j'ai vue sur le net) tu as un repertoire "app" ou "web" dans lequel se trouve les fichiers finaux de ton site (php, css, img, js...) à coté de ce répertoire tu as les fichiers que tu utilise avec gulp (sass, gulpfile...). Je te joins des screen d'un projet que je viens juste de commencer, ce sera plus clair.

tu verra qu'in final le dossier "web" contient bien les fichiers css et que le dossier sass conteint les fichiers scss qui sont compiler dans le dossier web.

Fichier(s) joint(s)





1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP