Browse Source

On sépare les scss des breakpoints de ceux des layouts de façon à pouvoir les utiliser facilement ailleurs

master
Eric Lupinacci 4 months ago
parent
commit
3c2bf064fd
  1. 22
      css/_breakpoint.scss
  2. 23
      css/_var_breakpoint.scss
  3. 32
      css/_var_layout.scss
  4. 22
      css/layout.scss

22
css/_breakpoint.scss

@ -0,0 +1,22 @@
@import "var_breakpoint";
/// Mixin mettant en oeuvre la gestion des breakpoints.
///
/// @param {string} $breakpoint-id - Nom du breakpoint dans la liste configurée des breakpoints possibles
/// @require {map} $breakpoint-list - Configuration des breakpoints
/// @content Le style des blocs correspondant au layout choisi.
///
@mixin respond-to($breakpoint-id) {
// Si le breakpoint existe bien dans la map
@if map-has-key($breakpoint-list, $breakpoint-id) {
// On inscrit une media query avec le breakpoint
@media (min-width: map-get($breakpoint-list, $breakpoint-id)) {
@content;
}
}
// Si le breakpoint n'existe pas dans la map on prévient
@else {
@warn "Le breakpoint d'id `#{$breakpoint-id}` est invalide. "
+ "Vérifier la liste des breakpoints disponibles dans la map `$breakpoint-list`.";
}
}

23
css/_var_breakpoint.scss

@ -0,0 +1,23 @@
// ------------------------------
// Variables pour les breakpoints
// ------------------------------
// Ces variables globales sont toutes préfixées par "breakpoint-", de façon à éviter toute collision et
// à se différencier des variables locales.
// Les variables dont la valeur est fournie par configuration du squelette porte un commentaire #CONFIG{variable}
// BREAKPOINTS
// -----------
// - écran extra-small - smartphone portrait/paysage < 576px
// - écran small - smartphone paysage + petite tablette portrait < 768px
// - écran médium - grande tablette portrait/paysage < 992px
// - écran large et extra-large - laptop et plus
// On définit la borne minimale de chaque intervalle.
// - xs ne sert à rien, juste par convention.
// - xl n'est pas encore utilisé pour les layouts Gala.
$breakpoint-list: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
) !default;

32
css/_var_layout.scss

@ -3,27 +3,11 @@
// -------------------------------
// Ces variables globales sont toutes préfixées par "layout-", de façon à éviter toute collision et
// à se différencier des variables locales.
// Les variables dont la valeur est fournie par configuration du squelette porte un commentaire #CONFIG{variable}
// ID GALA
// -------
$layout-id: 8 !default;
// BREAKPOINTS
// -----------
// - écran extra-small - smartphone portrait/paysage < 576px
// - écran small - smartphone paysage + petite tablette portrait < 768px
// - écran médium - grande tablette portrait/paysage < 992px
// - écran large et extra-large - laptop et plus
// On définit la borne minimale de chaque intervalle.
// - xs ne sert à rien, juste par convention.
// - xl n'est pas encore utilisé pour les layouts Gala.
$layout-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
) !default;
$layout-id: 1 !default; // #CONFIG{zgala/layout/layout_id}
// DIMENSIONNEMENT DES LAYOUTS
// ---------------------------
@ -31,9 +15,9 @@ $layout-breakpoints: (
// - Largeur de la page si celle-ci est fixe
$layout-page-width: 1024px !default;
// - Pour une page fluide, layout 1 par défaut, on conserve les proportions originales de Gala
$layout-wrapper-width-liquid: 2fr !default;
$layout-aside-width-liquid: 1fr !default;
$layout-extra-width-liquid: 1fr !default;
$layout-wrapper-width-liquid: 2fr !default; // #CONFIG{zgala/layout/liquid-width/wrapper}
$layout-aside-width-liquid: 1fr !default; // #CONFIG{zgala/layout/liquid-width/aside}
$layout-extra-width-liquid: 1fr !default; // #CONFIG{zgala/layout/liquid-width/extra}
$layout-block-widths-liquid: (
'wrapper': $layout-wrapper-width-liquid,
'aside': $layout-aside-width-liquid,
@ -41,9 +25,9 @@ $layout-block-widths-liquid: (
) !default;
// - Pour une page fixe, layout 7 par défaut, on conserve les proportions sur la base
// de la largeur par défaut de la page
$layout-wrapper-width-fixed: 1fr !default;
$layout-aside-width-fixed: 210px !default;
$layout-extra-width-fixed: 210px !default;
$layout-wrapper-width-fixed: 1fr !default; // #CONFIG{zgala/layout/fixed-width/wrapper}
$layout-aside-width-fixed: 210px !default; // #CONFIG{zgala/layout/fixed-width/aside}
$layout-extra-width-fixed: 210px !default; // #CONFIG{zgala/layout/fixed-width/extra}
$layout-block-widths-fixed: (
'wrapper': $layout-wrapper-width-fixed,
'aside': $layout-aside-width-fixed,

22
css/layout.scss

@ -1,3 +1,4 @@
@import "breakpoint";
@import "var_layout";
/// Fonction indiquant si une valeur existe dans une map. C'est un peu pendant simplifié de
@ -244,27 +245,6 @@
}
}
/// Mixin mettant en oeuvre la gestion des breakpoints.
///
/// @param {string} $breakpoint-id - Nom du breakpoint dans la liste configurée des breakpoints possibles
/// @require {map} $layout-breakpoints - Configuration des breakpoints
/// @content Le style des blocs correspondant au layout choisi.
///
@mixin respond-to($breakpoint-id) {
// Si le breakpoint existe bien dans la map
@if map-has-key($layout-breakpoints, $breakpoint-id) {
// On inscrit une media query avec le breakpoint
@media (min-width: map-get($layout-breakpoints, $breakpoint-id)) {
@content;
}
}
// Si le breakpoint n'existe pas dans la map on prévient
@else {
@warn "Le breakpoint d'id `#{$breakpoint-id}` est invalide. "
+ "Vérifier la liste des breakpoints disponibles dans la map `$layout-breakpoints`.";
}
}
/* Initialisation */
/* -------------- */
/* header, nav et footer sont toujours des blocs qui s'empilent sur toute la largeur de la page :

Loading…
Cancel
Save