Monthjanvier 2016

[CSS] une liste d’éléments en inline-block

Source : Cross Browser Inline-block.

Attention à l’espace blanc laissé entre les éléments en inline-block : Fighting the Space Between Inline Block Elements.

[Bootstrap 3][SASS] Changer la valeur de la variable $grid-columns

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.

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.

Créer une batterie de classes pour une grille 5 colonnes

[CSS][SASS] Un chemin à étapes complexe avec les pseudo classes Before, After et les sélecteurs Sibling

tricky-process

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:

SASS:

Autre déclinaison (responsive !)


Les mixins sont ceux de la grille Flexbox de Foundation 6.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