mistergraphx

// ----
// libsass (v3.2.4)
// ----

$media-stack:
  (group: tablet, id: general, rule: "only screen and (min-device-width: 700px)"),
  (group: small, id: general, rule: "only screen and(min-device-width: 1100px)"),
  (group: small, id: inbetween, rule: "only screen and(min-device-width: 1100px) and (max-device-width: 1400px)"),
  (group: large, id: general, rule: "only screen and(min-device-width: 1400px)"),
  (group: print, id: general, rule: "only print"),

mistergraphx

@use path and namespacing

All partials / components scss file can be "used" without relying about path just by their namespace. In a scss module we can load settings module only with @use 'settings', without thinkink about path like '../path/to/settings'.

When creating sub-modules we can load the main setting file only with @use 'settings' as * or @use 'settings' as brand (using a namespacing)

mistergraphx

// SETTINGS
$tiny-small: 360px !default;
$tiny-medium: 480px !default;
$tiny: 673px !default; // or 'em' if you prefer, of course
$small: 768px !default;
$medium: 1024px !default;
$large: 1200px !default;
$extra-large: 1350px !default;

// Colors

mistergraphx

// SETTINGS
$tiny-small: 360px !default;
$tiny-medium: 480px !default;
$tiny: 673px !default; // or 'em' if you prefer, of course
$small: 768px !default;
$medium: 1024px !default;
$large: 1200px !default;
$extra-large: 1350px !default;

// Colors

mistergraphx

// SETTINGS
$tiny-small: 360px !default;
$tiny-medium: 480px !default;
$tiny: 673px !default; // or 'em' if you prefer, of course
$small: 768px !default;
$medium: 1024px !default;
$large: 1200px !default;
$extra-large: 1350px !default;

// Colors

mistergraphx

// SETTINGS
$tiny-small: 360px !default;
$tiny-medium: 480px !default;
$tiny: 673px !default; // or 'em' if you prefer, of course
$small: 768px !default;
$medium: 1024px !default;
$large: 1200px !default;
$extra-large: 1350px !default;

// Colors

mistergraphx

// SETTINGS
$tiny-small: 360px !default;
$tiny-medium: 480px !default;
$tiny: 673px !default; // or 'em' if you prefer, of course
$small: 768px !default;
$medium: 1024px !default;
$large: 1200px !default;
$extra-large: 1350px !default;

// Colors

mistergraphx

// SETTINGS
$tiny-small: 360px !default;
$tiny-medium: 480px !default;
$tiny: 673px !default; // or 'em' if you prefer, of course
$small: 768px !default;
$medium: 1024px !default;
$large: 1200px !default;
$extra-large: 1350px !default;

// Colors

mistergraphx

|____2049                                   ok
| |____partials
| | |____navbar.volt                        ok

|____club
| |____back
| | |____club.volt
| | |____list.volt
| | |____form.volt

mistergraphx

/* jshint node: true */
'use strict';

/**
 * Usage général :
 *
 *  - tâche "gulp" : fichiers compilés dans "/dist" (ni minifiés ni concaténés).
 *    Le client peut modifier, améliorer et mettre en prod lui-même.
 *
 *  - tâche "gulp --prod" : fichiers compilés dans "/dist" (minifiés, concaténés,