Vous n'êtes pas identifié(e).

Annonce

ATTENTION

  • Prenez le temps de rechercher si quelqu'un n'a pas déjà proposé une solution à votre problème. Sur le forum français et sur le wiki
  • Pensez à mettre à jour votre version de CMS Made Simple. Nous ne faisons de support que sur LA dernière version de CMS Made Simple.
  • Renseignez impérativement le formulaire de nouveau message de manière la plus complète que possible. Dans votre CMS utiliser le menu Administration du site/Informations du système en haut Vue au format texte. Ces informations demandées nous permettent de mieux vous aider
  • Ajoutez [Résolu] au début du titre de votre 1er message lorsqu'une solution a été trouvée.

#1 06/05/2016 11:09:44

Brick
Membre
Inscription : 22/01/2016
Messages : 25

[Résolu] CSSPreprocessor et Foundation framework

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

Dernière modification par Brick (10/05/2016 09:53:20)

Hors ligne

 

#2 09/05/2016 08:40:10

airelibre
Administrateur
Lieu : Alsace
Inscription : 01/12/2009
Messages : 1 124
Site Web

Re : [Résolu] CSSPreprocessor et Foundation framework

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 :

/* @@[email protected]@ */

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

/* @@[email protected]@ */

@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

Hors ligne

#3 09/05/2016 18:36:42

Brick
Membre
Inscription : 22/01/2016
Messages : 25

Re : [Résolu] CSSPreprocessor et Foundation framework

Hello!

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

Hors ligne

#4 10/05/2016 08:06:09

airelibre
Administrateur
Lieu : Alsace
Inscription : 01/12/2009
Messages : 1 124
Site Web

Re : [Résolu] CSSPreprocessor et Foundation framework

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

Hors ligne

#5 10/05/2016 08:08:02

airelibre
Administrateur
Lieu : Alsace
Inscription : 01/12/2009
Messages : 1 124
Site Web

Re : [Résolu] CSSPreprocessor et Foundation framework

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

Hors ligne

#6 10/05/2016 09:52:28

Brick
Membre
Inscription : 22/01/2016
Messages : 25

Re : [Résolu] CSSPreprocessor et Foundation framework

Yeah!!

C'est tout bon big_smile

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

Hors ligne

#7 10/05/2016 10:15:45

airelibre
Administrateur
Lieu : Alsace
Inscription : 01/12/2009
Messages : 1 124
Site Web

Re : [Résolu] CSSPreprocessor et Foundation framework

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

Hors ligne

Pied de page des forums

  Flux Rss Twitter FaceBook