[Brick]

#~~~~~ 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

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

[airelibre]

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

[Brick]

Hello!

Super merci pour ta réponse Airelibre, c'est très clair 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+

[airelibre]

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

[airelibre]

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

[Brick]

Yeah!!

C'est tout bon

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 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

Merci encore et good job pour le module!

Bonne journée
A+

[airelibre]

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