Darklg Blog » css

Un Système de grilles/grid avec CSS & PHP

darklg — Tue, 16 Mar 2010 22:38:22 +0000

J’utilise depuis quelques mois un système de grilles léger et efficace :
Le 1kb CSS GRID.

Malheureusement, la version proposée sur le blog demande une reconfiguration cas par cas, et la version générée par le site dédié, demandait un retour au site pour chaque nouveau projet. J’ai donc décidé de monter un bout de code pour automatiser la création de grilles.
Attention, je ne gère pas de marges internes, ces dernières sont générées par les éléments contenus dans ces grilles. C’est mal, je sais.

On definit le nombre de colonnes et leur largeur par défaut.

// Version A : nb_colonnes * largeur_colonne = largeur_ligne
$grid_nb_colonnes = 12;
$grid_largeur = 80;

Il est évidemment possible de définir la largeur totale d’une ligne :

// Version B : largeur_ligne / nb_colonnes = largeur_colonne
$grid_largeur_ligne = 960;
$grid_largeur = round($grid_largeur_ligne / $grid_nb_colonnes);

Faites toutefois attention à utiliser des valeurs multiples, afin d’éviter une colonne trop petite, ou trop grande.

On génère ensuite une propriété pour chaque largeur de grille

for($i=1;$i<=$grid_nb_colonnes;$i++)
	echo '.grid_'.$i.'{width:'.($i*$grid_largeur).'px;} '."\n";

On affiche les propriétés de gestion de lignes et colonnes

echo '.column{float:left;overflow:hidden;display:inline;}';
echo '.row{width:'.($grid_nb_colonnes*$grid_largeur).'px;overflow:hidden;margin:0 auto;}';

Et voilà c’est évidemment utilisable dans mon système de compression CSS via PHP, à condition de charger le contenu dans la variable $retour_css au lieu d’afficher le contenu via echo, et de l’insérer juste avant l’appel à la fonction compress();. La configuration des largeurs et colonnes peut être par contre montée en haut du script, pour plus de confort

Note : Le bout de code est sous licence WTFPL, mais un lien, un merci ou un cadeau (Sait-on jamais qu’un puissant mécène qui souhaite mon bonheur me lise) sont appréciés.

Un article publié sur Darklg Blog © 2010
Lien vers l'article original : Un Système de grilles/grid avec CSS & PHP
Partager cet article sur Twitter

Compresser et ranger son CSS avec PHP.

darklg — Sun, 21 Feb 2010 17:19:07 +0000

Voici une méthode permettant de compresser des CSS, que j’utilise depuis quelques mois. Elle répond à plusieurs impératifs :

Réduire le nombre de CSS chargés au minimum, pour économiser les requêtes HTTP.
Permettre de créer des fichiers CSS à la volée, sans code php à l’interieur, et de les diviser le plus possible.
Compresser le résultat.
Mettre en cache la version compressée, qui sera servie au visiteur.

Cette méthode est grandement inspirée de l’article sur la compression des CSS chez CatsWhoCode, que j’ai décortiqué pendant un bout de temps

On fera donc appel à ces fichiers :

style.php : appelé pour créer la page, mais qui transmet également les instructions CSS.
style-min.css : Le CSS final, appelé par la version du site.
style/ : Le sous dossier contenant tous vos CSS.

Les éventuelles images devront être dans le même répertoire que style.php.

Voici donc le code commenté de style.php :

On déclare le contenu comme étant du CSS, pour être sûr de son interpretation.


header("Content-type: text/css");

Ensuite, il faut inclure les CSS, que l’on va trier dans l’ordre alphabétique, pour permettre d’éventuels hacks, et surtout une idée de l’ordre des instructions.

// On cree une variable de retour pour contenir le CSS.
$retour_css = '';
 
// On parcourt le sous-dossier style/
$dir = opendir("style/");
$fichiers = array();
// On ajoute chaque fichier à un tableau 'fichiers'
while($fichier = readdir($dir))
	{if($fichier!="." && $fichier!="..") $fichiers[] = 'style/'.$fichier;}
