Generateur de fichier global.css

[MaxProd]

Bonjour à toutes et à tous,

J'ai codé rapidement un petit utilitaire pour me simplifier la vie avec le fichier global.css. En effet, 62Ko de CSS d'un coup, c'est vraiment difficile à (di)gérer. Alors j'ai entrepris de diviser le global.css en 70 fichiers css répertoriés en fonction des commentaires inscrits dans le fichier initial.

Ce qui nous donne cette arborescence :

blocks/
       accessories_in_center_column.css
       advertising.css
       cart.css
       categories.css
       default_style.css
       editorial.css
       exclusive.css
       in_the_center_column.css
       left_column_quick_search.css
       logo_payment.css
       manufacturer.css
       myaccount.css
       new_products.css
       newsletter.css
       products.css
       products_in_center_column.css
       productscategory.css
       RSS.css
       specials.css
       tags.css
       top_currencies.css
       top_languages.css
       top_search.css
       top_user_information.css
       viewed_products.css

footer/
       footer.css
       links.css

generic/
       colors.css
       main.css
       style.css
       various.css

global/
       buttons.css
       form.css
       layout.css
       RTE_fields.css
       style.css
       table.css

header/
       header.css
       links.css

modules/
       blockmenutop.css
       blockwishlist.css
       productcomments.css

templates/
       adresses.css
       authentification.css
       breadcrumb.css
       category.css
       conditions.css
       contact-form.css
       discount.css
       history.css
       identity.css
       manufacturers-list_suppliers-list.css
       my-account.css
       pagination.css
       product.css
       product-list.css
       product-sort.css
       shopping-cart.css
       sitemap.css

various/
       category_tree.css
       contitions_and_legal.css
       customizable_product.css
       mywishlist.css
       order_step_3_payment.css
       prices.css
       printable_version.css
       steps.css
       tabs.css
       view_wishlist.css
       views_block.css

Ce n'est pas forcément le classement idéal. Mais tout cela peut être changé suivant vos besoins, il suffit juste de modifier le fichier css.xml qui indique où se trouvent les fichiers que vous souhaitez compiler sous forme d'un unique fichier global.css. Voici sa forme :

    ...

J'ai conservé le même ordre logique que le fichier global.css du thème par défaut. Mais rien ne vous empêche de réordonner et restructurer vous même à votre convenance.

Dans le même répertoire que le fichier css.xml, nous avons un fichier css.exe qui est l'exécutable qui va vérifier et faire plusieurs choses :

1) Vérifie la présence du fichier css.xml.
2) Vérifie la présence des fichiers .css décrits dans celui-ci.
3) Associer tout les fichiers .css en un seule document.
4) Envoyer à la poubelle l'ancien fichier global.css si précédemment généré (récupérable dans votre corbeille)
5) Écrire le nouveau fichier global.css à l'endroit indiqué dans le fichier css.xml.

Il ne vous reste plus qu'à remplacer votre ancien global.css par celui généré et votre thème devrait fonctionner avec vos petites modifications.

ATTENTION : Veuillez absolument sauvegarder votre ancien global.css avant d'écraser celui-ci. L'application est fiable, mais elle nécessite d'être testée pour en garantir l'usage. Je décline toute responsabilité si vous avez des problèmes avec cet outil.

J'espère que certains trouverons un intérêt certain à ceci. Vous êtes libres de l'utiliser comme bon vous semble, et le diffuser au besoin. Je vous joint un fichier ZIP qui contient le projet :

1) css.exe / le programme a exécuter
2) css.xml / la description des fichiers à compiler
3) l'arborescence des dossiers et les 70 fichiers css du thème par défaut.

Amicalement,
Max

globalcss.zip

[ptidg]

Merci pour le partage, c'est vrai qu'un fichier global de plus de 2000 lignes c'est pas toujours très pratique.

[MaxProd]

Je tiens à préciser ceci.

Le fichier global.css unique est une bonne chose en pratique. Or, on pourrait se dire qu'il serait mieux d'avoir un fichier global.css qui importe des sous-fichiers plus simples à gérer. Mais techniquement il est évident que cette méthode n'est pas viable. Le fait d'appeler 70 fois le serveur avec la méthode "import" ralentirait incontestablement le chargement initial.

