Étiquette : sass

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

16/06/2022 / admin

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

<div
    id="storeLocator"
    class="store-locator is-store--china">
        <div class="store-locator__map">
            <div id="mapControl" class="map-control">
                <input
                    type="text"
                    id="autocompleteField"
                    class="map-control--autocomplete__field"
                    placeholder="Enter a place">
                <button
                    id="geolocationButton"
                    class="map-control--geolocation__button">
                    <span>Me localiser</span>
                </button>
            </div>
            <div id="map" class="map">
                <?php // MUST remain empty; here comes the map ?>
            </div>
        </div>
        <div class="store-locator__result">
            <div class="result-filter"></div>
            <div class="result-list">
                <p>Result...</p>
            </div>
        </div>
    </div>
</div>

<div

id="storeLocator"

class="store-locator is-store--china">

<input

type="text"

id="autocompleteField"

class="map-control--autocomplete__field"

placeholder="Enter a place">

<button

id="geolocationButton"

class="map-control--geolocation__button">

<span>Me localiser</span>

</button>

</div>

<?php // MUST remain empty; here comes the map ?>

</div>

<p>Result...</p>

</div>

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.

.store-locator {} /* store-locator est un nouveau BLOCK */
.store-locator__map {} /* la map est un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

    .map-control {} /* map-control est un nouveau BLOCK, enfant du BLOCK store-locator */
        .map-control--autocomplete {} /* est un MODIFIER (autocomplete est un type/genre) de map-control comme la femme est un type/genre de personne */
            .map-control--autocomplete__field {} /* field est ELEMENT (une partie) de autocomplete */
        .map-control--geolocation {} /* est un MODIFIER (geolocation est un autre type/genre) de map-control */
            .map-control--geolocation__button {} /* button est un ELEMENT (une partie) de geolocation */

    .map {} /* map est un nouveau BLOCK, enfant du BLOCK store-locator */

.store-locator__result {} /* les result sont un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

    .result-filter {} /* result-filter est un nouveau BLOCK, enfant du BLOCK store-locator */

    .result-list {} /* result-list est un nouveau BLOCK, enfant du BLOCK store-locator (c'est une liste de boutiques ou de retailers mais, par principe d'abstraction, on ne le précise pas */

.store-locator {} /* store-locator est un nouveau BLOCK */

.store-locator__map {} /* la map est un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

.map-control {} /* map-control est un nouveau BLOCK, enfant du BLOCK store-locator */

.map-control--autocomplete {} /* est un MODIFIER (autocomplete est un type/genre) de map-control comme la femme est un type/genre de personne */

.map-control--autocomplete__field {} /* field est ELEMENT (une partie) de autocomplete */

.map-control--geolocation {} /* est un MODIFIER (geolocation est un autre type/genre) de map-control */

.map-control--geolocation__button {} /* button est un ELEMENT (une partie) de geolocation */

.map {} /* map est un nouveau BLOCK, enfant du BLOCK store-locator */

.store-locator__result {} /* les result sont un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

.result-filter {} /* result-filter est un nouveau BLOCK, enfant du BLOCK store-locator */

.result-list {} /* result-list est un nouveau BLOCK, enfant du BLOCK store-locator (c'est une liste de boutiques ou de retailers mais, par principe d'abstraction, on ne le précise pas */

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).

.store-locator {
    display: block;

    &__map {
        height: 100%;
    }

    &__result {}
}

.service-center {}

.boutique-selector {}

.map-control {
    max-width: 50%;

    &--autocomplete {

        &__field {}
    }

    &--geolocation {

        &__button {

            &:hover {}
        }
    }
}

.map {
    height: 100%;
}

.store-locator {

display: block;

&__map {

height: 100%;

}

&__result {}

}

.service-center {}

.boutique-selector {}

