Le bloc-notes professionnel d'un développeur front-end senior
Source : Cross Browser Inline-block.
Attention à l’espace blanc laissé entre les éléments en inline-block : Fighting the Space Between Inline Block Elements.
|
1 2 3 4 5 6 7 8 |
float: none; /* utile si ces styles viennent en surcharge d'autres propriétés (grille bootstrap par exemple) */ min-height: 1px; display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 1px; |
Retenir : lorsqu’on redéfinit ponctuellement la valeur de la variable $grid-columns pour créer une batterie de styles spécifique à un affichage en x (autre que la valeur par défaut qui est 12) colonnes, il faut penser à redéclarer systématiquement la valeur par défaut juste après. Cf. l’exemple ci-dessous.
Source : Bootstrap: Advanced Grid Tricks (sous-partie Redefining grid-columns).
Le truc ici est de réaliser qu’SCSS parse de haut en bas et qu’à partir du moment où il atteint la partie de notre code où nous cherchons à redéfinir la variable $grid-columns les propriétés précédentes ont déjà été générées.
Si nous changeons la valeur de $grid-columns à 5 pour générer une batterie de styles spécifiques pour une grille 5 colonnes et que nous remettons cette valeur à la valeur par défaut (12) ensuite, nous n’obtiendrons pas d’effets de bord.
|
1 2 3 4 5 |
$grid-columns: 5; @include make-grid(xs); $grid-columns: 12; |
Dans l’exemple ci-dessus, des classes .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4 et .col-xs-5 seront générées pour créer une mise en page sur 5 colonnes (réparties sur 100% de largeur) par rangée.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$grid-columns: 5; // on définit la valeur de $grid-columns à 5 pour 5 colonnes par rangées [class*="col-five-"],[class^="col-five-"]{ position: relative; min-height: 1px; padding-left: $grid-gutter-width / 2; padding-right: $grid-gutter-width / 2; float: left; } @include make-grid(five-xs); // Small grid @media (min-width: $screen-sm-min) { @include make-grid(five-sm); } // Medium grid @media (min-width: $screen-md-min) { @include make-grid(five-md); } // Large grid @media (min-width: $screen-lg-min) { @include make-grid(five-lg); } $grid-columns: 12; // suite à la génération de nos nouvelles classes, on réinitialise immédiatement la valeur de $grid-columns à 12 (ou 12 est la valeur par défaut dans _variables.scss de bootstrap) |
L’idée ici est de mettre en place un chemin à étapes pour un tunnel d’achat sans avoir recours à JavaScript ou jQuery. La petite difficulté repose notamment dans le fait que la bordure qui se trouve sous chaque intitulé doit être affichée en 2 couleurs lorsqu’on veut signifier l’étape en cours.
Markup HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="process-steps"> <ol> <li> <span class="label">Etape #1</span> </li> <li class="current"> <span class="label">Etape #2</span> </li> <li> <span class="label">Etape #3</span> </li> <li> <span class="label">Etape #4</span> </li> </ol> </div> |
SASS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
.process-steps ol{ display: table; table-layout: fixed; width: 100%; font-size: rem(18); text-transform: uppercase; li{ position: relative; display: table-cell; text-align: center; &::before, &::after{ position: absolute; z-index: 1; display: inline-block; content: ""; width: 50%; height: 2px; bottom: 0; background-color: #000; } &::before{ left: 0; } &::after{ right: 0; } .label{ display: block; padding-bottom: $grid-gutter-width / 2; color: $corporate-color-one; &::after{ position: absolute; z-index: 2; left: calc(50% - 10px); bottom: -9px; display: inline-block; content: ""; width: 20px; height: 20px; border-radius: 50%; background-color: $corporate-color-one; } } &.current{ &::before{ background-color: #000; } &::after{ background-color: $site-font-color-light; } .label{ color: $corporate-color-one; &::after{ background-color: $corporate-color-one; } } } &.current ~ li{ &::before, &::after{ background-color: $site-font-color-light; } .label{ color: $site-font-color-light; &::before, &::after{ background-color: $site-font-color-light; } } } } } |
Les mixins sont ceux de la grille Flexbox de Foundation 6.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<div class="steps"> <h1>Déclarer un arrêt de travail</h1> <p>Les étapes suivantes vont vous guider pour déclarer un arrêt de travail sans omettre d'informations.</p> <ol class="steps-list"> <li class="steps-item"> <a href="#"> <span class="number">1</span> <br /><span class="label">Employeur</span> </a> </li> <li class="steps-item"> <a href="#"> <span class="number">2</span> <br /><span class="label">Assuré</span> </a> </li> <li class="steps-item is-current"> <a href="#"> <span class="number">3</span> <br /><span class="label">Arrêt de travail</span> </a> </li> <li class="steps-item"> <a href="#"> <span class="number">4</span> <br /><span class="label">Salaires</span> </a> </li> <li class="steps-item"> <a href="#"> <span class="number">5</span> <br /><span class="label">Documents d'instruction</span> </a> </li> <li class="steps-item"> <a href="#"> <span class="number">6</span> <br /><span class="label">Récapitulatif</span> </a> </li> </ol> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
// // steps $steps-item-width: 30px; .steps { &-list { // reset margin: 0; padding: 0; list-style-type: none; position: relative; } &-item { position: relative; &::before, &::after { position: absolute; display: inline-block; content: ""; background-color: tomato; } &::before { z-index: -2; } &::after { z-index: -3; } &:last-child { &::before, &::after { display: none; } } .number { display: inline-block; width: $steps-item-width; height: $steps-item-width; line-height: $steps-item-width - 4; text-align: center; border-radius: 50%; border: 3px solid tomato; color: tomato; background: #fff; } &.is-current { &::after { background-color: black; } } &.is-current ~ li { &::before { display: none; } &::after { background-color: black; } .number { line-height: $steps-item-width; border: 1px solid black; color: black; &::after { background-color: black; } } } } @include breakpoint(medium down) { &-list { @include flex-direction( $direction: column); } &-item { br { display: none; } &::before, &::after { left: ($steps-item-width/2) - 1; width: 3px; } &::before { height: $steps-item-width + 5; } &::after { height: 100%; } .number { margin-bottom: $steps-item-width/2; } } } @include breakpoint(large) { &-list { @include flex-grid-row( $behavior: collapse, $columns: extend, $gutters: 0); } &-item { @include flex-grid-column( $gutters: 0); &::before, &::after { top: ($steps-item-width/2) - 1; height: 3px; } &::before { width: $steps-item-width + 10; left: 0; } &::after { width: 100%; right: 0; } .number { position: absolute; z-index: -1; left: calc(50% - ($steps-item-width/3)); } &.is-current { &::after { top: ($steps-item-width/2); height: 1px; } } &.is-current ~ li { &::after { top: ($steps-item-width/2); height: 1px; } } } } } // end: steps |