Étiquette : sass

[CSS][LESS] Un effet d’animation pour un lien souligné dont le texte s’étend sur plusieurs lignes avec background-size

Attention: Le critère du multi-lignes est très important pour ce type d’effet. Si il n’est pas pris en compte, le soulignement peut n’apparaître que sous la dernière ligne de texte du lien.

Ressources en ligne:

…et un effet que j’ai dû créer moi-même car il n’existait pas dans les ressources ci-dessus. La bordure sous le lien a deux couleurs: couleur lien normal et couleur lien souligné. La particularité de cet effet vient du fait qu’au survol du lien, le changement de couleur s’effectue en partant du milieu (50%) et avec deux balayages simultanés à gauche (pour atteindre 0%) et à droite (pour atteindre 100%).

[SASS][LESS] BEM, Block Element Modifier, astuces et bonnes pratiques

Ressources en ligne sur BEM, Block Element Modifier

Une liste de ressources qui m’ont aidé à comprendre la méthodologie BEM:

Example perso avec un store locator

Regarder notamment le principe d’imbrication de plusieurs BLOCKs et la présence de la classe helper .is-store--china (comment elle est utilisée dans le code LESS ensuite).

Code HTML

Code CSS (LESS)

Première explication sous forme de code commenté (pour comprendre)

…mais, ATTENTION: ce n’est pas comme ça que vous devez organiser votre code. Voir la section suivante.

Organisation du code LESS en composants/BLOCKs

Valable pour SASS/SCSS également.

L’organisation du code en parties représentant chacune un block/composant permet le respect du principe d’inception: pas plus de 3 niveaux d’imbrication (à l’exception de la déclaration de :pseudo-classes).

Autre exemple, avec du HTML cette fois:

Le h3 class="store__name" s’affichera:

  • en rouge si la classe store--is-boutique est présente sur l’élément parent
  • en gris si la classe store--is-retailer est présente sur l’élément parent

Les autres styles appliqués au h3 class="store__name" seront affectés aux deux.

Exploitation d’une classe helper .is-store--china

L’organisation du code en parties représentant chacune un block/composant est reprise. La classe helper s’intercale au besoin.

Pour <div class="store-locator">, toutes les bordures seront pink.

Pour <div class="store-locator is-store--china">, toutes les bordures seront red.

[Webpack Encore] Utiliser la méthode addAliases pour résoudre les problèmes de sous-imports de fichiers sass/scss à l’utilisation de frameworks comme UiKit ou Foundation 6

Source: Webpack sass loader resolve absolute path

/webpack.config.js:

/assets/styles/apps.scss.

ATTENTION: afin que le principe de fallback décrit dans l’exemple (surcharge si existante, sinon fichier natif consigné dans node_modules), il est impératif de respecter l’arborescence native de votre framework dans votre chemin vers le fichier surchargé.

Exemple: si je veux surcharger le fichier natif ./node_modules/uikit/src/scss/uikit.scss, je dois respecter l’arborescence suivante: ./assets/styles/uikit/src/scss/uikit.scss.

/assets/styles/uikit/src/scss/components/_import.scss: ce fichier est une surcharge de /node_modules/uikit/src/scss/components/_import.scss.

Par le biais de cette surcharge, nous pouvons:

  • Commenter les composants que nous ne souhaitons pas utiliser dans notre projet: //@import "table.scss";
  • Faire pointer les composants que nous allons utiliser en l’état fourni par le framework (sans en modifier l’aspect ou le comportement) vers la source consignée dans le dossier node_modules: @import "~@uk-components/base.scss";
  • Faire pointer les composants que nous allons surcharger (nous allons modifier l’aspect ou le comportement prévu par le framework) vers les fichiers consignés dans le dossier assets/styles: @import "link.scss";

[jQuery][SASS] Masquer les éléments d’une liste au-delà de 10 et les afficher au clic sur un bouton « Voir plus »

Source : nkd-show-more-list sur github. A ready-to-skin show more/show less jQuery/SASS component.

Live demo: https://jsfiddle.net/frontenddeveloper/fp7ntoyg/.

Usage

Just initialize the plug-in on an HTML UL/OL element, ID or class (on an UL/OL element), and set a value within the data-visible-amount attribute. Keep HTML and classes structure.

[SASS][BEM] @at-root et ampersand

Ressources en ligne:

  • Sass Techniques from the Trenches (version PDF), SUIT, BEM CSS conventions and the power of ampersand. There are loads of articles out there about how to do CSS architectural things like BEM, and articles about the features of Sass, but I think this article does the best job I’ve seen yet of linking between the two and showing how the features of Sass help you right good clean CSS code.

Source: Sass Snippets: The Almighty Ampersand

Almost Profound — Sass Snippets_ The Almighty Ampersand (PDF)

SCSS

CSS output:

The trailing Ampersand

SCSS

CSS output

SCSS

CSS output

A Much Simpler @at-Root

SCSS

CSS output

The double Ampersand

SCSS

CSS output

[Responsive design][SASS] Un tableau responsive en mode No More Tables (version 2017)

Sources sur github.com – responsive-tables.

Source de départ: No more tables – This technique was developed by Chris Coyier (@chriscoyier) and described in his post Responsive Data Tables at css-tricks.com. While you’re there, you should probably check out the Responsive Tables Roundup post, which showcases all these techniques and more.

Demo JSFiddle.net

jQuery (si besoin de fixer les hauteurs des rangées)

[Responsive design][jQuery][SASS] Un tableau responsive en mode Flip Scroll (version 2017)

Sources sur github.com – responsive-tables.

Source de départ: Responsive Tables – Flip Scroll. his technique was first published by David Bushell (@dbushell). For the full low down on this technique visit his post on the technique, Responsive Tables (2). While you’re there, it’s also worth checking out his responsive calendar proof of concept.

Demo jsFiddle.net; Même chose (optimisé par Anthony)

Attention: le système de mediaqueries SASS/JS dans le code qui va suivre est issu de Foundation 6.

[Foundation 6] Ajouter des couleurs à la palette par défaut et créer une palette de dégradés

[SASS] Fonctions et mixins pour manipuler les couleurs

Eclaircir une couleur avec la fonction Mix de SASS

Assombrir une couleur avec la fonction Mix de SASS