Tagsass

[SASS][LESS] Remonter le DOM en CSS en utilisant l’esperluette

[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 :

[Foundation 6] Un mixin SASS utilisant une fonction étendue de map-get pour obtenir un effet sur une icône

Le but ici est d’associer à un titre une combinaison de deux icônes issues d’une police d’icônes: une grande et une petite calée en bas à droite de la grande.

HTML:

SASS:

Importer la librairie Sassy Maps de Hugo Giraudel

Nous allons utiliser la fonction map-deep-get de cette librairie dans notre mixin.

Créer le mixin SASS:

Ce mixin SASS récupère dans le tableau de variables ci-dessous la valeur font-size définie pour un élément HTML Hx en fonction d’un breakpoint:

Il calcule ensuite la taille de la grande et de la petite icône.

Utiliser ce mixin SASS:

© 2020 devfrontend.info

Theme by Anders NorénUp ↑