Étiquette : sass

[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

[CSS] Des bordures en dégradé

Source : CSS Tricks – Gradient borders.

border-image and linear-gradient

Pseudo Element Edges

Pseudo Element Block Knockout

Multiple (Sized) Gradient Backgrounds

[Foundation 6] Un habillage Custom pour le composant Tabs

Le markup standard du composant Tabs de Foundation 6 est conservé. On adapte juste les styles.

Ou sous forme de composant supplémentaire en rajoutant la classe tabs-table au <ul class="tabs"> standard :