Changeset 110704 in spip-zone


Ignore:
Timestamp:
Jun 17, 2018, 1:46:04 PM (3 years ago)
Author:
tcharlss@…
Message:

La grille Gridle passe en version 3, on la passe en dépendance npm ce qui simplifie sa maintenance. Adaptations diverses pour les nouvelles mixins.

Location:
_squelettes_/integraal/theme/trunk
Files:
10 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/integraal/theme/trunk/package.json

    r107682 r110704  
    2727    "gulp-sourcemaps": "latest",
    2828    "gulp-strip-css-comments": "latest"
     29  },
     30  "dependencies": {
     31    "coffeekraken-gridle": "latest"
    2932  }
    3033}
  • _squelettes_/integraal/theme/trunk/scss/base/_grid-settings.scss

    r107770 r110704  
    88
    99/**
    10  * Driver : type de grille
    11  * - gridle : normale
    12  * - gridle-flex : flexbox
    13 **/
    14 @import "frameworks/gridle/gridle/gridle-flex";
    15 
    16 
    17 /**
    18  * Settings : paramètres généraux de la grille
    19 **/
    20 $grid-settings : (
     10 * Paramètres généraux de la grille
     11 */
     12@include g-setup( (
    2113  context :       12,
    22   gutter-width :  bs(1),
    23   gutter-height: 0,
    24   gutter-left:    bs(0.5),
    25   gutter-right:   bs(0.5),
    26   gutter-top:     0,
    27   gutter-bottom: 0,
     14  gutter-width :  $bs,
     15  gutter-height : 0,
     16  gutter-left :   $bs/2,
     17  gutter-right :  $bs/2,
     18  gutter-top :    0,
     19  gutter-bottom : 0,
    2820  direction :     ltr,
    2921  states-classes: false
    30 );
    31 @include gridle_setup($grid-settings);
    32 
     22) );
    3323
    3424/**
    3525 * States : définition des breakpoints en mobile first
    3626 * Il est possible de surcharger tous les paramètres de la grille pour chaque state
    37 **/
    38 @include gridle_register_state(tablet-up, (
     27 */
     28 @include g-register-state(tablet-up, (
    3929  min-width : em(480)
    4030));
    41 @include gridle_register_state(desktop-up, (
     31@include g-register-state(desktop-up, (
    4232  min-width : em(960)
    4333));
    44 @include gridle_register_state(large-up, (
     34@include g-register-state(large-up, (
    4535  min-width : em(1200),
    4636));
    47 
    48 
    49 /**
    50  * Initialisation
    51  * Nécessaire pour l'utilisation de mixins
    52 **/
    53 @include gridle_init();
  • _squelettes_/integraal/theme/trunk/scss/base/_layout.scss

    r107770 r110704  
    66
    77/* Tous les .container quelques soient les écrans */
    8 .container{
    9         @include gridle_container();
    10 
    11         @include gridle_state( desktop-up ) {
    12                 padding: 0;
    13         }
     8.container {
     9        @include g-container();
    1410}
    1511
  • _squelettes_/integraal/theme/trunk/scss/base/_variables.scss

    r107770 r110704  
    1515
    1616/* Variables de typographie */
    17 $typo-font-size: 1rem;
     17$typo-font-size: 1em;
    1818$typo-line-height: 1.5;
     19$bs:                   $typo-font-size * $typo-line-height / 1em * 1rem; // base spacing = hauteur d'1 ligne
    1920
    2021/* Familles de polices */
  • _squelettes_/integraal/theme/trunk/scss/base/_vertical-rythm.scss

    r107770 r110704  
    66 *
    77 * @notes
    8  * - Il faut définir le rythme vertical APRÈS Tinytypo.
    9  * - Pour chaque variante $shevy-[truc], il vaut mieux redéclarer toutes les variables,
    10  * sinon ça prend celles pas défaut (pas celles qu'on a mis nous dans le $shevy de base)
    11  * - Les variantes $shevy-[truc] ne sont pas que pour le responsive, elles peuvent être utilisées pour n'importe quel sélecteur (blocs de mises en avant, etc.).
    12  * - Pour définir des marges dans d'autres composants du projet, utiliser la mixin bs()
     8 * Il faut définir le rythme vertical APRÈS Tinytypo.
    139**/
    1410
     
    4036@include headings; // hn (font-size, line-height, margin-bottom)
    4137@include content; // p ol ul pre (font-size, line-height, margin-bottom)
    42 
    43 
    44 /**
    45  * Variantes pour le responsive
    46  * On les met dans une map pour automatiser et pouvoir les lister ailleurs
    47 **/
    48 
    49 $shevy-states: (
    50   desktop-up: (
    51     base-font-size: $typo-font-size * 1.2, // ~ 19px
    52     base-line-height: $typo-line-height,
    53     base-font-scale: $MAJOR_THIRD,
    54     margin-bottom: true,
    55     proximity: false,
    56     proximity-factor: .85
    57   )
    58 );
    59 @each $state, $shevy-state in $shevy-states {
    60   @include gridle_state( $state ) {
    61     @include headings($shevy-state);
    62     @include body($shevy-state);
    63     @include content($shevy-state);
    64   }
    65 }
    66 
    67 
    68 /**
    69  * Variantes diverses pour des composants (blocs de mises en avant, etc.)
    70  * Utilisation : @extend .size-[variante]
    71 **/
    72 
    73 // Tailles génériques
    74 $shevy-variants: (
    75   small: (
    76     base-font-size: $typo-font-size * 0.9,
    77     base-line-height: $typo-line-height,
    78     base-font-scale: $BASIC_SHEVY
    79   ),
    80   medium: (
    81     base-font-size: $typo-font-size * 1.25,
    82     base-line-height: $typo-line-height,
    83     base-font-scale: $BASIC_SHEVY
    84   ),
    85   large: (
    86     base-font-size: $typo-font-size * 1.5,
    87     base-line-height: $typo-line-height,
    88     base-font-scale: $BASIC_SHEVY
    89   ),
    90   huge: (
    91     base-font-size: $typo-font-size * 2,
    92     base-line-height: $typo-line-height,
    93     base-font-scale: $BASIC_SHEVY
    94   ),
    95 );
    96 @each $variant, $shevy-variant in $shevy-variants {
    97   .size-#{$variant} {
    98     @include headings($shevy-variant);
    99     @include content($shevy-variant);
    100   }
    101 }
  • _squelettes_/integraal/theme/trunk/scss/modules/_forms.scss

    r107770 r110704  
    3737                }
    3838        }
    39         // À partir des moyens grands on met deux champs par ligne
    40         @include gridle_state( desktop-up ) {
    41                 .editer-groupe {
    42                         @include gridle( row );
    43                 }
    44                 .editer {
    45                         @include gridle( 6 );
    46                 }
    47         }
    4839        .choix{
    4940                label{
  • _squelettes_/integraal/theme/trunk/scss/sections/_access.scss

    r107690 r110704  
    1313
    1414
    15         @include gridle_state( tablet-up ) {
     15        @include g-state( tablet-up ) {
    1616                .item{
    1717                        display:inline-block;
  • _squelettes_/integraal/theme/trunk/scss/sections/_firstnav.scss

    r107690 r110704  
    1313        }
    1414
    15         @include gridle_state( desktop-up ) {
     15        @include g-state( desktop-up ) {
    1616                display:block !important;
    1717
  • _squelettes_/integraal/theme/trunk/scss/sections/_header.scss

    r107690 r110704  
    11
    22.header {
    3         @include gridle_state( tablet-up ){
     3        @include g-state( tablet-up ){
    44                .menus-toggle{
    55                        display:none;
  • _squelettes_/integraal/theme/trunk/scss/theme.scss

    r107770 r110704  
    1515@import "base/variables"; // variables globales (couleurs, typographie, etc.)
    1616@import "frameworks/shevy/shevy"; // mixins pour contrôler le rhythme vertical - https://kyleshevlin.github.io/shevy/
    17 @import "frameworks/gridle/gridle/gridle"; // grille Gridle - http://gridle.org/
     17@import 'node_modules/coffeekraken-gridle/flex'; // grille Gridle - http://gridle.org/
    1818@import "base/grid-settings"; // configuration de la grille
    1919
Note: See TracChangeset for help on using the changeset viewer.