[Résolu] CSSPreprocessor et Foundation framework

[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