Changeset 107770 in spip-zone


Ignore:
Timestamp:
Nov 27, 2017, 2:39:23 PM (18 months ago)
Author:
tcharlss@…
Message:

Ajustements rythme vertical / grille

Location:
_squelettes_/integraal/theme/trunk/scss
Files:
7 edited
1 moved

Legend:

Unmodified
Added
Removed
  • _squelettes_/integraal/theme/trunk/scss/base/_grid-settings.scss

    r107709 r107770  
    1919**/
    2020$grid-settings : (
    21   context : 12,
    22   gutter-width : 20px,
    23   gutter-height: 0,
    24   gutter-left: 10px,
    25   gutter-right: 10px,
    26   gutter-top: 0,
    27   gutter-bottom: 0,
    28   direction : ltr,
     21  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,
     28  direction :     ltr,
    2929  states-classes: false
    3030);
     
    3636 * Il est possible de surcharger tous les paramètres de la grille pour chaque state
    3737**/
    38 @include gridle_register_state(mobile, (
    39   max-width : 479px,
    40   gutter-width: 10px
    41 ));
    4238@include gridle_register_state(tablet-up, (
    43   min-width : 480px
     39  min-width : em(480)
    4440));
    4541@include gridle_register_state(desktop-up, (
    46   min-width : 960px
     42  min-width : em(960)
    4743));
    4844@include gridle_register_state(large-up, (
    49   min-width : 1200px,
    50   gutter-width: 30px
     45  min-width : em(1200),
    5146));
    5247
  • _squelettes_/integraal/theme/trunk/scss/base/_layout.scss

    r107692 r107770  
    1010
    1111        @include gridle_state( desktop-up ) {
    12                 padding:0;
     12                padding: 0;
    1313        }
    1414}
     
    2222        @include gridle( 12 desktop-up 9);
    2323}
     24
    2425#aside {
    2526        @include gridle( 12 desktop-up 3);
  • _squelettes_/integraal/theme/trunk/scss/base/_mixins.scss

    r107697 r107770  
    44
    55/**
    6  * Compléments à shevy pour le base-spacing
    7  * Correspondent aux variantes de $shevy dans _rythm-settings.scss
     6 * Convertir des px en em
     7 *
     8 * @param int $pixels
     9 *     Taille en px
     10 * @param int $context
     11 *     Taille de police par défaut du navigateur
     12 * @return taille en em
    813**/
    9 @function bs-desktop($factor) {
    10   @return base-spacing($factor, $shevy-desktop);
     14@function em($pixels, $context: 16) {
     15  @if (unitless($pixels)) {
     16    $pixels: $pixels * 1px;
     17  }
     18  @if (unitless($context)) {
     19    $context: $context * 1px;
     20  }
     21  @return $pixels / $context * 1em;
    1122}
    12 @function bs-large($factor) {
    13   @return base-spacing($factor, $shevy-large);
    14 }
  • _squelettes_/integraal/theme/trunk/scss/base/_variables.scss

    r107708 r107770  
    1414$couleur-lien: $couleur-beige;
    1515
    16 /* Variables de typographie (voir aussi dans rythm-settings) */
    17 $typo-font-size: 1em;
     16/* Variables de typographie */
     17$typo-font-size: 1rem;
    1818$typo-line-height: 1.5;
    1919
  • _squelettes_/integraal/theme/trunk/scss/base/_vertical-rythm.scss

    r107769 r107770  
    66 *
    77 * @notes
    8  * - Il faut configurer le rythme vertical APRÈS Tinytypo.
    9  * - 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.).
     8 * - Il faut définir le rythme vertical APRÈS Tinytypo.
    109 * - Pour chaque variante $shevy-[truc], il vaut mieux redéclarer toutes les variables,
    1110 * sinon ça prend celles pas défaut (pas celles qu'on a mis nous dans le $shevy de base)
    12  * - Pour définir des marges dans d'autres composants du projet, utiliser la mixin bs(N)
    13 **/
    14 
    15 /**
    16  * ================
    17  * 1) Configuration
    18  * ================
     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()
    1913**/
    2014
    2115/* Presets des tailles des titres (pour aider, pas obligatoire) */
    22 $BASIC_SHEVY:      (2.5,       2.1,     1.8,   1.5,   1.25,  1);
    2316$MINOR_SECOND:     (1.382,     1.295,   1.214, 1.138, 1.067, 1);
    2417$MAJOR_SECOND:     (1.802,     1.602,   1.424, 1.266, 1.125, 1);
    2518$MINOR_THIRD:      (2.488,     2.074,   1.728, 1.44,  1.2,   1);
     19$BASIC_SHEVY:      (2.5,       2.1,     1.8,   1.5,   1.25,  1);
    2620$MAJOR_THIRD:      (3.052,     2.441,   1.953, 1.563, 1.25,  1);
    2721$PERFECT_FOURTH:   (4.209,     3.157,   2.369, 1.777, 1.333, 1);
     
    3125$GOLDEN_SECTION:   (11.089,    6.854,   4.236, 2.618, 1.618, 1);
    3226
    33 /* Base (mobile first)*/
     27/**
     28 * Base
     29**/
     30
    3431$shevy: (
    3532  base-font-size: $typo-font-size, // Taille de police, defaut : 14px
    3633  base-line-height: $typo-line-height, // Interlignage, defaut : 1.5
    37   base-font-scale: $MINOR_SECOND, // Facteurs des tailles des titres, du h1 au h6, defaut : (2.5, 2.1, 1.8, 1.5, 1.25, 1)
     34  base-font-scale: $BASIC_SHEVY, // Facteurs des tailles des titres, du h1 au h6, defaut : (2.5, 2.1, 1.8, 1.5, 1.25, 1)
    3835  margin-bottom: true, // Ajouter des marges inférieures aux titres, defaut : true
    3936  proximity: false, // Ressérer le contenu (proximity effect), defaut : false
    4037  proximity-factor: .85 // Facteur pour ressérer le contenu, defaut : .85
    4138);
    42 
    43 /* Bureaux et plus */
    44 $shevy-desktop-up: (
    45   base-font-size: $typo-font-size * 1.2,
    46   base-line-height: $typo-line-height,
    47   base-font-scale: $MAJOR_SECOND,
    48   margin-bottom: true,
    49   proximity: false,
    50   proximity-factor: .85
    51 );
    52 
    53 
    54 /**
    55  * =================
    56  * 2) Mise en oeuvre
    57  * =================
    58 **/
    59 
    60 /**
    61  * Base (mobile first)
    62 **/
    6339@include body; // body (font-size, line-height)
    6440@include headings; // hn (font-size, line-height, margin-bottom)
    6541@include content; // p ol ul pre (font-size, line-height, margin-bottom)
    6642
     43
    6744/**
    68  * Bureaux et plus
     45 * Variantes pour le responsive
     46 * On les met dans une map pour automatiser et pouvoir les lister ailleurs
    6947**/
    70 @include gridle_state( desktop-up ) {
    71   @include headings($shevy-desktop-up);
    72   @include body($shevy-desktop-up);
    73   @include content($shevy-desktop-up);
     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  }
    7465}
     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/_buttons.scss

    r107697 r107770  
    3838/* Variantes de tailles pour types/sizes (génère une classe pour chaque entrée) */
    3939$ubtn-sizes: (
    40   giant: 2,
    41   jumbo: 1.5,
    42   large: 1.25,
     40  giant:   2,
     41  jumbo:   1.5,
     42  large:   1.25,
    4343  default: 1,
    44   small: .75,
    45   tiny: .5
     44  small:   .75,
     45  tiny:    .5
    4646);
    4747
  • _squelettes_/integraal/theme/trunk/scss/modules/_forms.scss

    r107700 r107770  
    99}
    1010textarea, input[type=text], input.text, select {
    11         margin:0;
    12         padding:0 0.5em;
    13         width:90%;
    14         max-width:90%;
     11        width: 100%;
     12        max-width: 100%;
     13        margin: 0;
    1514        background-color:white;
    1615        border: bs(1)/3/8 solid grey;
    1716        border-radius:3px;
    1817        font-size:1em;
    19         // interligne : utiliser le rythme vertical
    2018        line-height: bs(1);
    21         @include gridle_state( desktop ) { line-height: bs-desktop(1) }
    22         @include gridle_state( large ) { line-height: bs-large(1) }
    2319
    2420        &:focus{
     
    3127/* Formulaire fournis par SPIP */
    3228.formulaire_spip{
    33         clear:both;
     29        clear: both;
    3430
    35         ul{
    36                 margin:0;
    37         }
    38         .editer{
    39                 list-style: none; // SPIP <= 3
    40                 // marge : utiliser le rythme vertical
     31        .editer-groupe {}
     32        .editer {
    4133                margin-bottom: bs(1);
    42                 @include gridle_state( desktop ) { margin-bottom: bs-desktop(1) }
    43                 @include gridle_state( large ) { margin-bottom: bs-large(1) }
    4434
    45                 .erreur_message{
     35                &.erreur {}
     36                .erreur_message {
    4637                }
    4738        }
     
    4940        @include gridle_state( desktop-up ) {
    5041                .editer-groupe {
    51                         @include gridle(row);
     42                        @include gridle( row );
    5243                }
    5344                .editer {
     
    5546                }
    5647        }
    57         .saisie_textarea {
    58                 clear:both;
    59         }
    6048        .choix{
    6149                label{
    62                         display:inline;
    63                         font-weight:normal;
     50                        display: inline;
     51                        font-weight: normal;
    6452                }
    6553        }
    6654        .boutons{
    67                 clear:both;
    68                 border-top:1px solid black;
    69                 margin-top:1em;
    70                 padding:1em;
     55                padding: bs(1);
    7156                text-align:center;
    7257        }
  • _squelettes_/integraal/theme/trunk/scss/theme.scss

    r107702 r107770  
    1212 * Ces imports ne génèrent aucun style CSS, ce sont des utilitaires ou sinon des styles de librairies
    1313**/
     14@import "base/mixins"; // mixins du projet
    1415@import "base/variables"; // variables globales (couleurs, typographie, etc.)
     16@import "frameworks/shevy/shevy"; // mixins pour contrôler le rhythme vertical - https://kyleshevlin.github.io/shevy/
    1517@import "frameworks/gridle/gridle/gridle"; // grille Gridle - http://gridle.org/
    1618@import "base/grid-settings"; // configuration de la grille
    17 @import "frameworks/shevy/shevy"; // mixins pour contrôler le rhythme vertical - https://kyleshevlin.github.io/shevy/
    18 @import "base/rythm-settings"; // configuration du rythme vertical
    19 @import "base/mixins"; // mixins du projet
    2019
    2120
     
    2625**/
    2726@import "frameworks/tinytypo/tinytypo"; // Typographie de base, pour n'importe quel site - http://tinytypo.tetue.net
    28 @import "base/rythm"; // Contrôle du rythme vertical
     27@import "base/vertical-rythm"; // Contrôle du rythme vertical
    2928@import "base/typo"; // Choix graphiques de base propres à ce site (couleurs de base, tailles, polices, etc)
    3029
Note: See TracChangeset for help on using the changeset viewer.