Forum CMS Made Simple FR
[Résolu] CSSPreprocessor et Foundation framework - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [Résolu] CSSPreprocessor et Foundation framework (/thread-3836.html)



[Résolu] CSSPreprocessor et Foundation framework - Brick - 06/05/2016

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 2.1.3
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Bonjour!

J'utilise cmsms depuis un certain moment maintenant et en v2 depuis peu Smile

J'ai installé le module CSSPreprocessor réalisé par Airelibre, dans l'idée de pouvoir créer un site avec le framework Foundation.
J'ai vu dans la doc du module que c'était possible.

En parcourant le forum je suis tombé sur ce sujet très interessant:
(je ne peux pas mettre le lien car je n'ai pas assez de message postés sur le forum, mais c'est le seul autre sujet sur CSSPreprocessor, trouvable facilement dans la recherche, posté par Aria)

J'y ai appris que l'on pouvait intégrer des autres feuilles .scss en les ajoutant dans le gestionnaire de designs de cmsms v2.

Mon problème, c'est que dans la distribution de Foundation (sass version) il y a énormément de liens @include et @import entre beaucoup de fichiers différents (grille, modal, forms, typography etc.).

J'ai bien utilisé la méthode du topic ci-dessus pour quelques fichiers .scss et ça fonctionne, mais même en ayant mis les fichiers de Foundation dans uploads/foundation/scss tous les liens ne sont pas fait.

Donc juste pour mieux comprendre, ma première question est:

Que faut-il avoir exactement à la racine de uploads/foundation/scss pour que le framework entier puisse fonctionner? car pour l'instant la seule solution que je vois c'est d'ajouter une à une tous les .scss du framework et c'est juste un boulot monstrueux :p


[Résolu] CSSPreprocessor et Foundation framework - airelibre - 09/05/2016

Hello,

voici ma structure pour intégrer Foundation 6 à CMS Made Simple via le module CSSPreprocessor - si je reprend ta structure basée sur le dossier uploads/foundation/scss :

- placer dans uploads/foundation/scss toutes les sources de foundations en SCSS, ce qui donne :
- - uploads/foundation/scss/components
- - uploads/foundation/scss/forms
- - uploads/foundation/scss/grid
etc..
- - uploads/foundation/scss/_global.scss
- - uploads/foundation/scss/foundation/scss

J'ajoute généralement le fichier - - uploads/foundation/scss/_settings.scss qui est la copie de celui dans settings/
Ce fichier sert à la configuration globale : largeur de grille, couleurs, tailles et types de polices, etc..

Ensuite, on configure CSSPreprocessor avec comme dossier d'import : uploads/foundation/scss

Enfin, on crée sa feuille de style principale - voici ma feuille-type :

Code :
/* @@CSSPreprocessor@@ */

@import 'settings';
@import 'foundation';

@include foundation-global-styles;
@include foundation-grid;
// include foundation-flex-grid;
@include foundation-typography;
@include foundation-button;

// TOUS LES FORMS :
//@include foundation-forms;

// OU JUSTE UNE PARTIE :
//@include foundation-form-text;
// @include foundation-form-checkbox;
//@include foundation-form-label;
// @include foundation-form-helptext;
// @include foundation-form-prepostfix;
//@include foundation-form-fieldset;
// @include foundation-form-select;
// @include foundation-form-error;



// ACTIVER SELON LES BESOINS
@include foundation-visibility-classes;
@include foundation-float-classes;
// @include foundation-accordion;
// @include foundation-accordion-menu;
// @include foundation-badge;
// @include foundation-breadcrumbs;
// @include foundation-button-group;
// @include foundation-callout;
// @include foundation-close-button;
// @include foundation-drilldown-menu;
// @include foundation-dropdown;
// @include foundation-dropdown-menu;
// @include foundation-flex-video;
// @include foundation-label;
// @include foundation-media-object;
// @include foundation-menu;
// @include foundation-off-canvas;
// @include foundation-orbit;
// @include foundation-pagination;
// @include foundation-progress-bar;
// @include foundation-slider;
// @include foundation-sticky;
// @include foundation-reveal;
// @include foundation-switch;
// @include foundation-table;
// @include foundation-tabs;
// @include foundation-thumbnail;
// @include foundation-title-bar;
// @include foundation-tooltip;
// @include foundation-top-bar;

// Puis les styles :
body {}


Si vous voulez simplement charger tout foundation, cela peut être plus léger :

Code :
/* @@CSSPreprocessor@@ */

@import 'settings';
@import 'foundation';

@include foundation-everything;

Voir : http://foundation.zurb.com/sites/docs/sass.html pour en savoir plus.


Normalement avec tout ça, ca devrait compiler.

Attention : pour l'heure, il ne faut qu'une seule de feuille de styles dans le design manager. Sinon, il faut s'assurer que des variables définies dans l'une des feuilles de style du design manager ne soit pas utilisées dans une autre. C'est une limitation de l'actuel plugin {cms_stylesheet} qui fait qu'une seule feuille est conseillée.

Bonne continuation et amusez-vous bien avec Sass et Foundation Smile


[Résolu] CSSPreprocessor et Foundation framework - Brick - 09/05/2016

Hello!

Super merci pour ta réponse Airelibre, c'est très clair Big Grin et du coup je vais tester ça dès que possible.
C'est nickel car il me fallait effectivement un exemple d'utilisation pour voir ce que je faisais faux.

Sinon vraiment sympa le module!

Je reviendrai mettre en résolu une fois terminé.

A+


[Résolu] CSSPreprocessor et Foundation framework - airelibre - 10/05/2016

N'hésites pas à nous faire part de tes retours - il est toujours intéressant d'en avoir pour faire évoluer le module et l'intégration de préprocesseurs CSS dans CMS Made Simple Wink


[Résolu] CSSPreprocessor et Foundation framework - airelibre - 10/05/2016

Pour les futurs lecteurs, le module CSSPreprocessor est disponible sur la forge : http://dev.cmsmadesimple.org/projects/csspreprocessor

Il peut être configuré sur un hébergement mutualisé ou limité (sans Sass / Less) grâce aux versions PHP des préprocesseurs.

Sur un VPS ou serveur dédié ayant Sass / Less, la version en ligne de commande sera utilisée.

Bon dev Wink


[Résolu] CSSPreprocessor et Foundation framework - Brick - 10/05/2016

Yeah!!

C'est tout bon Big Grin

Alors effectivement il y a 1 chose à laquelle je n'ai pas fais gaffe:

Je n'avais pas placé les bons fichiers et dossiers relatifs uniquement a foundation. J'avais mis tout le dossier bower-components à la racine de uploads/foundation/scss Rolleyes en pensant bien faire car je me suis dis il y a tout dedans, et quelques fichiers scss à la racine.

En reliant comme il faut les fichiers avec le bon chemin, la compilation à l'air de s'être fait entièrement Smile

Merci encore et good job pour le module!

Bonne journée
A+


[Résolu] CSSPreprocessor et Foundation framework - airelibre - 10/05/2016

Super ! En effet, il faut généralement uniquement inclure le fichier racine de Foundation, et il se charge du reste pour les sous-fichiers.

Bonne continuation Wink