closedir($dir);
 
// Tri par ordre alphabetique des fichiers
asort($fichiers);
 
// inclusion des fichiers ... dans l'ordre
foreach($fichiers as $fichier)
	$retour_css .= file_get_contents($fichier);

La fonction compress() va agir sur plusieurs points :

Retirer les caractères « inutiles », comme les commentaires, tabulations, et transformer les espaces multiples en espaces simples, etc.
Permettre la mise en place d’un léger système de variables. Utile si vous avez beaucoup de fichiers

function compress($buffer) {
$variables_css = array(
	'COULEUR1'=>'#003366',
	'COULEUR2'=>'#336699',
	'FONT1'=>'Georgia, serif'
	);
// On remplace les variables par leur valeur
foreach($variables_css as $code_variable => $valeur)
	$buffer = str_replace('{'.$code_variable.'}', $valeur, $buffer);
 
	// Suppression des commentaires
	$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
 
	// Suppression des tabulations, espaces multiples, retours à la ligne, etc.
	$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '	 ', '	 '), '', $buffer);
 
// Suppression des derniers espaces inutiles
	$buffer = str_replace(array(' { ',' {','{ '), '{', $buffer);
	$buffer = str_replace(array(' } ',' }','} '), '}', $buffer);
	$buffer = str_replace(array(' : ',' :',': '), ':', $buffer);
 
	return $buffer;
}
 
// Compression du CSS
$retour_css = compress($retour_css);

Enfin, nous allons mettre en cache le contenu de la variable $retour_css, et l’afficher, pour les tests.

// Mise en cache du fichier style-min.css
file_put_contents('style-min.css',$retour_css);
// On affiche le contenu compressé
echo $retour_css;

Vous pouvez créer autant de fichiers CSS que vous le désirez dans le sous-dossier style/, afin de séparer couleurs, tailles, réglages de base, Reset CSS et autres grilles.

Vous m’avez lu jusqu’ici ? Woah Apprenez donc que ce code est sous licence WTFPL, qu’un lien vers cet article sera accueilli avec grand bonheur, et qu’un commentaire constructif le sera également

Un article publié sur Darklg Blog © 2010
Lien vers l'article original : Compresser et ranger son CSS avec PHP.
Partager cet article sur Twitter

12 principes pour garder un code propre

darklg — Thu, 13 Nov 2008 16:18:12 +0000

Je suis tombé hier soir sur un excellent article de Smashing Magazine intitulé « 12 Principles For Keeping Your Code Clean« .
Ce sont 12 étapes assez simples pour avoir un code propre et réutilisable / exploitable par d’autres webmasters / intégrateurs / etc. Voici une adaptation en français, pour ceux qui n’auraient pas le temps de se plonger dans l’article original.

1. Choisissez un Doctype STRICT

On ne va pas revenir sur la guerre ancestrale entre HTML 4.01 et xHTML 1.0. Les deux possèdent une version stricte, vous obligeant à rédiger du code correct.

2. Utilisez des caractères encodés comme &

Pour commencer, assurez-vous d’utiliser un charset UTF-8

Ensuite, assurez vous que les caractères comme & soient bien écrits » & « .
De même pour les lettres accentuées, comme é : » é » ou à : » à »

3. Indentez correctement votre code

Ok, l’indentation n’a -quasiment- aucune influence sur le rendu final de la page, mais le gain en lisibilité est tel que ça vaut carrément le coup. La procédure standard veut que vous indentiez d’une tabulation, ou de quelques espaces, quand vous ouvrez un nouvel élément enfant de l’élément au dessus. Puis ensuite, de revenir d’une tabulation en arrière lors de la fermeture de cet élément.
Evidemment, rien d’obligatoire ni de figé. Ce qui est le plus lisible, et le plus simple à interprêter sera le meilleur

4. Gardez vos CSS et Javascript hors du fichier.

Les balises