.map-control {

max-width: 50%;

&--autocomplete {

&__field {}

}

&--geolocation {

&__button {

&:hover {}

}

.map {

height: 100%;

}

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.

<a class="store store--is-retailer" href="#">
    <h3 class="store__name">Bartorelli 1882 Spa</h3>

1 2	<a class="store store--is-retailer" href="#"> <h3 class="store__name">Bartorelli 1882 Spa</h3>

.store {

    &--is-boutique & {
        &__name {
            color: #c40d2e;
        }
    }

    &--is-retailer & {
        &__name {
            color: #555555;
        }
    }

    &__name {
        font-weight: 700;
        font-size: 16px;
        text-transform: uppercase;
    }

.store {

&--is-boutique & {

&__name {

color: #c40d2e;

}

&--is-retailer & {

&__name {

color: #555555;

}

&__name {

font-weight: 700;

font-size: 16px;

text-transform: uppercase;

}

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.

.store-locator {
    border: 12px solid pink;
    &.is-store--china {
        border: 12px solid red;
    }
    &__map {
        border: 12px solid pink;
        .is-store--china & {
            border: 12px solid red;
        }
    }
}

.map-control {
    border: 12px solid pink;
    &--autocomplete {
        &__field {
            border: 6px solid pink !important;
        }
    }
    .is-store--china & {
        border: 12px solid red;
        &--autocomplete {
            &__field {
                border: 6px solid red !important;
            }
        }
    }
}

.store-locator {

border: 12px solid pink;

&.is-store--china {

border: 12px solid red;

}

&__map {

border: 12px solid pink;

.is-store--china & {

border: 12px solid red;

}

.map-control {

border: 12px solid pink;

&--autocomplete {

&__field {

border: 6px solid pink !important;

}

.is-store--china & {

border: 12px solid red;

&--autocomplete {

&__field {

border: 6px solid red !important;

}

[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

09/03/2021 / admin

Source: Webpack sass loader resolve absolute path

/webpack.config.js:

const path = require('path');
const Encore = require('@symfony/webpack-encore');

[...]

Encore
    .addAliases({
        '@uk': path.resolve(__dirname, './node_modules/uikit/src/scss'),
        '@uk-components': path.resolve(__dirname, './node_modules/uikit/src/scss/components'),
        '@uk-theme': path.resolve(__dirname, './node_modules/uikit/src/scss/theme')
    })

[...]

const path = require('path');

const Encore = require('@symfony/webpack-encore');

[...]

Encore

.addAliases({

'@uk': path.resolve(__dirname, './node_modules/uikit/src/scss'),

'@uk-components': path.resolve(__dirname, './node_modules/uikit/src/scss/components'),

'@uk-theme': path.resolve(__dirname, './node_modules/uikit/src/scss/theme')

})

[...]

/assets/styles/apps.scss.

// @import uikit
// https://getuikit.com/docs/sass#how-to-build

// @import your custom variables and variables overwrites here.
@import "~uikit/src/scss/variables.scss";
// @import your custom mixin overwrites here.
@import "~uikit/src/scss/mixins.scss";
@import "~uikit/src/scss/uikit.scss"; // Cherche d'abord l'existence d'une surcharge (./assets/styles/uikit/src/scss/uikit.scss) avant de pointer vers ./node_modules/uikit/src/scss/uikit.scss

// @import uikit

// https://getuikit.com/docs/sass#how-to-build

// @import your custom variables and variables overwrites here.

@import "~uikit/src/scss/variables.scss";

// @import your custom mixin overwrites here.

@import "~uikit/src/scss/mixins.scss";

@import "~uikit/src/scss/uikit.scss"; // Cherche d'abord l'existence d'une surcharge (./assets/styles/uikit/src/scss/uikit.scss) avant de pointer vers ./node_modules/uikit/src/scss/uikit.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";

// Base
@import "~@uk-components/base.scss"; // Fichier natif. Pointe vers: ./node_modules/uikit/src/scss/components/base.scss

// Elements
@import "link.scss"; // Surcharge. Pointe vers: ./assets/styles/uikit/src/scss/components/link.scss

// Base

@import "~@uk-components/base.scss"; // Fichier natif. Pointe vers: ./node_modules/uikit/src/scss/components/base.scss

// Elements

@import "link.scss"; // Surcharge. Pointe vers: ./assets/styles/uikit/src/scss/components/link.scss

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

30/04/2018 / admin

.js-quick-view {
  ul.rollover-content.top.in li.rollover-item:first-child & {
    border: 4px solid red !important;
  }
}

.js-quick-view {

ul.rollover-content.top.in li.rollover-item:first-child & {

border: 4px solid red !important;

}

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

10/11/2017 / admin

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.

<script type="text/javascript">
  $(function(){
    $('#myList').nkdShowMoreList();
  });
</script>

<div class="nkd-show-more-list no-js">
  <ul id="myList" class="nkd-list nkd-has-hidden-content" data-visible-amount="4">
    <li class="nkd-list-item">item #01</li>
    <li class="nkd-list-item">item #02</li>
    <li class="nkd-list-item">item #03</li>
    <li class="nkd-list-item">item #04</li>
    <li class="nkd-list-item">item #05</li>
    <li class="nkd-list-item">item #06</li>
    <li class="nkd-list-item">item #07</li>
    <li class="nkd-list-item">item #08</li>
    <li class="nkd-list-item">item #09</li>
    <li class="nkd-list-item">item #10</li>    
  </ul>
  <p class="nkd-actions nkd-hidden">
    <a class="nkd-show-more">
      Show more...
    </a>
    <a class="nkd-show-less">
      Show less...
    </a>
  </p>
</div>

$(function(){

$('#myList').nkdShowMoreList();

});

</script>

</ul>

</a>

Show less...

</a>

</p>

</div>

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

09/11/2017 / admin

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

.unicorn {
  background-color: blue;
  &:hover {
    outline: 2px solid yellow;
  }
  &.pink {
    background-color: pink;
    &wat {
      color: red;
    }
    &:hover {
      outine: 2px solid green;
    }
  }
}

.unicorn {

background-color: blue;

&:hover {

outline: 2px solid yellow;

}

&.pink {

background-color: pink;

&wat {

color: red;

}

&:hover {

outine: 2px solid green;

}

CSS output:

.unicorn {
  background-color: blue;
}
.unicorn:hover {
  outline: 2px solid yellow;
}
.unicorn.pink {
  background-color: pink;
}
.unicorn.pinkwat {
  color: red;
}
.unicorn.pink:hover {
  outine: 2px solid green;
}

.unicorn {

background-color: blue;

}

.unicorn:hover {

outline: 2px solid yellow;

}

.unicorn.pink {

background-color: pink;

}

.unicorn.pinkwat {

color: red;

}

.unicorn.pink:hover {

outine: 2px solid green;

}

The trailing Ampersand

SCSS

.unicorn {
  .set-one & {
    display: none;
  }
}

.button--large {
  .sidebar & {
    font-size: 80%;
  }
}

.unicorn {

.set-one & {

display: none;

}

.button--large {

.sidebar & {

font-size: 80%;

}

CSS output

.set-one .unicorn {
  display: none;
}

.sidebar .button--large {
  font-size: 80%;
}

.set-one .unicorn {

display: none;

}

.sidebar .button--large {

font-size: 80%;

}

SCSS

@mixin highlight() {
  color: coral;
  .sub-nav &, 
  .active &, 
  .sidebar &  {
    background-color: gold; 
  }
}
li a { @include highlight; }

@mixin highlight() {

color: coral;

.sub-nav &,

.active &,

.sidebar & {

background-color: gold;

}

li a { @include highlight; }

CSS output

li a {
  color: coral;
}
.sub-nav li a, .active li a, .sidebar li a {
  background-color: gold;
}

li a {

color: coral;

}

.sub-nav li a, .active li a, .sidebar li a {

background-color: gold;

}

A Much Simpler @at-Root

SCSS

// Previous Markup (Sass 3.3rc1)
.speech-bubble{
  color: purple;
   @at-root #{&}__header{
    color: orange;
  }
   @at-root #{&}__text{
    color: black;
     @at-root #{&}--link{
      color: green;
    }
  }
}

// New Markup (Sass 3.3rc3)
.speech-bubble{
  color: purple;
   &__header{
    color: orange;
  }
   &__text{
    color: black;
     &--link{
      color: green;
    }
  }
}

// Previous Markup (Sass 3.3rc1)

.speech-bubble{

color: purple;

@at-root #{&}__header{

color: orange;

}

@at-root #{&}__text{

color: black;

@at-root #{&}--link{

color: green;

}

// New Markup (Sass 3.3rc3)

.speech-bubble{

color: purple;

&__header{

color: orange;

}

&__text{

color: black;

&--link{

color: green;

}

CSS output

.speech-bubble{
  color: purple; 
}
.speech-bubble__header{
    color: orange; 
}
.speech-bubble__text{
    color: black; 
}
.speech-bubble__text--link{
      color: green; 
}

.speech-bubble{

color: purple;

}

.speech-bubble__header{

color: orange;

}

.speech-bubble__text{

color: black;

}

.speech-bubble__text--link{

color: green;

}

The double Ampersand

SCSS

.column--half {
  color: dimgrey;
  & + & {
    margin-left: 30px;
  }
}

.column--half {

color: dimgrey;

& + & {

margin-left: 30px;

}

CSS output

.column--half {
  color: dimgrey;
}
.column--half + .column--half {
  margin-left: 30px;
}

.column--half {

color: dimgrey;

}

.column--half + .column--half {

margin-left: 30px;

}

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

18/09/2017 / admin

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

@mixin no-more-tables-core() {
  /* Force table to not be like tables anymore */
	table, 
	thead, 
	tbody, 
	th, 
	td, 
	tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		white-space: normal;
    &:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      white-space: nowrap;
      /* Label the data	*/
      content: attr(data-title);
    }
	}
}

@mixin no-more-tables-skin(
  $thead-width: 33.33333%,
  $border-width: 1px, 
  $border-color: #ccc,
  $padding-y: 8px,
  $padding-x: 10px,
  $text-align: left,
  $thead-font-weight: 700){
  tr {
    border: $border-width solid $border-color;
  }
  td { 
    /* Behave  like a "row" */
    border-bottom: $border-width solid $border-color; 
    padding-left: $thead-width; 
    text-align: $text-align;
    &:before {
      /* Top/left values mimic padding */
      top: $padding-y;
      left: $padding-x;
      width: $thead-width - ($thead-width/10); 
      padding-right: $padding-x; 
      text-align: $text-align;
      font-weight: $thead-font-weight;
    }
  }
}

.no-more-tables {
  @include no-more-tables-core();
  @include no-more-tables-skin();
}

@mixin no-more-tables-core() {

/* Force table to not be like tables anymore */

table,

thead,

tbody,

th,

td,

tr {

display: block;

}

/* Hide table headers (but not display: none;, for accessibility) */

thead tr {

position: absolute;

top: -9999px;

left: -9999px;

}

td {

/* Behave like a "row" */

border: none;

position: relative;

white-space: normal;

&:before {

/* Now like a table header */

position: absolute;

/* Top/left values mimic padding */

white-space: nowrap;

/* Label the data */

content: attr(data-title);

}

@mixin no-more-tables-skin(

$thead-width: 33.33333%,

$border-width: 1px,

$border-color: #ccc,

$padding-y: 8px,

$padding-x: 10px,

$text-align: left,

$thead-font-weight: 700){

tr {

border: $border-width solid $border-color;

}

td {

/* Behave like a "row" */

border-bottom: $border-width solid $border-color;

padding-left: $thead-width;

text-align: $text-align;

&:before {

/* Top/left values mimic padding */

top: $padding-y;

left: $padding-x;

width: $thead-width - ($thead-width/10);

padding-right: $padding-x;

text-align: $text-align;

font-weight: $thead-font-weight;

}

.no-more-tables {

@include no-more-tables-core();

@include no-more-tables-skin();

}

<div class="no-more-tables">
  <table>
    <thead>
      <tr>
        <th>Code</th>
        <th>Company</th>
        <th>Price</th>
        <th>Change</th>
        <th>Change %</th>
        <th>Open</th>
        <th>High</th>
        <th>Low</th>
        <th>Volume</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-title="Code">AAC</td>
        <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
        <td data-title="Price">$1.38</td>
        <td data-title="Change">-0.01</td>
        <td data-title="Change %">-0.36%</td>
        <td data-title="Open">$1.39</td>
        <td data-title="High">$1.39</td>
        <td data-title="Low">$1.38</td>
        <td data-title="Volume">9,395</td>
      </tr>
      <tr>
        <td data-title="Code">AAD</td>
        <td data-title="Company">ARDENT LEISURE GROUP</td>
        <td data-title="Price">$1.15</td>
        <td data-title="Change">  +0.02</td>
        <td data-title="Change %">1.32%</td>
        <td data-title="Open">$1.14</td>
        <td data-title="High">$1.15</td>
        <td data-title="Low">$1.13</td>
        <td data-title="Volume">56,431</td>
      </tr>
      <tr>
        <td data-title="Code">AAX</td>
        <td data-title="Company">AUSENCO LIMITED</td>
        <td data-title="Price">$4.00</td>
        <td data-title="Change">-0.04</td>
        <td data-title="Change %">-0.99%</td>
        <td data-title="Open">$4.01</td>
        <td data-title="High">$4.05</td>
        <td data-title="Low">$4.00</td>
        <td data-title="Volume">90,641</td>
      </tr>
      <tr>
        <td data-title="Code">ABC</td>
        <td data-title="Company">ADELAIDE BRIGHTON LIMITED</td>
        <td data-title="Price">$3.00</td>
        <td data-title="Change">  +0.06</td>
        <td data-title="Change %">2.04%</td>
        <td data-title="Open">$2.98</td>
        <td data-title="High">$3.00</td>
        <td data-title="Low">$2.96</td>
        <td data-title="Volume">862,518</td>
      </tr>
      <tr>
        <td data-title="Code">ABP</td>
        <td data-title="Company">ABACUS PROPERTY GROUP</td>
        <td data-title="Price">$1.91</td>
        <td data-title="Change">0.00</td>
        <td data-title="Change %">0.00%</td>
        <td data-title="Open">$1.92</td>
        <td data-title="High">$1.93</td>
        <td data-title="Low">$1.90</td>
        <td data-title="Volume">595,701</td>
      </tr>
      <tr>
        <td data-title="Code">ABY</td>
        <td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td>
        <td data-title="Price">$0.77</td>
        <td data-title="Change">  +0.02</td>
        <td data-title="Change %">2.00%</td>
        <td data-title="Open">$0.76</td>
        <td data-title="High">$0.77</td>
        <td data-title="Low">$0.76</td>
        <td data-title="Volume">54,567</td>
      </tr>
      <tr>
        <td data-title="Code">ACR</td>
        <td data-title="Company">ACRUX LIMITED</td>
        <td data-title="Price">$3.71</td>
        <td data-title="Change">  +0.01</td>
        <td data-title="Change %">0.14%</td>
        <td data-title="Open">$3.70</td>
        <td data-title="High">$3.72</td>
        <td data-title="Low">$3.68</td>
        <td data-title="Volume">191,373</td>
      </tr>
      <tr>
        <td data-title="Code">ADU</td>
        <td data-title="Company">ADAMUS RESOURCES LIMITED</td>
        <td data-title="Price">$0.72</td>
        <td data-title="Change">0.00</td>
        <td data-title="Change %">0.00%</td>
        <td data-title="Open">$0.73</td>
        <td data-title="High">$0.74</td>
        <td data-title="Low">$0.72</td>
        <td data-title="Volume">8,602,291</td>
      </tr>
      <tr>
        <td data-title="Code">AGG</td>
        <td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td>
        <td data-title="Price" class="numeric">$7.81</td>
        <td data-title="Change" class="numeric">-0.22</td>
        <td data-title="Change %" class="numeric">-2.74%</td>
        <td data-title="Open" class="numeric">$7.82</td>
        <td data-title="High" class="numeric">$7.82</td>
        <td data-title="Low" class="numeric">$7.81</td>
        <td data-title="Volume" class="numeric">148</td>
      </tr>
      <tr>
        <td data-title="Code">AGK</td>
        <td data-title="Company">AGL ENERGY LIMITED</td>
        <td data-title="Price">$13.82</td>
        <td data-title="Change">  +0.02</td>
        <td data-title="Change %">0.14%</td>
        <td data-title="Open">$13.83</td>
        <td data-title="High">$13.83</td>
        <td data-title="Low">$13.67</td>
        <td data-title="Volume">846,403</td>
      </tr>
      <tr>
        <td data-title="Code">AGO</td>
        <td data-title="Company">ATLAS IRON LIMITED</td>
        <td data-title="Price">$3.17</td>
        <td data-title="Change">-0.02</td>
        <td data-title="Change %">-0.47%</td>
        <td data-title="Open">$3.11</td>
        <td data-title="High">$3.22</td>
        <td data-title="Low">$3.10</td>
        <td data-title="Volume">5,416,303</td>
      </tr>
    </tbody>
  </table>
</div>

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

<table>

<thead>

<tr>

<th>Company</th>

<th>Price</th>

<th>Change</th>

<th>Change %</th>

<th>Volume</th>

</tr>

</thead>

<tbody>

<tr>

<td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>

</tr>

<tr>

<td data-title="Company">ARDENT LEISURE GROUP</td>

</tr>

<tr>

<td data-title="Company">AUSENCO LIMITED</td>

</tr>

<tr>

<td data-title="Company">ADELAIDE BRIGHTON LIMITED</td>

</tr>

<tr>

<td data-title="Company">ABACUS PROPERTY GROUP</td>

</tr>

<tr>

<td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td>

</tr>

<tr>

<td data-title="Company">ACRUX LIMITED</td>

</tr>

<tr>

<td data-title="Company">ADAMUS RESOURCES LIMITED</td>

</tr>

<tr>

<td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td>

</tr>

<tr>

<td data-title="Company">AGL ENERGY LIMITED</td>

</tr>

<tr>

<td data-title="Company">ATLAS IRON LIMITED</td>

</tr>

</tbody>

</table>

</div>

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

    $('.no-more-tables td').each(function(){
      var $this = $(this);
      var thisHeight = $this.height();
      var thisGetZero = $this.get(0);
      var thisBeforeHeightPx = window.getComputedStyle(thisGetZero, ':before').height;
      var thisBeforeHeight = parseInt(thisBeforeHeightPx, 10);
      var thisPaddingY = 8;

      if(thisHeight > thisBeforeHeight) {
        $this.css('height', thisHeight + (thisPaddingY*2) + 'px');
      }
      if(thisHeight < thisBeforeHeight) {
        $this.css('height', thisBeforeHeight + (thisPaddingY*2) + 'px');
      }
      else if(thisHeight == thisBeforeHeight) {
        $this.css('height', thisHeight + (thisPaddingY*2) + 'px');
      }
    });

$('.no-more-tables td').each(function(){

var $this = $(this);

var thisHeight = $this.height();

var thisGetZero = $this.get(0);

var thisBeforeHeightPx = window.getComputedStyle(thisGetZero, ':before').height;

var thisBeforeHeight = parseInt(thisBeforeHeightPx, 10);

var thisPaddingY = 8;

if(thisHeight > thisBeforeHeight) {

$this.css('height', thisHeight + (thisPaddingY*2) + 'px');

}

if(thisHeight < thisBeforeHeight) {

$this.css('height', thisBeforeHeight + (thisPaddingY*2) + 'px');

}

else if(thisHeight == thisBeforeHeight) {

$this.css('height', thisHeight + (thisPaddingY*2) + 'px');

}

});

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

13/09/2017 / admin

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.

<div class="table-flip-scroll">
  <table>
    <thead>
      <tr>
        <th scope="col">Brand</th>
        <th scope="col">Reference</th>
        <th scope="col">Ranges</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>NTN</td>
        <td>6205</td>
        <td>Single row tapered roller bearings</td>
      </tr>
      <tr>
        <td>SNR</td>
        <td>6205, 6205, 6205, 6205, 6205</td>
        <td>Single row tapered roller bearings</td>
      </tr>
      <tr>
        <td>SNR</td>
        <td>6205</td>
        <td>
          <ul>
            <li>Single row tapered roller bearings</li>
            <li>Single row deep groove ball bearings</li>
            <li>Single row tapered roller bearings</li>
            <li>Single row deep groove ball bearings</li>
            <li>Single row tapered roller bearings</li>
          </ul>            
        </td>
      </tr>
      <tr>
        <td>SNR</td>
        <td>6205.E</td>
        <td>
          <ul>
            <li>Single row tapered roller bearings</li>
            <li>Single row deep groove ball bearings</li>
          </ul>
      </tr>
    </tbody>
  </table>
</div>

<table>

<thead>

<tr>

<th scope="col">Brand</th>

<th scope="col">Reference</th>

<th scope="col">Ranges</th>

</tr>

</thead>

<tbody>

<tr>

<td>Single row tapered roller bearings</td>

</tr>

<tr>

<td>Single row tapered roller bearings</td>

</tr>

<tr>

<td>

<ul>

<li>Single row tapered roller bearings</li>

<li>Single row deep groove ball bearings</li>

<li>Single row tapered roller bearings</li>

<li>Single row deep groove ball bearings</li>

<li>Single row tapered roller bearings</li>

</ul>

</td>

</tr>

<tr>

<td>

<ul>

<li>Single row tapered roller bearings</li>

<li>Single row deep groove ball bearings</li>

</ul>

</tr>

</tbody>

</table>

</div>

/*
 * jQuery Table Flip Scroll plug-in
 */
$.tableFlipScroll = function(selector){
  var obj = $(selector);

  function matchCellsHeights(columnIndex){
    columnIndex++
    var columnCellsHeights = $.map(obj.find('th:nth-child('+columnIndex+'), td:nth-child('+columnIndex+')'), function(val){
      return $(val).outerHeight();
    });

    var columnHighestCell = Math.max.apply(null, columnCellsHeights);

    obj.find('th:nth-child('+columnIndex+'), td:nth-child('+columnIndex+')').css('height', columnHighestCell +'px');      
  }

  var $th = obj.find('th');
  $th.each(function(index){
    matchCellsHeights(index);
  });
}



/*
 * Responsive Product List Table
 */
if($('.table-flip-scroll').length == 1){
  if(getCurrentMediaQuery === 'small' || getCurrentMediaQuery === 'medium'){
    $('body').css('border', '12px solid navy');
    $.tableFlipScroll('.table-flip-scroll');
  }
}

* jQuery Table Flip Scroll plug-in

$.tableFlipScroll = function(selector){

var obj = $(selector);

function matchCellsHeights(columnIndex){

columnIndex++

var columnCellsHeights = $.map(obj.find('th:nth-child('+columnIndex+'), td:nth-child('+columnIndex+')'), function(val){

return $(val).outerHeight();

});

var columnHighestCell = Math.max.apply(null, columnCellsHeights);

obj.find('th:nth-child('+columnIndex+'), td:nth-child('+columnIndex+')').css('height', columnHighestCell +'px');

}

var $th = obj.find('th');

$th.each(function(index){

matchCellsHeights(index);

});

}

* Responsive Product List Table

if($('.table-flip-scroll').length == 1){

if(getCurrentMediaQuery === 'small' || getCurrentMediaQuery === 'medium'){

$('body').css('border', '12px solid navy');

$.tableFlipScroll('.table-flip-scroll');

}

@mixin table-flip-scroll-core() {
  table { 
    display: block;
    position: relative;
    width: 100%; 
    border-collapse: collapse; 
    border-spacing: 0;
    thead {
      display: block; 
      float: left; 
      tr {
        display: block;
      }
    }
    tbody { 
      display: block; 
      width: auto; 
      position: relative; 
      overflow-x: auto; 
      white-space: nowrap;
      tr {
        display: inline-block; 
        vertical-align: top; 
      }
    }
    th,
    td {
      margin: 0; 
      vertical-align: top; 
      display: block;
      text-align: left;
    }
  }
}

@mixin table-flip-scroll-skin(
  $thead-width: 33.33333%, 
  $border-width: 1px, 
  $border-color: #ccc) {
  table {
    thead {
      width: $thead-width;
    }
    th {
      border-bottom: 0;
      border-left: 0;
    }
    td {
      border-left: 0;
      border-right: 0;
      border-bottom: 0;
    }
    tbody {
      tr {
        border-left: $border-width solid $border-color;
      }
    }
    th:last-child,
    td:last-child {
      border-bottom: $border-width solid $border-color;
    }
  }
}

@include breakpoint(medium down) {
  .table-flip-scroll {
    @include table-flip-scroll-core();
    @include table-flip-scroll-skin();
    .thead-second-row,
    .sort {
      display: none;
    } 
  }
}

@mixin table-flip-scroll-core() {

table {

display: block;

position: relative;

width: 100%;

border-collapse: collapse;

border-spacing: 0;

thead {

display: block;

float: left;

tr {

display: block;

}

tbody {

display: block;

width: auto;

position: relative;

overflow-x: auto;

white-space: nowrap;

tr {

display: inline-block;

vertical-align: top;

}

th,

td {

margin: 0;

vertical-align: top;

display: block;

text-align: left;

}

@mixin table-flip-scroll-skin(

$thead-width: 33.33333%,

$border-width: 1px,

$border-color: #ccc) {

table {

thead {

width: $thead-width;

}

th {

border-bottom: 0;

border-left: 0;

}

td {

border-left: 0;

border-right: 0;

border-bottom: 0;

}

tbody {

tr {

border-left: $border-width solid $border-color;

}

th:last-child,

td:last-child {

border-bottom: $border-width solid $border-color;

}

@include breakpoint(medium down) {

.table-flip-scroll {

@include table-flip-scroll-core();

@include table-flip-scroll-skin();

.thead-second-row,

.sort {

display: none;

}

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

08/08/2017 / admin

$foundation-palette: (
  primary: #0070b8,
  secondary: #f08a00,
  tertiary: #6f7072,
  quaternary: #003f6c,
  quinary: #fecc00,
  senary: #a6a8aa,
  success: #2dcc70,
  warning: #ffae00,
  alert: #e20d0d,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #000000;
$white: #ffffff;
$body-background: $white;
$body-font-color: $black;

@include add-foundation-colors;

$tertiary-color: get-color(tertiary);
$quaternary-color: get-color(quaternary);
$quinary-color: get-color(quinary);
$senary-color: get-color(senary);

$primary-color-white-25: mix(white, $primary-color, 25%);
$primary-color-white-50: mix(white, $primary-color, 50%);
$primary-color-black-25: mix(black, $primary-color, 25%);
$primary-color-black-50: mix(black, $primary-color, 50%);

$secondary-color-white-25: mix(white, $secondary-color, 25%);
$secondary-color-white-50: mix(white, $secondary-color, 50%);
$secondary-color-black-25: mix(black, $secondary-color, 25%);
$secondary-color-black-50: mix(black, $secondary-color, 50%);

$tertiary-color-white-25: mix(white, $tertiary-color, 25%);
$tertiary-color-white-50: mix(white, $tertiary-color, 50%);
$tertiary-color-black-25: mix(black, $tertiary-color, 25%);
$tertiary-color-black-50: mix(black, $tertiary-color, 50%);

$quaternary-color-white-25: mix(white, $quaternary-color, 25%);
$quaternary-color-white-50: mix(white, $quaternary-color, 50%);
$quaternary-color-black-25: mix(black, $quaternary-color, 25%);
$quaternary-color-black-50: mix(black, $quaternary-color, 50%);

$quinary-color-white-25: mix(white, $quinary-color, 25%);
$quinary-color-white-50: mix(white, $quinary-color, 50%);
$quinary-color-black-25: mix(black, $quinary-color, 25%);
$quinary-color-black-50: mix(black, $quinary-color, 50%);

$senary-color-white-25: mix(white, $senary-color, 25%);
$senary-color-white-50: mix(white, $senary-color, 50%);
$senary-color-black-25: mix(black, $senary-color, 25%);
$senary-color-black-50: mix(black, $senary-color, 50%);

$gradient-palette: (
  primary: (
    start: $primary-color,
    end:   $quaternary-color, 
  ),
  secondary: (
    start: $secondary-color,
    end:   $quinary-color, 
  ),
  tertiary: (
    start: $tertiary-color,
    end:   $senary-color, 
  ),
  quaternary: (
    start: #373738,
    end:   #535355, 
  ),
  quinary: (
    start: #d2d3d4,
    end:   #f5f5f5, 
  ),
  senary: (
    start: #e5f0f7,
    end:   #f2f8fb, 
  ),
);

$primary-gradient-start-color: map-deep-get($gradient-palette, primary, start);
$primary-gradient-end-color: map-deep-get($gradient-palette, primary, end);
$secondary-gradient-start-color: map-deep-get($gradient-palette, secondary, start);
$secondary-gradient-end-color: map-deep-get($gradient-palette, secondary, end);
$tertiary-gradient-start-color: map-deep-get($gradient-palette, tertiary, start);
$tertiary-gradient-end-color: map-deep-get($gradient-palette, tertiary, end);
$quaternary-gradient-start-color: map-deep-get($gradient-palette, quaternary, start);
$quaternary-gradient-end-color: map-deep-get($gradient-palette, quaternary, end);
$quinary-gradient-start-color: map-deep-get($gradient-palette, quinary, start);
$quinary-gradient-end-color: map-deep-get($gradient-palette, quinary, end);
$senary-gradient-start-color: map-deep-get($gradient-palette, senary, start);
$senary-gradient-end-color: map-deep-get($gradient-palette, senary, end);

$foundation-palette: (

primary: #0070b8,

secondary: #f08a00,

tertiary: #6f7072,

quaternary: #003f6c,

quinary: #fecc00,

senary: #a6a8aa,

success: #2dcc70,

warning: #ffae00,

alert: #e20d0d,

);

$light-gray: #e6e6e6;

$medium-gray: #cacaca;

$dark-gray: #8a8a8a;

$black: #000000;

$white: #ffffff;

$body-background: $white;

$body-font-color: $black;

@include add-foundation-colors;

$tertiary-color: get-color(tertiary);

$quaternary-color: get-color(quaternary);

$quinary-color: get-color(quinary);

$senary-color: get-color(senary);

$primary-color-white-25: mix(white, $primary-color, 25%);

$primary-color-white-50: mix(white, $primary-color, 50%);

$primary-color-black-25: mix(black, $primary-color, 25%);

$primary-color-black-50: mix(black, $primary-color, 50%);

$secondary-color-white-25: mix(white, $secondary-color, 25%);

$secondary-color-white-50: mix(white, $secondary-color, 50%);

$secondary-color-black-25: mix(black, $secondary-color, 25%);

$secondary-color-black-50: mix(black, $secondary-color, 50%);

$tertiary-color-white-25: mix(white, $tertiary-color, 25%);

$tertiary-color-white-50: mix(white, $tertiary-color, 50%);

$tertiary-color-black-25: mix(black, $tertiary-color, 25%);

$tertiary-color-black-50: mix(black, $tertiary-color, 50%);

$quaternary-color-white-25: mix(white, $quaternary-color, 25%);

$quaternary-color-white-50: mix(white, $quaternary-color, 50%);

$quaternary-color-black-25: mix(black, $quaternary-color, 25%);

$quaternary-color-black-50: mix(black, $quaternary-color, 50%);

$quinary-color-white-25: mix(white, $quinary-color, 25%);

$quinary-color-white-50: mix(white, $quinary-color, 50%);

$quinary-color-black-25: mix(black, $quinary-color, 25%);

$quinary-color-black-50: mix(black, $quinary-color, 50%);

$senary-color-white-25: mix(white, $senary-color, 25%);

$senary-color-white-50: mix(white, $senary-color, 50%);

$senary-color-black-25: mix(black, $senary-color, 25%);

$senary-color-black-50: mix(black, $senary-color, 50%);

$gradient-palette: (

primary: (

start: $primary-color,

end: $quaternary-color,

secondary: (

start: $secondary-color,

end: $quinary-color,

tertiary: (

start: $tertiary-color,

end: $senary-color,

quaternary: (

start: #373738,

end: #535355,

quinary: (

start: #d2d3d4,

end: #f5f5f5,

senary: (

start: #e5f0f7,

end: #f2f8fb,

);

$primary-gradient-start-color: map-deep-get($gradient-palette, primary, start);

$primary-gradient-end-color: map-deep-get($gradient-palette, primary, end);

$secondary-gradient-start-color: map-deep-get($gradient-palette, secondary, start);

$secondary-gradient-end-color: map-deep-get($gradient-palette, secondary, end);

$tertiary-gradient-start-color: map-deep-get($gradient-palette, tertiary, start);

$tertiary-gradient-end-color: map-deep-get($gradient-palette, tertiary, end);

$quaternary-gradient-start-color: map-deep-get($gradient-palette, quaternary, start);

$quaternary-gradient-end-color: map-deep-get($gradient-palette, quaternary, end);

$quinary-gradient-start-color: map-deep-get($gradient-palette, quinary, start);

$quinary-gradient-end-color: map-deep-get($gradient-palette, quinary, end);

$senary-gradient-start-color: map-deep-get($gradient-palette, senary, start);

$senary-gradient-end-color: map-deep-get($gradient-palette, senary, end);

[SASS] Fonctions et mixins pour manipuler les couleurs

08/08/2017 / admin

Documentation officielle (RGB Functions, HSL Functions, Opacity Functions).
A Visual Guide to Sass & Compass Color Functions – Jackie Balzer
Des fonctions pour éclairer ou assombrir une couleur, respectivement par le blanc ou le noir.

Sass lighten() and darken() vs mix() using black and white – A PEN BY Josh McCarty
Shades and Tints of a color.

Eclaircir une couleur avec la fonction Mix de SASS

mix(white, $color, $percentage);

1	mix(white, $color, $percentage);

Assombrir une couleur avec la fonction Mix de SASS

mix(black, $color, $percentage);

1	mix(black, $color, $percentage);

[CSS] Des bordures en dégradé

17/07/2017 / admin

Source : CSS Tricks – Gradient borders.

/*
 * gradient border
 */
@mixin gradient-border(
  $border-width: 10px,
  $gradient-top-color: $white,
  $gradient-bottom-color: $black) {
  position: relative;
  border-top: $border-width solid $gradient-top-color;
  border-bottom: $border-width solid $gradient-bottom-color;
  &:before,
  &:after {
    content: "";
    position: absolute;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from($gradient-top-color), to($gradient-bottom-color));
    background-image: -webkit-linear-gradient($gradient-top-color, $gradient-bottom-color);
    background-image: -moz-linear-gradient($gradient-top-color, $gradient-bottom-color);
    background-image: -o-linear-gradient($gradient-top-color, $gradient-bottom-color);
    background-image: linear-gradient($gradient-top-color, $gradient-bottom-color);
    top: -$border-width;
    bottom: -$border-width;
    width: $border-width;    
  }
  &:before {
    left: -$border-width;
    left: 0; //foundation 6
  }
  &:after {
    right: -$border-width;
    right: 0; //foundation 6
  }
}

* gradient border

@mixin gradient-border(

$border-width: 10px,

$gradient-top-color: $white,

$gradient-bottom-color: $black) {

position: relative;

border-top: $border-width solid $gradient-top-color;

border-bottom: $border-width solid $gradient-bottom-color;

&:before,

&:after {

content: "";

position: absolute;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from($gradient-top-color), to($gradient-bottom-color));

background-image: -webkit-linear-gradient($gradient-top-color, $gradient-bottom-color);

background-image: -moz-linear-gradient($gradient-top-color, $gradient-bottom-color);

background-image: -o-linear-gradient($gradient-top-color, $gradient-bottom-color);

top: -$border-width;

bottom: -$border-width;

width: $border-width;

}

&:before {

left: -$border-width;

left: 0; //foundation 6

}

&:after {

right: -$border-width;

right: 0; //foundation 6

}

border-image and linear-gradient

.top-to-bottom {
    border-width: 3px;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;    
    -o-border-image:
      -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;
}

.bottom-to-top {
    border-width: 3px;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;  
    -o-border-image:
      -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;
}

.left-to-right {
    border-width: 3px 0 3px 3px;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;  
    -o-border-image:
      -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to right, black, rgba(0, 0, 0, 0)) 1 100%; 
}

.right-to-left {
    border-width: 3px 3px 3px 0;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 0, 100% 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%; 
    -o-border-image:
      -o-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to left, black, rgba(0, 0, 0, 0)) 1 100%;     
}

.top-to-bottom {

border-width: 3px;

border-style: solid;

-webkit-border-image:

-webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;

-webkit-border-image:

-webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;

-moz-border-image:

-moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;

-o-border-image:

-o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;

border-image:

linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;

}

.bottom-to-top {

border-width: 3px;

border-style: solid;

-webkit-border-image:

-webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;

-webkit-border-image:

-webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;

-moz-border-image:

-moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;

-o-border-image:

-o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;

border-image:

linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;

}

.left-to-right {

border-width: 3px 0 3px 3px;

border-style: solid;

-webkit-border-image:

-webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;

-webkit-border-image:

-webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;

-moz-border-image:

-moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;

-o-border-image:

-o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;

border-image:

linear-gradient(to right, black, rgba(0, 0, 0, 0)) 1 100%;

}

.right-to-left {

border-width: 3px 3px 3px 0;

border-style: solid;

-webkit-border-image:

-webkit-gradient(linear, 0 0, 100% 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;

-webkit-border-image:

-webkit-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;

-moz-border-image:

-moz-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;

-o-border-image:

-o-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;

border-image:

linear-gradient(to left, black, rgba(0, 0, 0, 0)) 1 100%;

}

Pseudo Element Edges

.ps-top-to-bottom {
  position: relative;
  border-top: 3px solid black;
}
.ps-top-to-bottom:before, .ps-top-to-bottom:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent);
  background-image: linear-gradient(#000, transparent);
  top: -3px;
  bottom: -3px;
  width: 3px;
}
.ps-top-to-bottom:before {
  left: -3px;
}
.ps-top-to-bottom:after {
  right: -3px;
}

.bot-left {
  position: relative;
}
.bot-left:before, .bot-left:after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: -3px;
  
}
.bot-left:before {
  top: -3px;
  width: 3px;
  background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(transparent, #000);
  background-image: -moz-linear-gradient(transparent, #000);
  background-image: -o-linear-gradient(transparent, #000);
}
.bot-left:after {
  right: -3px;
  height: 3px;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(left, #000, transparent);
  background-image: -moz-linear-gradient(left, #000, transparent);
  background-image: -o-linear-gradient(left, #000, transparent);
}

.ps-top-to-bottom {

position: relative;

border-top: 3px solid black;

}

.ps-top-to-bottom:before, .ps-top-to-bottom:after {

content: "";

position: absolute;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));

top: -3px;

bottom: -3px;

width: 3px;

}

.ps-top-to-bottom:before {

left: -3px;

}

.ps-top-to-bottom:after {

right: -3px;

}

.bot-left {

position: relative;

}

.bot-left:before, .bot-left:after {

content: "";

position: absolute;

bottom: -3px;

left: -3px;

}

.bot-left:before {

top: -3px;

width: 3px;

background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000), to(transparent));

}

.bot-left:after {

right: -3px;

height: 3px;

background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#000), to(transparent));

}

Pseudo Element Block Knockout

.knockout-top-to-bottom {
  position: relative; 
}
.knockout-top-to-bottom:before, .knockout-top-to-bottom:after {
  content: "";
  position: absolute;
}
.knockout-top-to-bottom:before {
  top: -3px;
  left: -3px;
  bottom: 0;
  right: -3px;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent);
  z-index: -2;
}
.knockout-top-to-bottom:after {
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #a4b9ff;
}

.knockout-around {
  position: relative; 
}
.knockout-around:before, .knockout-around:after {
  content: "";
  position: absolute;
}
.knockout-around:before {
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background-image: -webkit-gradient(radial, right top, 10, 90% 0%, 150, from(#000), to(transparent));
  background-image: -webkit-radial-gradient(right top, 150px 230px, #000, transparent);
  background-image: -moz-radial-gradient(right top, farthest-corner, #000 0%, transparent 72%);
  z-index: -2;
}
.knockout-around:after {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #a4b9ff;
  z-index: -1;
}

.knockout-top-to-bottom {

position: relative;

}

.knockout-top-to-bottom:before, .knockout-top-to-bottom:after {

content: "";

position: absolute;

}

.knockout-top-to-bottom:before {

top: -3px;

left: -3px;

bottom: 0;

right: -3px;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));

z-index: -2;

}

.knockout-top-to-bottom:after {

z-index: -1;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: #a4b9ff;

}

.knockout-around {

position: relative;

}

.knockout-around:before, .knockout-around:after {

content: "";

position: absolute;

}

.knockout-around:before {

top: -3px;

left: -3px;

right: -3px;

bottom: -3px;

background-image: -webkit-gradient(radial, right top, 10, 90% 0%, 150, from(#000), to(transparent));

background-image: -webkit-radial-gradient(right top, 150px 230px, #000, transparent);

background-image: -moz-radial-gradient(right top, farthest-corner, #000 0%, transparent 72%);

z-index: -2;

}

.knockout-around:after {

top: 0;

left: 0;

bottom: 0;

right: 0;

background: #a4b9ff;

z-index: -1;

}

Multiple (Sized) Gradient Backgrounds

.multbg-top-to-bottom {
  border-top: 3px solid black;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image:
      -moz-linear-gradient(#000, transparent),
      -moz-linear-gradient(#000, transparent);
  background-image:
      -o-linear-gradient(#000, transparent),
      -o-linear-gradient(#000, transparent);
  background-image: 
      linear-gradient(#000, transparent),
      linear-gradient(#000, transparent);
  -moz-background-size: 3px 100%;
  background-size: 3px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat; 
}

.multbg-top-to-bottom {

border-top: 3px solid black;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));

background-image:

-moz-linear-gradient(#000, transparent),

-moz-linear-gradient(#000, transparent);

background-image:

-o-linear-gradient(#000, transparent),

-o-linear-gradient(#000, transparent);

background-image:

linear-gradient(#000, transparent),

linear-gradient(#000, transparent);

-moz-background-size: 3px 100%;

background-size: 3px 100%;

background-position: 0 0, 100% 0;

background-repeat: no-repeat;

}

Ressources en ligne sur BEM, Block Element Modifier

Example perso avec un store locator

Code HTML

Code CSS (LESS)

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

Organisation du code LESS en composants/BLOCKs

Autre exemple, avec du HTML cette fois:

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

Usage

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

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

Eclaircir une couleur avec la fonction Mix de SASS

Assombrir une couleur avec la fonction Mix de SASS

border-image and linear-gradient

Pseudo Element Edges

Pseudo Element Block Knockout

Multiple (Sized) Gradient Backgrounds

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