Changeset 107690 in spip-zone


Ignore:
Timestamp:
Nov 21, 2017, 5:04:23 PM (18 months ago)
Author:
tcharlss@…
Message:

Suite intégration gridle (grille) et shevy (rythme vertical).

Location:
_squelettes_/integraal/theme/trunk/scss
Files:
2 added
10 edited

Legend:

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

    r107670 r107690  
    11/**
    2  * Configuration de la grille
     2 * Configuration de la grille utilisée
    33 *
    4  * Définition des breakpoints, gouttières, etc.
     4 * Définition des breakpoints, des gouttières, etc.
    55 **/
    66
    7 // Type de grille
    8 // Normale : gridle
    9 // Flexbox : gridle-flex
    10 @import "gridle/gridle/gridle-flex";
    117
    12 // Paramètres de la grille
    13 $settings : (
     8/**
     9 * Driver : type de grille
     10 * - gridle : normale
     11 * - gridle-flex : flexbox
     12**/
     13@import "frameworks/gridle/gridle/gridle-flex";
     14
     15
     16/**
     17 * Settings : paramètres généraux de la grille
     18**/
     19$grid-settings : (
    1420  context : 12,
    1521  gutter-width : 20px,
    16   gutter-height: 20px,
    17   direction : ltr
     22  gutter-height: 0,
     23  gutter-left: 10px,
     24  gutter-right: 10px,
     25  gutter-top: 0,
     26  gutter-bottom: 0,
     27  direction : ltr,
     28  states-classes: false
    1829);
    19 @include gridle_setup($settings);
     30@include gridle_setup($grid-settings);
    2031
    21 // Définition des breakpoints
     32
     33/**
     34 * States : définition des breakpoints
     35 * Il est possible de surcharger les paramètres de la grille pour chaque state
     36**/
    2237@include gridle_register_state(mobile, (
    23     max-width : 479px
     38  max-width : 479px,
     39  gutter-width: 10px
    2440));
    2541@include gridle_register_state(tablet, (
    26     min-width : 480px,
    27     max-width : 959px
     42  min-width : 480px,
     43  max-width : 959px
    2844));
    2945@include gridle_register_state(tablet-up, (
    30     min-width : 480px
     46  min-width : 480px
    3147));
    3248@include gridle_register_state(desktop, (
    33     min-width : 960px,
    34     max-width: 1199px
     49  min-width : 960px,
     50  max-width: 1199px
    3551));
    3652@include gridle_register_state(desktop-up, (
    37     min-width : 960px
     53  min-width : 960px
    3854));
    39 @include gridle_register_state(desktop-large, (
    40     min-width : 1200px
     55@include gridle_register_state(large, (
     56  min-width : 1200px,
     57  gutter-width: 30px
    4158));
    4259
    43 // Go go go
     60
     61/**
     62 * Initialisation
     63 * Nécessaire pour l'utilisation de mixins
     64**/
    4465@include gridle_init();
  • _squelettes_/integraal/theme/trunk/scss/base/_layout.scss

    r107670 r107690  
    22/* Tous les .container quelques soient les écrans */
    33.container{
    4         @include outer-container;
    5         padding:0 1em;
    6        
    7         @include media($bp-large-up){
     4        @include gridle_container();
     5
     6        @include gridle_state( desktop-up ) {
    87                padding:0;
    98        }
     
    1918
    2019/* En grand écran, on passe à deux colonnes */
    21 @include media($bp-large-up){
     20@include gridle_state( desktop-up ) {
    2221        #content{
    2322                padding-right:flex-gutter();
     
    3635        @include setgrid(1);
    3736}
    38 
  • _squelettes_/integraal/theme/trunk/scss/base/_typo.scss

    r107670 r107690  
    2424        color:$couleur-lien;
    2525        text-decoration:none;
    26        
     26
    2727        &:hover{
    2828                text-decoration:underline;
     
    3939.link-block-wrapper{
    4040        position:relative;
    41        
     41
    4242        a{
    4343                position:inherit;
    44                
     44
    4545                &:before{
    4646                        content:"";
     
    6363ol.spip{
    6464        list-style:decimal;
    65         //margin-left:$typo-margin-vertical*2;
    6665}
    6766
     
    6968        border-style:dotted;
    7069}
    71 
  • _squelettes_/integraal/theme/trunk/scss/base/_variables.scss

    r107670 r107690  
     1/**
     2 * Définition des variables du projet
     3 *
     4 * Voir aussi les fichiers xxx-settings.scss
     5**/
    16
    27/* Palette de couleur */
    3 $couleur-rouge:#d44423;
    4 $couleur-beige:#c7b698;
    5 $couleur-beige-clair:#e8e0d1;
    6 $couleur-sombre:#322c20;
     8$couleur-rouge: #d44423;
     9$couleur-beige: #c7b698;
     10$couleur-beige-clair: #e8e0d1;
     11$couleur-sombre: #322c20;
    712
    813/* Palette fonctionnelle */
    9 $couleur-texte:black;
     14$couleur-texte: black;
    1015$couleur-lien: $couleur-beige;
    1116
    1217/* Variables de typographie */
     18$typo-font-size: 1em; // = taille du texte définie dans Tinytypo
    1319$typo-line-height: 1.5;
    14 $typo-margin-vertical: ($typo-line-height)*1em;
    15 $typo-font-text: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif, sans;
    16 $typo-font-heading: Arial Black,Arial Bold,Gadget,sans-serif, sans;
     20//$typo-margin-vertical: 1em; // Laisser Shevy s'occuper du rythme vertical
     21$typo-font-text: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Geneva", "Verdana", sans-serif, sans; // Famille du texte principal
     22$typo-font-heading: "Arial Black", "Arial Bold", "Gadget", sans-serif, sans; // Familles des titres
     23$typo-font-alt: "Palatino", "Palatino Linotype", "Palatino LT STD", "Book Antiqua", "Georgia", serif;; // Familles des textes alternatifs (par ex. chapos, sous-titre etc.)
  • _squelettes_/integraal/theme/trunk/scss/modules/_forms.scss

    r96775 r107690  
    77textarea, input[type=text], input.text, select{
    88        background-color:white;
    9         border:$typo-margin-vertical/3/8 solid grey;
     9        border: bs(1)/3/8 solid grey;
    1010        border-radius:3px;
    1111        font-size:1em;
     
    1515        width:90%;
    1616        max-width:90%;
    17        
     17
    1818        &:focus{
    1919                background-color:white;
     
    2626.formulaire_spip{
    2727        clear:both;
    28        
     28
    2929        ul{
    3030                margin:0;
     
    3232        .editer{
    3333                list-style:none;
    34                
     34
    3535                .erreur_message{
    3636                }
     
    6060        }
    6161}
    62 
  • _squelettes_/integraal/theme/trunk/scss/sections/_access.scss

    r85333 r107690  
    1111                float:none;
    1212        }
    13        
    14         @include media($bp-medium-up){
     13
     14
     15        @include gridle_state( tablet-up ) {
    1516                .item{
    1617                        display:inline-block;
    1718                        margin-right:2em;
    18                        
     19
    1920                        &.right{
    2021                                float:right;
  • _squelettes_/integraal/theme/trunk/scss/sections/_breadcrumb.scss

    r84029 r107690  
    66        }
    77        .item{
    8                 @include inline-block;
     8                display: inline-block;
    99        }
    1010}
  • _squelettes_/integraal/theme/trunk/scss/sections/_firstnav.scss

    r103948 r107690  
    44        clear:both;
    55        display:none;
    6        
    7         .menu-items{   
     6
     7        .menu-items{
    88                @extend .list-none;
    99                margin:0;
     
    1212                display:block;
    1313        }
    14        
    15         @include media($bp-medium-plus-up){
     14
     15        @include gridle_state( desktop-up ) {
    1616                display:block !important;
    17                
     17
    1818                .menu-items{
    1919                        line-height:0;
    2020                        text-align:justify;
    21                        
     21
    2222                        &:after{
    2323                                content:'';
     
    3333                        padding:0;
    3434                        vertical-align:top;
    35                        
     35
    3636                        &:first-child{
    3737                                text-align:left;
  • _squelettes_/integraal/theme/trunk/scss/sections/_header.scss

    r103948 r107690  
    11
    22.header {
    3         @include media($bp-medium-plus-up){
     3        @include gridle_state( tablet-up ){
    44                .menus-toggle{
    55                        display:none;
  • _squelettes_/integraal/theme/trunk/scss/theme.scss

    r107670 r107690  
    99/**
    1010 * Variables et fonctions de base
    11  * 
     11 *
    1212 * Ces imports ne génèrent aucun style CSS, ce sont des utilitaires ou sinon des styles de librairies
    1313**/
    1414@import "base/variables"; // variables globales (couleurs, typographie, etc.)
    15 @import "frameworks/gridle/gridle"; // grille Gridle - http://gridle.org/
     15@import "frameworks/gridle/gridle/gridle"; // grille Gridle - http://gridle.org/
    1616@import "base/grid-settings"; // configuration de la grille
     17@import "base/hashgrid"; // mixin de visualisation de la grille pour aider - http://hashgrid.com
     18@import "frameworks/shevy/shevy"; // mixins pour contrôler le rhythme vertical - https://kyleshevlin.github.io/shevy/
     19@import "base/rythm-settings"; // configuration du rythme vertical
    1720//@import "frameworks/layoutgala/layoutgala"; // mixins LayoutGala, si on en a besoin - https://blog.html.it/layoutgala/index.html
    1821//@import "frameworks/sassy-buttons/sassy-buttons"; // mixins pour des boutons faciles - http://jaredhardy.com/sassy-buttons
    19 @import "base/hashgrid"; // mixin de visualisation de la grille pour aider - http://hashgrid.com
    20 //@import "frameworks/shevy/shevy"; // mixins contrôler le rhythme vertical - https://kyleshevlin.github.io/shevy/
    2122
    2223
    2324/**
    2425 * Base CSS
    25  * 
     26 *
    2627 * Styles de premier niveau pour les éléments de base, la plupart sans classes
    2728**/
    2829@import "frameworks/tinytypo/tinytypo"; // Typographie de base, pour n'importe quel site - http://tinytypo.tetue.net
     30@import "base/rythm"; // Contrôle du rythme vertical
    2931@import "base/typo"; // Choix graphiques de base propres à ce site (couleurs de base, tailles, polices, etc)
    3032
     
    3234/**
    3335 * Gestion des gabarits
    34  * 
     36 *
    3537 * Placement des blocs principaux, colonnes, etc
    3638**/
     
    4042/**
    4143 * Modules
    42  * 
     44 *
    4345 * Ce sont des modèles cohérents, réutilisables quelque soit l'endroit où on les place
    4446**/
    45 @import "modules/icons"; // Styles communs pour placer les icônes
    46 @import "modules/icons-codes"; // Nom CSS de chaque icône
     47//@import "modules/icons"; // Styles communs pour placer les icônes
     48//@import "modules/icons-codes"; // Nom CSS de chaque icône
    4749@import "modules/text-fadeout"; // Masquer un bas de texte avec un dégradé
    4850//@import "modules/buttons"; // Tous les boutons et leurs variantes
     
    5658/**
    5759 * Sections
    58  * 
     60 *
    5961 * Styles spécifiques à des morceaux de pages, mais dans tout le site
    6062**/
    61 //@import "sections/access"; // Accès rapide
    62 //@import "sections/header"; // Entête du site
    63 //@import "sections/firstnav"; // Navigation principale
    64 //@import "sections/breadcrumb"; // Chemin hiérarchique
     63@import "sections/access"; // Accès rapide
     64@import "sections/header"; // Entête du site
     65@import "sections/firstnav"; // Navigation principale
     66@import "sections/breadcrumb"; // Chemin hiérarchique
    6567// @import "sections/footer"; // Pied de page
    6668// ...
     
    6971/**
    7072 * Templates
    71  * 
     73 *
    7274 * Styles spécifiques à des pages ou groupes de pages
    7375**/
     
    7577// @import "templates/rubrique-agenda"; // Pour l'agenda
    7678// ...
    77 
Note: See TracChangeset for help on using the changeset viewer.