Je tenais à être clair là dessus. Le but de cet outil n'est pas de remettre en cause le global.css, mais est dédié à ceux qui préfère travailler les css à la main et qui préfèrent bosser sur des fichiers courts de quelques lignes.

Amicalement,
Max

[fupap]

bonjour
comment ca fonctionne?
on installe ca ou?
merci

[MaxProd]

Salut,

Comment ça fonctionne ? Je penses que je ne peut pas être plus clair que le message initial. Si tu n'as pas compris, alors il est préférable de laisse tomber, ça risque alors de te compliquer la vie.

On installe ça où ? Nulle part, il n'y a rien à installer. C'est un juste un petit exécutable qui permet de recomposer un fichier "global.css" (Thème PrestaShop) à partir des fichiers séparés (70 petits fichiers CSS). Comme je l'ai bien indiqué précédemment, cet outil est destiné à ceux qui travaillent leur fichier CSS à la main et qui préfèrent travailler sur des petits fichiers "lisibles" plutôt qu'un gros fichiers "plus dur à manier".

That's all folks

Max

[singaii]

Merci de ton partage!
si je comprend bien il est même modulable au point de l'utiliser pour la compilation de css maison autre que prestashop.
merci bien !

concaténation de fichier avec listing en xml, c'est fait sous quoi ?

[Melki-Tsedeq]

Merci pour le partage Max.

On va dire que ce petit utilitaire peut être très utiles pour les intégrateurs de thèmes prestashop ou autres.

On peut même intégrer les css modules dans le global.css en un seul et unique fichier css.

Je dis bravo belle idée pour le css fractionné et modulable à souhait.

Un outil à utiliser pour gagner du temps… @Testé

Je l’ai ajouté sur : PrestaTools
Rubrique : Astuces, Tutoriaux / Mise en page, Template
& Rubrique : Divers

Merci encore à toi Max.

Cordialement.
Melki-Tsedeq

[Maury Girard]

MaxProd
Testé et approuvé
un gros + 1 a toi

[ps_93]

Avec la config de base, les outils de google disent que mon accès vers mes pages sont très lentes.
Temps de chargement : 4,7 secondes
Ce qui est très pénalisant.
Il me propose ceci pour améliorer les perfs :

Details: Save up to 103 Ko, 6 requêtes, 2 résolutions DNS
Autoriser la compression à l'aide de gzip
En compressant les ressources suivantes à l'aide de gzip, vous pouvez réduire la taille du transfert de 70,5 Ko :

* Accéder à l'URLhttp://www.monsite.fr/themes/montheme/css/news.css (583 octets)
* Accéder à l'URLhttp://www.monsite.fr/css/jquery.autocomplete.css (370 octets)
* Accéder à l'URLhttp://www.monsite.fr/js/zoombox/zoombox.css (2,31 Ko)
* Accéder à l'URLhttp://www.monsite.fr/themes/montheme/css/global.css (53,5 Ko)
* Accéder à l'URLhttp://www.google-analytics.com/ga.js (13,7 Ko)

Limiter le nombre de résolutions DNS
Une seule ressource est diffusée à partir de chacun des domaines des URL suivantes. Si possible, diffusez ces ressources à partir de domaines existants afin d'éviter toute résolution DNS superflue :

* Accéder à l'URLhttp://pagead2.googlesyndication.com/pagead/show_ads.js
* Accéder à l'URLhttp://www.google-analytics.com/ga.js

Diffuser les ressources à partir d'une URL unique
Les ressources suivantes présentent un contenu identique, mais sont diffusées à partir d'URL différentes. Diffusez-les à partir d'une seule URL, pour économiser 316 octets et 1 requêtes :

* Accéder à l'URLhttp://www.monsite.fr/themes/montheme/img/right-top.gif
* Accéder à l'URLhttp://www.monsite.fr/themes/montheme/img/left-top.gif

Les ressources suivantes présentent un contenu identique, mais sont diffusées à partir d'URL différentes. Diffusez-les à partir d'une seule URL, pour économiser 1,82 Ko et 1 requêtes :

