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,

mistergraphx

// Utility generator
// Used to generate utilities & print utilities
@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
  $values: map-get($utility, values);

  // If the values are a list or string, convert it into a map
  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
    $values: zip($values, $values);
  }