Mois : novembre 2017

[CSS] La propriété column-count (ou columns) coupe mes rangées de tableaux de façon arbitraire

29/11/2017 / admin

Source: How to prevent column break within an element?.

Problème:

.tabs-panel {
  column-count: 2;
}

.tabs-panel {

column-count: 2;

}

Solution:

.tabs-panel {
  column-count: 2;
  table {
    margin-bottom: 0;
    tr {
      -webkit-column-break-inside: avoid; /* Chrome, Safari */
      page-break-inside: avoid;           /* Theoretically FF 20+ */
      break-inside: avoid-column;         /* IE 11 */
      display: table;                     /* Actually FF 20+ */ 
      width: 100%;
      td {
        width: 50%;
      }
    }
  }
}

.tabs-panel {

column-count: 2;

table {

margin-bottom: 0;

tr {

-webkit-column-break-inside: avoid; /* Chrome, Safari */

page-break-inside: avoid; /* Theoretically FF 20+ */

break-inside: avoid-column; /* IE 11 */

display: table; /* Actually FF 20+ */

width: 100%;

td {

width: 50%;

}

[Foundation 6] Astuces, bonnes pratiques, ressources en ligne

28/11/2017 / admin

Thèmes

SD UI Foundation Themes – Free themes for the most advanced responsive front-end framework in the world (merci Gilles).

[jQuery] un sticky avec effet smooth

27/11/2017 / admin

var productPageHeaderOffsetTop = $('.product-page-header').offset().top;
var productPageHeaderParent = $('.product-page-header').parent();
productPageHeaderParent.height($('.product-page-header').outerHeight());
$(window).on('scroll touchmove', function () {
    if ($(window).scrollTop() >= productPageHeaderOffsetTop) {
        $('.product-page-header').css({
            'position': 'fixed',
            'top' : '0',
            'width': '100%',
            'z-index': '100',
            'height' : productPageHeaderParent.outerHeight()
        });
    } else {
        $('.product-page-header').removeAttr('style');
    }
});

var productPageHeaderOffsetTop = $('.product-page-header').offset().top;

var productPageHeaderParent = $('.product-page-header').parent();

productPageHeaderParent.height($('.product-page-header').outerHeight());

$(window).on('scroll touchmove', function () {

if ($(window).scrollTop() >= productPageHeaderOffsetTop) {

$('.product-page-header').css({

'position': 'fixed',

'top' : '0',

'width': '100%',

'z-index': '100',

'height' : productPageHeaderParent.outerHeight()

});

} else {

$('.product-page-header').removeAttr('style');

}

});

<div class="product-page-header-wrapper">
  <div class="product-page-header">[...]</div>
</div>

</div>

[jQuery] Passer $(this) dans une fonction à l’aide de thisObj

14/11/2017 / admin

$(function(){
  function productListTriggerAddToCart(thisObj){
    thisObj.prev('.js-add-to-cart').click();
  }

  $(document).on('click', '.js-trigger-add-to-cart', function(){
    productListTriggerAddToCart($(this));
  });
});

$(function(){

function productListTriggerAddToCart(thisObj){

thisObj.prev('.js-add-to-cart').click();

}

$(document).on('click', '.js-trigger-add-to-cart', function(){

productListTriggerAddToCart($(this));

});

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

}

Articles récents

Catégories

Archives

Méta

Mois : novembre 2017

[CSS] La propriété column-count (ou columns) coupe mes rangées de tableaux de façon arbitraire

[Foundation 6] Astuces, bonnes pratiques, ressources en ligne

Thèmes

[jQuery] un sticky avec effet smooth

[jQuery] Passer $(this) dans une fonction à l’aide de thisObj

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

Usage

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

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