* Accéder à l'URLhttp://www.monsite.fr/themes/montheme/img/button-medium_exclusive.gif
* Accéder à l'URLhttp://www.monsite.fr/themes/montheme/img/button-medium.gif

Les ressources suivantes présentent un contenu identique, mais sont diffusées à partir d'URL différentes. Diffusez-les à partir d'une seule URL, pour économiser 30,3 Ko et 1 requêtes :

* Accéder à l'URLhttp://www.monsite.fr/js/zoombox/jquery.js
* Accéder à l'URLhttp://www.monsite.fr/js/jquery/jquery-1.2.6.pack.js

Regrouper les fichiers CSS externes

Ton module ne va t-il pas justement ralentir le chargement des pages?

[Stéphane Marino]

c'est sûr.... 70 fichiers css !! au secours

[Natsu]

Pratique ton outil, je le testerai à l'occasion

[rakepl]

Nice work !
Can you write a program that extract global.css to small css files ? Like vice-versa of your program ?
Thank you.

[minimome]

bonjour
comment ca fonctionne?
on installe ca ou?
merci

Tiens, je t'ai fait rapidement un mode d'emploi en PDF et en 8 images (inclus aussi dans le zip, le fichier original). Ce petit exécutable est très utile pour ceux qui nagent complètement.

---
J'ai refait le fichier français, inclus dedans le post originel de Maxprod et son fichier zip.
C'est vraiment un exécutable utile, un beau travail, n'hésitez pas à le télécharger si vous êtes débutant.

[rakepl]

Hi minimome !
Can you translate your instruction to English ?
I think there's a way to configure css source in css.xml. For example I have global.css source at http://abc.com/global.css
How I can use this program that extract global.css to smaller css like source in this program (folder blocks, generic, header, footer itd) help ppl easy modify.
I know globalcss.exe combine divided smaller css to global.css.
Thank you.

[minimome]

Hi minimome !
Can you translate your instruction to English ?
I think there's a way to configure css source in css.xml. For example I have global.css source at http://abc.com/global.css
How I can use this program that extract global.css to smaller css like source in this program (folder blocks, generic, header, footer itd) help ppl easy modify.
I know globalcss.exe combine divided smaller css to global.css.
Thank you.

English file for beginners done, you can download it.
Included the original zip, the first post and the number of the thread.
Not sure it is what you want, it is for beginners who know nothing and want to customize their theme.
It is a very useful executable, a very nice job, however.

[minimome]

Bonjour à toutes et à tous, (...)

Amicalement,
Max

C'est vraiment bien ce que tu as fait, et je trouvais dommage que seuls des personnes averties puissent s'en servir. D'où mon fichier d'explication pour débutant très débutant.

Cordialement

[rakepl]

Thanks !

I've read your post and your translation, I understand that the "several folders" is already made for PS 1.4 with theme prestashop_alt. My question is: I have a modified global.css from a site (or offline), how I can divide it to the "several folders" for easily modify ?
For example from http://24hurt.eu/themes/skorka_jasno_niebieska/css/global.css, please help me or teach me how to divide that global.css to smallers css files ?
Thank you.

[minimome]

Thanks !

I've read your post and your translation, I understand that the "several folders" is already made for PS 1.4 with theme prestashop_alt. My question is: I have a modified global.css from a site (or offline), how I can divide it to the "several folders" for easily modify ?
For example from http://24hurt.eu/themes/skorka_jasno_niebieska/css/global.css, please help me or teach me how to divide that global.css to smallers css files ?
Thank you.

Hi,
No, it is not done for PS1.4 with theme prestashop-alt, "alt" is the directory that I used for making snapshots. The name of the directory is "alt", because it is about ski and mountains (altitude)... Maxprod uses the usual PS theme.

I have no answer for dividing a global.css into several folders, I mean you need another executable, very likely Maxprod knows the how-to, this is his idea, ask to him.

best regards, and best wishes

[rakepl]

Hi minimome !
Thank you very much for your very fast and clearly reply. Have a nice weekend.
Rakepl.

[ohoho]

Je ne voudrais pas faire une bétise

 

Cet exécutable permet de rassembler les fichiers css des modules en un seul ??