Étiquette : breakpoint

[JavaScript] Mediaqueries et breakpoints en JS ES6+ avec la librairie breakpoint-helper

06/05/2021 / admin

Base de l’initialisation du helper

import bph from 'breakpoint-helper';

// UIkit v3.6.19 CSS breakpoints
// $breakpoint-small: 640px !default;
// $breakpoint-medium: 960px !default;
// $breakpoint-large: 1200px !default;
// $breakpoint-xlarge: 1600px !default;

const instance = bph({
    small: '640px',
    medium: '960px',
    large: '1200px',
    xlarge: '1600px',
});

import bph from 'breakpoint-helper';

// UIkit v3.6.19 CSS breakpoints

// $breakpoint-small: 640px !default;

// $breakpoint-medium: 960px !default;

// $breakpoint-large: 1200px !default;

// $breakpoint-xlarge: 1600px !default;

const instance = bph({

small: '640px',

medium: '960px',

large: '1200px',

xlarge: '1600px',

});

Utiliser la méthode `listen()` avec un breakpoint unique

(Mobile first!) On définit un breakpoint unique à (max-width: 1199px) au-delà duquel on exécute du code pour les Desktops.

La clé/name 'large' correspond à une largeur de 1200px. Le paramètre useMax permet l’ajout et le calcul de la valeur max-width.

const { listen } = instance;

const currentBreakpoint = listen(
    {
        name: 'large',
        useMax: true,
    },
    ({ matches }) => {
        if (matches) {
            // Execute code for Mobile devices
            console.log('Current breakpoint is: (max-width: 1199px)');
        } else {
            // Execute code for Desktop devices
            console.log('Current breakpoint is: (min-width: 1200px)');
        }
    }
);

const { listen } = instance;

const currentBreakpoint = listen(

{

useMax: true,

({ matches }) => {

if (matches) {

// Execute code for Mobile devices

console.log('Current breakpoint is: (max-width: 1199px)');

} else {

// Execute code for Desktop devices

console.log('Current breakpoint is: (min-width: 1200px)');

}

);

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

Cette solution alternative vous permet d’inclure du code pour nettoyer votre DOM dans le listener propre au breakpoint pour lequel vous initialisez également des choses.

const bpMobile = listen(
{
        name: 'large',
        useMax: true,
    },
    ({ matches }) => {
        if (matches) {
            // Initialiser
            console.log('EXECUTE code for: Mobile!');
        } else {
            // Nettoyer
            console.log('DESTROY code for: Mobile!');
        }
    }
);

const bpDesktop = listen('large', ({ matches }) => {
    if (matches) {
        // Initialiser
        console.log('EXECUTE code for: Desktop!');
    } else {
        // Nettoyer
        console.log('DESTROY code for: Desktop!');
    }
});

const bpMobile = listen(

{

useMax: true,

({ matches }) => {

if (matches) {

// Initialiser

console.log('EXECUTE code for: Mobile!');

} else {

// Nettoyer

console.log('DESTROY code for: Mobile!');

}

);

const bpDesktop = listen('large', ({ matches }) => {

if (matches) {

// Initialiser

console.log('EXECUTE code for: Desktop!');

} else {

// Nettoyer

console.log('DESTROY code for: Desktop!');

}

});

[Magento 2] Exploiter matchMedia pour passer des paramètres différents à un widget javascript en fonction du breakpoint

17/10/2019 / admin

Ressources en ligne:

HOW TO USE THE MAGENTO2 MODAL WIDGET – code. Montre bien comment passer des options et exécuter des méthodes lors d’un événement.

Attention: en work-in-progress… Au chargement de la page, selon qu’on soit en vue Mobile ou Desktop, les paramètres correspondants sont bien pris en compte mais il reste encore pas mal de soucis.

Doc officielle de Magento 2 relative à l’utilisation de matchMedia: JavaScript in Magento responsive design.

Fichier du core de Magento 2 à étudier: lib/web/mage/menu.js qui exploite matchMedia via l’alias mediaCheck et la brique $.ui.menu de jQueryUI.

Ressources externes, documentation…

[Magento2 devdocs] (officielle) jQuery widget coding standard, instanciation
La version 1.9 de jQuery UI (si, si…)

TODOs

lorsqu’on change de breakpoint sans recharger la page, les paramètres du widget ne sont pas mis à jour pour la nouvelle vue correspondante (voir pour une méthode destroy ou (mieux) refresh (edit: refresh semble ne pas vouloir fonctionner avec Magento 2).
la fonction bindAccordion ne permet pas l’ajout de méthodes ou d’événements (edit: j’ai dégagé la fonction)
cherry on the cake: le breakpoint courant devrait être détecté automatiquement (changement après chargement de page compris)

Mise en place:

\app\design\frontend\<Vendor_name>\<theme_name>\web\js\accordion-config.js

require([
    'jquery',
    'matchMedia',
    'accordion'
], function($, mediaCheck){
    'use strict';

    $(function () { // to ensure that code evaluates on page load

        var $accordionEl = $('#narrow-by-list');

        var bpMobileOptions = {
            openedState: "active-mobile",
            collapsible: false,
            multipleCollapsible: false
        };
        var bpDesktopOptions = {
            openedState: "active-desktop",
            collapsible: true,
            multipleCollapsible: true
        };

        // 1st init of widget, with no particular options.
        $accordionEl.accordion();

        // Prevent scroll to top when clicking on a[href="#"]
        $('.filter-options-collapsible-trigger', $accordionEl).on("click", function(e){
            e.preventDefault();
        });

        mediaCheck({
            media: '(min-width: 768px)',
            // Switch to Desktop Version
            entry: function () {
                /* The function that toggles page elements from desktop to mobile mode is called here */
                $('body').css('border', '12px solid tomato');

                $accordionEl
                    .accordion('destroy')
                    .accordion(bpDesktopOptions);
            },
            // Switch to Mobile Version
            exit: function () {
                /* The function that toggles page elements from mobile to desktop mode is called here*/
                $('body').css('border', '12px solid aqua');

                $accordionEl
                    .accordion('destroy')
                    .accordion(bpMobileOptions);
            }
        });
    });
});

require([

'jquery',

'matchMedia',

'accordion'

], function($, mediaCheck){

'use strict';

$(function () { // to ensure that code evaluates on page load

var $accordionEl = $('#narrow-by-list');

var bpMobileOptions = {

openedState: "active-mobile",

collapsible: false,

multipleCollapsible: false

};

var bpDesktopOptions = {

openedState: "active-desktop",

collapsible: true,

multipleCollapsible: true

};

// 1st init of widget, with no particular options.

$accordionEl.accordion();

// Prevent scroll to top when clicking on a[href="#"]

$('.filter-options-collapsible-trigger', $accordionEl).on("click", function(e){

e.preventDefault();

});

mediaCheck({

media: '(min-width: 768px)',

// Switch to Desktop Version

entry: function () {

/* The function that toggles page elements from desktop to mobile mode is called here */

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

$accordionEl

.accordion('destroy')

.accordion(bpDesktopOptions);

// Switch to Mobile Version

exit: function () {

/* The function that toggles page elements from mobile to desktop mode is called here*/

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

$accordionEl

.accordion('destroy')

.accordion(bpMobileOptions);

}

});

\app\design\frontend\<Vendor_name>\<theme_name>\requirejs-config.js

var config = {

    map: {
        '*': {
            'configAccordion': 'js/accordion-config'
        }
    },

    // Shim: when you're loading your dependencies, requirejs loads them all
    // concurrently. You need to set up a shim to tell requirejs that the library
    // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
    // on jQuery).
    shim: {
        'configAccordion': {
            deps: ['jquery']
        }
    }

};

var config = {

map: {

'*': {

'configAccordion': 'js/accordion-config'

}

// Shim: when you're loading your dependencies, requirejs loads them all

// concurrently. You need to set up a shim to tell requirejs that the library

// (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends

// on jQuery).

shim: {

'configAccordion': {

deps: ['jquery']

}

};

\app\design\frontend\<Vendor_name>\<theme_name>\Magento_LayeredNavigation\templates\layer\view.phtml

<script>
    requirejs( [ 'jquery', 'configAccordion' ], function ( $, configAccordion ) { } );
</script>

requirejs( [ 'jquery', 'configAccordion' ], function ( $, configAccordion ) { } );

</script>

HOW TO USE THE MAGENTO2 MODAL WIDGET

HTML

<button id="modal-btn">Click me</button>
<div id="modal-content">
	<div class="modal-inner-content">
		<h2>Modal Title</h2>
		<p>Modal content…..</p>
	</div>
</div>

<button id="modal-btn">Click me</button>

<h2>Modal Title</h2>

<p>Modal content…..</p>

</div>

JS

<script type="text/javascript">
    require(["jquery", "Magento_Ui/js/modal/modal"],function($, modal) {
        var options = {
            type: 'popup', // popup or slide
            responsive: true, // true = on smaller screens the modal slides in from the right
            title: 'Modal main title',
            buttons: [{ // Add array of buttons within the modal if you need.
                text: $.mage.__('Dismiss & Continue'),
                class: '',
                click: function () {
                    this.closeModal(); // This button closes the modal
                }
            }]
        };

        var popup = modal(options, $('#modal-content'));
        $("#modal-btn").click(function() {
            $('#modal-content').modal('openModal');
        });
    });
</script>

require(["jquery", "Magento_Ui/js/modal/modal"],function($, modal) {

var options = {

type: 'popup', // popup or slide

responsive: true, // true = on smaller screens the modal slides in from the right

title: 'Modal main title',

buttons: [{ // Add array of buttons within the modal if you need.

text: $.mage.__('Dismiss & Continue'),

click: function () {

this.closeModal(); // This button closes the modal

}

}]

};

var popup = modal(options, $('#modal-content'));

$("#modal-btn").click(function() {

$('#modal-content').modal('openModal');

});

</script>

[javascript] Importer des breakpoints CSS

17/10/2019 / admin

Article de lullabot.com: Importing CSS Breakpoints Into JavaScript. Demo Codepen.

Version PDF pour la postérité.

[javaScript] Importer ses points de rupture (breakpoints) CSS pour les utiliser avec javaScript

26/07/2018 / admin

Source: Importing CSS Breakpoints Into JavaScript

L’exemple utilise Bootstrap 3 mais est facilement transposable.

body:before {
  display: none;
}
@media (max-width: @screen-xs-max) {
  body:before {
    content: "xs";
  }
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  body:before {
    content: "sm";
  }
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  body:before {
    content: "md";
  }
}
@media (min-width: @screen-lg-min) {
  body:before {
    content: "lg";
  }
}

body:before {

display: none;

}

@media (max-width: @screen-xs-max) {

body:before {

content: "xs";

}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

body:before {

content: "sm";

}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {

body:before {

content: "md";

}

@media (min-width: @screen-lg-min) {

body:before {

content: "lg";

}

var breakpoint = {};
breakpoint.refreshValue = function () {
    this.value = window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/\"/g, '');
};
$(window).on('load resize', breakpoint.refreshValue());

if (breakpoint.value == 'xs') {
    console.log('XS breakpoint');
}
if (breakpoint.value == 'sm') {
    console.log('SM breakpoint');
}
if (breakpoint.value == 'md') {
    console.log('MD breakpoint');
}
if (breakpoint.value == 'lg') {
    console.log('LG breakpoint');
}

var breakpoint = {};

breakpoint.refreshValue = function () {

this.value = window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/\"/g, '');

};

$(window).on('load resize', breakpoint.refreshValue());

if (breakpoint.value == 'xs') {

console.log('XS breakpoint');

}

if (breakpoint.value == 'sm') {

console.log('SM breakpoint');

}

if (breakpoint.value == 'md') {

console.log('MD breakpoint');

}

if (breakpoint.value == 'lg') {

console.log('LG breakpoint');

}

[Foundation 6] Un off-canvas qui prend 50% de la largeur de la fenêtre

07/07/2017 / admin

Sources JS et SASS maintenues à jour ici : https://github.com/franklang/foundation-sites-plugins.

Dans notre example, le off-canvas de droite prend prend 50% de la largeur de la fenêtre pour les écrans medium et supérieurs.

Les plugins Foundation offcanvas, box (util), mediaquery (util) sont obligatoires.

HTML

http://foundation.zurb.com/sites/docs/off-canvas.html

SASS

#offCanvasRight.is-open {
  transform: translateX(0) !important;
}

#offCanvasRight.is-open {

transform: translateX(0) !important;

}

jQuery

;(function ($, window, undefined){
  
  /**
   * foundation.widerOffcanvas.js plugin
   *
   * Extends "Foundation for Sites" v6.4.1 off-canvas plugin
   * to provide a wider than 250px-standard width off-canvas.
   *
   * [WARNING] Tested for right-positioned off-canvas only so far.
   *
   * Required third-party components:
   * - foundation.core.js
   * - foundation.offcanvas.js
   * - foundation.util.box.js
   *
   * Usage:
   * $(document).widerOffcanvas({
   *   triggeringBreakpoint: 'medium',
   *   offCanvasID: '#offCanvasRight',
   *   pageID: '#page-wrapper'
   * });
   */

  $.fn.widerOffcanvas = function(options){

    var defaults = {
      triggeringBreakpoint: 'medium', // one of Foundation's breakpoint (small, medium, large, ...)
      offCanvasID: '#offCanvasRight', // target offcanvas element ID
      pageID: '#page-wrapper' // page ID
    }

    var settings = $.extend({}, defaults, options);

    /**
     * Destroy function (more of a DOM reset actually...)
     */
    function destroyWiderOffCanvas() {
      $(settings.offCanvasID, settings.pageID).attr('style', '');
    }

    /**
     * Set wider off-canvas specific width
     */
    function setWiderOffCanvasWidth() {
      var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));
      var pageSideMarginWidth = (globalWidth.parentDims.width - globalWidth.width)/2;
      var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333;
      var widerOffCanvasWidth = pageSideMarginWidth + baseWiderOffCanvasWidth;
      console.log(pageSideMarginWidth + ', ' + baseWiderOffCanvasWidth + ', ' + widerOffCanvasWidth);
      
      $(settings.offCanvasID).css({
        'width': widerOffCanvasWidth,
        '-webkit-transform': 'translateX(' + widerOffCanvasWidth + 'px)',
        '-ms-transform': 'translateX(' + widerOffCanvasWidth + 'px)',
        'transform': 'translateX(' + widerOffCanvasWidth + 'px)'
      });
    }

    /**
     * Set page indent value (page slides to the opposite side regarding where off-canvas opens)
     */
    function setPageIndentValue() {
      var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));
      var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333;
      
      $(settings.offCanvasID).on('opened.zf.offcanvas', function() {
        $(settings.pageID).css({
          '-webkit-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)',
          '-ms-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)',
          'transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)'
        });
      }).on('closed.zf.offcanvas', function() {
        $(settings.pageID).attr('style', ' ');
      });
    }

    /**
     * On document ready...
     */
    if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) {
      setWiderOffCanvasWidth();
      setPageIndentValue();
    }    

    /**
     * On window resize...
     */
    $(window).on('resize', function() {
      destroyWiderOffCanvas();
      
      var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));

      if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) {
        setWiderOffCanvasWidth();
        setPageIndentValue();
      }
    });
  };

}(jQuery, window));

100

;(function ($, window, undefined){

/**

* foundation.widerOffcanvas.js plugin

* Extends "Foundation for Sites" v6.4.1 off-canvas plugin

* to provide a wider than 250px-standard width off-canvas.

* [WARNING] Tested for right-positioned off-canvas only so far.

* Required third-party components:

* - foundation.core.js

* - foundation.offcanvas.js

* - foundation.util.box.js

* Usage:

* $(document).widerOffcanvas({

* triggeringBreakpoint: 'medium',

* offCanvasID: '#offCanvasRight',

* pageID: '#page-wrapper'

* });

$.fn.widerOffcanvas = function(options){

var defaults = {

triggeringBreakpoint: 'medium', // one of Foundation's breakpoint (small, medium, large, ...)

offCanvasID: '#offCanvasRight', // target offcanvas element ID

pageID: '#page-wrapper' // page ID

}

var settings = $.extend({}, defaults, options);

/**

* Destroy function (more of a DOM reset actually...)

function destroyWiderOffCanvas() {

$(settings.offCanvasID, settings.pageID).attr('style', '');

}

/**

* Set wider off-canvas specific width

function setWiderOffCanvasWidth() {

var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));

var pageSideMarginWidth = (globalWidth.parentDims.width - globalWidth.width)/2;

var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333;

var widerOffCanvasWidth = pageSideMarginWidth + baseWiderOffCanvasWidth;

console.log(pageSideMarginWidth + ', ' + baseWiderOffCanvasWidth + ', ' + widerOffCanvasWidth);

$(settings.offCanvasID).css({

'width': widerOffCanvasWidth,

'-webkit-transform': 'translateX(' + widerOffCanvasWidth + 'px)',

'-ms-transform': 'translateX(' + widerOffCanvasWidth + 'px)',

'transform': 'translateX(' + widerOffCanvasWidth + 'px)'

});

}

/**

* Set page indent value (page slides to the opposite side regarding where off-canvas opens)

function setPageIndentValue() {

var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));

var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333;

$(settings.offCanvasID).on('opened.zf.offcanvas', function() {

$(settings.pageID).css({

'-webkit-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)',

'-ms-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)',

'transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)'

});

}).on('closed.zf.offcanvas', function() {

$(settings.pageID).attr('style', ' ');

});

}

/**

* On document ready...

if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) {

setWiderOffCanvasWidth();

setPageIndentValue();

}

/**

* On window resize...

$(window).on('resize', function() {

destroyWiderOffCanvas();

var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));

if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) {

setWiderOffCanvasWidth();

setPageIndentValue();

}

});

};

}(jQuery, window));

[Foundation 6] Une fonction pour récupérer les valeurs des breakpoints Current, From, To

07/07/2017 / admin

Code source maintenu ici : https://github.com/franklang/foundation-sites-js-utils/tree/master.

Cette fonction permet de récupérer, au chargement de la page :

la valeur (Current) du breakpoint en cours.

Puis chaque fois que la largeur de la fenêtre est modifiée (redimensionnement, passage portrait/paysage, autre…) :

la valeur (From) du breakpoint précédent,
la valeur (to) du nouveau breakpoint en cours.

// Foundation 6 MediaQuery info function
function zfMediaQueryInfo() {
  var currentSize = Foundation.MediaQuery.current;
  console.log('Current: ' + currentSize);

  $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
    console.log('From: ' + oldSize + ' to: ' + newSize);

    var medium2small = oldSize == 'medium' && newSize == 'small';
    var medium2large = oldSize == 'medium' && newSize == 'large';
    
    if(medium2small){
     console.log('from MEDIUM to SMALL');
    }
    if(medium2large){
     console.log('from MEDIUM to LARGE');
    }
  });
}
zfMediaQueryInfo();

// Foundation 6 MediaQuery info function

function zfMediaQueryInfo() {

var currentSize = Foundation.MediaQuery.current;

console.log('Current: ' + currentSize);

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {

console.log('From: ' + oldSize + ' to: ' + newSize);

var medium2small = oldSize == 'medium' && newSize == 'small';

var medium2large = oldSize == 'medium' && newSize == 'large';

if(medium2small){

console.log('from MEDIUM to SMALL');

}

if(medium2large){

console.log('from MEDIUM to LARGE');

}

});

}

zfMediaQueryInfo();

Optimiser et synchroniser l’exécution de media queries CSS et JS avec Sync MQ

15/09/2016 / admin

Alternative intéressante: @include-media – Simple, elegant and maintainable media queries in Sass. Couplé à include-media-export – An include-media plugin for exporting breakpoints from Sass to JavaScript.

Avant propos : certains des CMS les plus récents du marché proposent nativement des solutions équivalentes à Sync MQ pour gérer et/ou synchroniser l’exécution de media queries CSS et JS. Pour d’évidentes raisons de compréhension et de maintenabilité de votre code source, je vous conseille de vous tourner plutôt vers ces solutions lorsqu’elles existent.

Sync MQ: pour quoi faire?

Qu’on démarre un projet de site internet de zéro ou qu’un client nous demande une nouvelle mouture, à destination des supports mobiles, de son site existant (qui tourne sous une solution qui ne prend pas en charge les concepts de responsive design), la question de la gestion et de l’adaptation de l’affichage sur différents périphériques de navigation (ordinateurs, tablettes, smartphones) se pose rapidement. Si l’utilisation de media queries s’impose immédiatement comme une évidence dans nos feuilles de styles qu’en est-il en revanche de l’exécution, pour un support donné, de code JavaScript? Et existe-t’il un moyen simple de gérer, d’optimiser votre code CSS (ou LESS, ou SASS, ou autre préprocesseur…) et JS et de synchroniser leur exécution ?

C’est pour répondre à cette double problématique qu’intervient Sync MQ dont le concept est :

de simplifier l’écriture et la déclaration de media queries par rapport aux méthodes traditionnelles,
de faciliter la synchronisation de l’exécution de media queries tant au niveau de vos styles que du code JavaScript.

Demo sur JSFiddle.net.

Les sources de Sync MQ que vous trouverez sous GitHub à l’heure ou j’écris ces lignes exploitent des dépendances telles qu’Enquire JS et le composant Grid de Bootstrap 3 parce que c’est celles avec lesquelles j’aime travailler. Mais Sync MQ est avant tout un concept que rien ne vous empêche d’intégrer à vos propres habitudes de travail. Vous pouvez tout-à-fait remplacer Enquire JS par la brique mq de Modernizr ou le composant Grid de Bootstrap 3 par celui proposé par le framework Foundation 4.

De l’art de bien choisir ses points de rupture.

=> Web Stats

Et mon code JavaScript dans tout ça?

Quel intérêt de faire appel à une dépendance telle qu’Enquire JS alors qu’une ligne de code JavaScript suffirait à exécuter du code pour un support donné?

Pour un point de rupture donné (mettons, 800px) et suivant le navigateur utilisé, la méthode $(window).width() de jQuery et les Media Queries CSS3 ne sont pas exécutées systématiquement au même moment.

$(window).resize(function(){
	if ($(window).width() <= 800){	
		// faire quelque chose ici...
	}	
});

$(window).resize(function(){

if ($(window).width() <= 800){

// faire quelque chose ici...

}

});

A Code Example of the Difference Between jQuery Window Width and CSS Media Query width measurements.

Dans cet exemple, l’auteur démontre que […].

_sync-mq.scss

On commence par créer des variables aux libellés parlants pour remplacer le code (moins digeste) traditionnellement utilisé en CSS pour la déclaration de media queries.

$bpMobile: "(max-width: #{$screen-sm-max})";
$bpSmartphone: "(max-width: #{$screen-xs-max})";
$bpTablet: "(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})";
$bpTabletUp: "(min-width: #{$screen-sm-min})";
$bpDesktop: "(min-width: #{$screen-md-min})";
$bpSmallDesktop: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})";
$bpLargeDesktop: "(min-width: #{$screen-lg-min})";

$bpMobile: "(max-width: #{$screen-sm-max})";

$bpSmartphone: "(max-width: #{$screen-xs-max})";

$bpTablet: "(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})";

$bpTabletUp: "(min-width: #{$screen-sm-min})";

$bpDesktop: "(min-width: #{$screen-md-min})";

$bpSmallDesktop: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})";

$bpLargeDesktop: "(min-width: #{$screen-lg-min})";

Comme décrit plus haut, les points de rupture retenus ne ciblent pas uniquement un ou plusieurs supports donnés (iPhone, iPad, Amstrad CPC) en fonction de leurs résolutions mais :

des ensembles moyens de résolutions rencontrées par périphériques (Smartphone, Tablette, Desktop),
les résolutions que les clients nous demandent le plus souvent de cibler.

Les valeurs affectées à ces variables aux libellés allégés font directement référence à celles des points de rupture définis dans les variables du framework Bootstrap 3 (version SASS).

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

//== Media queries breakpoints

//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone

//** Deprecated `$screen-xs` as of v3.0.1

$screen-xs: 480px !default;

//** Deprecated `$screen-xs-min` as of v3.2.0

$screen-xs-min: $screen-xs !default;

//** Deprecated `$screen-phone` as of v3.0.1

$screen-phone: $screen-xs-min !default;

// Small screen / tablet

//** Deprecated `$screen-sm` as of v3.0.1

$screen-sm: 768px !default;

$screen-sm-min: $screen-sm !default;

//** Deprecated `$screen-tablet` as of v3.0.1

$screen-tablet: $screen-sm-min !default;

// Medium screen / desktop

//** Deprecated `$screen-md` as of v3.0.1

$screen-md: 992px !default;

$screen-md-min: $screen-md !default;

//** Deprecated `$screen-desktop` as of v3.0.1

$screen-desktop: $screen-md-min !default;

// Large screen / wide desktop

//** Deprecated `$screen-lg` as of v3.0.1

$screen-lg: 1200px !default;

$screen-lg-min: $screen-lg !default;

//** Deprecated `$screen-lg-desktop` as of v3.0.1

$screen-lg-desktop: $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;

Ces mêmes valeurs sont immédiatement ré-exploitées dans Bootstrap pour construire les styles du composant Grid.

Aussi, on retrouvera dans Sync MQ parmi les habituelles Smartphone, Tablette et Desktop, des media queries englobant:

l’ensemble des Mobiles ($bpMobile pour Smartphone et Tablette),
les Tablettes et au-delà ($bpTabletUp),
les petits et larges Desktops séparément ($bpSmallDesktop et $bpLargeDesktop).

Pour cibler par exemple les résolutions à partir des tablettes et au-delà, au lieu d’écrire:

@media (min-width: #{$screen-sm-min}) { body{ border: 10px solid tomato; } }

1	@media (min-width: #{$screen-sm-min}) { body{ border: 10px solid tomato; } }

J’écris désormais:

@media #{$bpTabletUp} { body{ border: 10px solid tomato; } }

1	@media #{$bpTabletUp} { body{ border: 10px solid tomato; } }

Quelques astuces d’utilisation:

Lorsque vous choisissez un plug-in JS amené à être exécuté en fonction d’un point de rupture, veillez à ce qu’il possède une méthode .destroy() et/ou .reload(). C’est le cas, par exemple, du carousel BxSlider. La présence de ce type d’options vous dispensera de nettoyer vous-même un DOM modifié par l’exécution d’un plug-in lorsque vous souhaiterez en annuler les effets pour une vue donnée.
Trois résolutions sont en réalité disponibles pour Amstrad CPC: 160×200 pixels avec 16 couleurs, 320×200 pixels avec 4 couleurs, et 640×200 pixels avec 2 couleurs. De quoi rentabiliser immédiatement l’utilisation de Sync MQ.

Un peu de documentation:

enquire JS
Bootsrap 3 Grid component mediaqueries
Bootstrap SASS variables
Defining Breakpoints sur Open Web
Where And How To Set Breakpoints In Media Queries
Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width – jQuery $(window).width() and CSS3 Media Queries do not always match.
Abnormal media query handling in Fire Fox

HTML

<p><a href="http://getbootstrap.com/css/#grid">Bootstrap 3 grid component documentation</a></p>

<h2>CSS mediaqueries :</h2>
<div class="css-mediaqueries">
  <p class="bp bpMobile">bpMobile</p>
  <p class="bp bpSmartphone">bpSmartphone</p>
  <p class="bp bpTablet">bpTablet</p>
  <p class="bp bpTabletUp">bpTabletUp (Tablet + up)</p>
  <p class="bp bpDesktop">bpDesktop</p>
  <p class="bp bpSmallDesktop">bpSmallDesktop</p>
  <p class="bp bpLargeDesktop">bpLargeDesktop</p>
</div>

<h2>JS mediaqueries :</h2>
<div class="js-mediaqueries">
  <p class="bp js-bpMobile">bpMobile</p>
  <p class="bp js-bpSmartphone">bpSmartphone</p>
  <p class="bp js-bpTablet">bpTablet</p>
  <p class="bp js-bpTabletUp">bpTabletUp (Tablet + up)</p>
  <p class="bp js-bpDesktop">bpDesktop</p>
  <p class="bp js-bpSmallDesktop">bpSmallDesktop</p>
  <p class="bp js-bpLargeDesktop">bpLargeDesktop</p>
</div>

<p><a href="http://getbootstrap.com/css/#grid">Bootstrap 3 grid component documentation</a></p>

<h2>CSS mediaqueries :</h2>

<p class="bp bpMobile">bpMobile</p>

<p class="bp bpSmartphone">bpSmartphone</p>

<p class="bp bpTablet">bpTablet</p>

<p class="bp bpTabletUp">bpTabletUp (Tablet + up)</p>

<p class="bp bpDesktop">bpDesktop</p>

<p class="bp bpSmallDesktop">bpSmallDesktop</p>

<p class="bp bpLargeDesktop">bpLargeDesktop</p>

</div>

<h2>JS mediaqueries :</h2>

<p class="bp js-bpMobile">bpMobile</p>

<p class="bp js-bpSmartphone">bpSmartphone</p>

<p class="bp js-bpTablet">bpTablet</p>

<p class="bp js-bpTabletUp">bpTabletUp (Tablet + up)</p>

<p class="bp js-bpDesktop">bpDesktop</p>

<p class="bp js-bpSmallDesktop">bpSmallDesktop</p>

<p class="bp js-bpLargeDesktop">bpLargeDesktop</p>

</div>

CSS (SASS)

// from: https://github.com/twbs/bootstrap-sass/blob/3.3-stable/assets/stylesheets/bootstrap/_variables.scss#L286

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

// Breakpoints aliases
$bpSmartphone: "(max-width: #{$screen-xs-max})";
$bpTablet: "(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})";
$bpSmallDesktop: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})";
$bpLargeDesktop: "(min-width: #{$screen-lg-min})";

$bpMobile: "(max-width: #{$screen-sm-max})";
$bpTabletUp: "(min-width: #{$screen-sm-min})";
$bpDesktop: "(min-width: #{$screen-md-min})";


// See it in action :
.css-mediaqueries .bp{
  display: none;
}

@media #{$bpMobile} {
  .bp.bpMobile{
    display: block;
  }
}

@media #{$bpSmartphone} {
  .bp.bpSmartphone{
    display: block;
  }
}

@media #{$bpTablet} {
  .bp.bpTablet{
    display: block;
  }
}

@media #{$bpTabletUp} {
  .bp.bpTabletUp{
    display: block;
  }
}

@media #{$bpDesktop} {
  .bp.bpDesktop{
    display: block;
  }
}

@media #{$bpSmallDesktop} {
  .bp.bpSmallDesktop{
    display: block;
  }
}

@media #{$bpLargeDesktop} {
  .bp.bpLargeDesktop{
    display: block;
  }
}

// from: https://github.com/twbs/bootstrap-sass/blob/3.3-stable/assets/stylesheets/bootstrap/_variables.scss#L286

//== Media queries breakpoints

//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone

//** Deprecated `$screen-xs` as of v3.0.1

$screen-xs: 480px !default;

//** Deprecated `$screen-xs-min` as of v3.2.0

$screen-xs-min: $screen-xs !default;

//** Deprecated `$screen-phone` as of v3.0.1

$screen-phone: $screen-xs-min !default;

// Small screen / tablet

//** Deprecated `$screen-sm` as of v3.0.1

$screen-sm: 768px !default;

$screen-sm-min: $screen-sm !default;

//** Deprecated `$screen-tablet` as of v3.0.1

$screen-tablet: $screen-sm-min !default;

// Medium screen / desktop

//** Deprecated `$screen-md` as of v3.0.1

$screen-md: 992px !default;

$screen-md-min: $screen-md !default;

//** Deprecated `$screen-desktop` as of v3.0.1

$screen-desktop: $screen-md-min !default;

// Large screen / wide desktop

//** Deprecated `$screen-lg` as of v3.0.1

$screen-lg: 1200px !default;

$screen-lg-min: $screen-lg !default;

//** Deprecated `$screen-lg-desktop` as of v3.0.1

$screen-lg-desktop: $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;

// Breakpoints aliases

$bpSmartphone: "(max-width: #{$screen-xs-max})";

$bpTablet: "(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})";

$bpSmallDesktop: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})";

$bpLargeDesktop: "(min-width: #{$screen-lg-min})";

$bpMobile: "(max-width: #{$screen-sm-max})";

$bpTabletUp: "(min-width: #{$screen-sm-min})";

$bpDesktop: "(min-width: #{$screen-md-min})";

// See it in action :

.css-mediaqueries .bp{

display: none;

}

@media #{$bpMobile} {

.bp.bpMobile{

display: block;

}

@media #{$bpSmartphone} {

.bp.bpSmartphone{

display: block;

}

@media #{$bpTablet} {

.bp.bpTablet{

display: block;

}

@media #{$bpTabletUp} {

.bp.bpTabletUp{

display: block;

}

@media #{$bpDesktop} {

.bp.bpDesktop{

display: block;

}

@media #{$bpSmallDesktop} {

.bp.bpSmallDesktop{

display: block;

}

@media #{$bpLargeDesktop} {

.bp.bpLargeDesktop{

display: block;

}

JS (enquire, jQuery)

// enquire JS documentation : http://wicky.nillia.ms/enquire.js/

// breakpoints global vars
	// bootstrap grid breakpoints values
  // from: https://github.com/twbs/bootstrap-sass/blob/3.3-stable/assets/stylesheets/bootstrap/_variables.scss#L286
	var bs_screen_xs_min = '480';
			bs_screen_sm_min = '768';
			bs_screen_md_min = '992';
			bs_screen_lg_min = '1200';
			bs_screen_xs_max = bs_screen_sm_min - 1;
			bs_screen_sm_max = bs_screen_md_min - 1;
			bs_screen_md_max = bs_screen_lg_min - 1;

  // enquire JS breakpoints aliases
  // (as seen on Bootstrap documentation: http://getbootstrap.com/css/#grid-media-queries)
			bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';
			bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';
			bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';
			bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';

			bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';
			bpTabletUp = 'screen and (min-width: '+ bs_screen_sm_min +'px)';
			bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';


function resetJSDOM(){
	$('.js-mediaqueries p.bp').hide();
} 
resetJSDOM();

// enquire JS
enquire.register(bpMobile, {
  match : function() {
    // console.log('bpMobile');
		$('p.bp.js-bpMobile').show();
	},
  unmatch : function() {
  	$('p.bp.js-bpMobile').hide();
  }
});

enquire.register(bpSmartphone, {
  match : function() {
    // console.log('bpSmartphone');   
    $('p.bp.js-bpSmartphone').show();
  },
  unmatch : function() {
  	$('p.bp.js-bpSmartphone').hide();
  }
});

enquire.register(bpTablet, {
  match : function() {
    // console.log('bpTablet');    
    $('p.bp.js-bpTablet').show();
  },
  unmatch : function() {
  	$('p.bp.js-bpTablet').hide();
  }
});

enquire.register(bpTabletUp, {
  match : function() {
    // console.log('bpTabletUp');
    $('p.bp.js-bpTabletUp').show();    
  },
  unmatch : function() {
  	$('p.bp.js-bpTabletUp').hide();
  }
});

enquire.register(bpDesktop, {
  match : function() {  
    // console.log('bpDesktop');
    $('p.bp.js-bpDesktop').show();    
  },
  unmatch : function() {
  	$('p.bp.js-bpDesktop').hide();
  }
});

enquire.register(bpSmallDesktop, {
  match : function() { 
    // console.log('bpSmallDesktop');
    $('p.bp.js-bpSmallDesktop').show();    
  },
  unmatch : function() {
  	$('p.bp.js-bpSmallDesktop').hide();
  }
});

enquire.register(bpLargeDesktop, {
  match : function() {
    // console.log('bpLargeDesktop');
    $('p.bp.js-bpLargeDesktop').show();    
  },
  unmatch : function() {
  	$('p.bp.js-bpLargeDesktop').hide(); 
  }
});

100

// enquire JS documentation : http://wicky.nillia.ms/enquire.js/

// breakpoints global vars

// bootstrap grid breakpoints values

// from: https://github.com/twbs/bootstrap-sass/blob/3.3-stable/assets/stylesheets/bootstrap/_variables.scss#L286

var bs_screen_xs_min = '480';

bs_screen_sm_min = '768';

bs_screen_md_min = '992';

bs_screen_lg_min = '1200';

bs_screen_xs_max = bs_screen_sm_min - 1;

bs_screen_sm_max = bs_screen_md_min - 1;

bs_screen_md_max = bs_screen_lg_min - 1;

// enquire JS breakpoints aliases

// (as seen on Bootstrap documentation: http://getbootstrap.com/css/#grid-media-queries)

bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';

bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';

bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';

bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';

bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';

bpTabletUp = 'screen and (min-width: '+ bs_screen_sm_min +'px)';

bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

function resetJSDOM(){

$('.js-mediaqueries p.bp').hide();

}

resetJSDOM();

// enquire JS

enquire.register(bpMobile, {

match : function() {

// console.log('bpMobile');

$('p.bp.js-bpMobile').show();

unmatch : function() {

$('p.bp.js-bpMobile').hide();

}

});

enquire.register(bpSmartphone, {

match : function() {

// console.log('bpSmartphone');

$('p.bp.js-bpSmartphone').show();

unmatch : function() {

$('p.bp.js-bpSmartphone').hide();

}

});

enquire.register(bpTablet, {

match : function() {

// console.log('bpTablet');

$('p.bp.js-bpTablet').show();

unmatch : function() {

$('p.bp.js-bpTablet').hide();

}

});

enquire.register(bpTabletUp, {

match : function() {

// console.log('bpTabletUp');

$('p.bp.js-bpTabletUp').show();

unmatch : function() {

$('p.bp.js-bpTabletUp').hide();

}

});

enquire.register(bpDesktop, {

match : function() {

// console.log('bpDesktop');

$('p.bp.js-bpDesktop').show();

unmatch : function() {

$('p.bp.js-bpDesktop').hide();

}

});

enquire.register(bpSmallDesktop, {

match : function() {

// console.log('bpSmallDesktop');

$('p.bp.js-bpSmallDesktop').show();

unmatch : function() {

$('p.bp.js-bpSmallDesktop').hide();

}

});

enquire.register(bpLargeDesktop, {

match : function() {

// console.log('bpLargeDesktop');

$('p.bp.js-bpLargeDesktop').show();

unmatch : function() {

$('p.bp.js-bpLargeDesktop').hide();

}

});

Utiliser les points de rupture du composant grille de Bootstrap 3 pour créer des media-queries JS avec Enquire.js

19/08/2016 / admin

Demo en live sur jsFiddle.net.

Fichier global-vars.js :

// Breakpoints
	// Usage: https://jsfiddle.net/frontenddeveloper/7k5hm834/4/
	// Relative to Bootstrap 3 grid component, see /bootstrap/_variables.scss
	// $screen-xs: 320px;
	// $screen-sm: 768px;
	// $screen-md: 1025px;
	// $screen-lg: 1225px;
	var bs_screen_sm_min = '768'; // tablet starts @768px
		bs_screen_md_min = '1025'; // desktop starts @1025px
		bs_screen_lg_min = '1225'; // large desktop starts @1225px
		bs_screen_xs_max = bs_screen_sm_min - 1; // 767px
		bs_screen_sm_max = bs_screen_md_min - 1; // 1024px
		bs_screen_md_max = bs_screen_lg_min - 1; // 1224px
  
	// enquire JS breakpoints
		bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';
		bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';
		bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';
		bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';
		bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';
		bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

// Breakpoints

// Usage: https://jsfiddle.net/frontenddeveloper/7k5hm834/4/

// Relative to Bootstrap 3 grid component, see /bootstrap/_variables.scss

// $screen-xs: 320px;

// $screen-sm: 768px;

// $screen-md: 1025px;

// $screen-lg: 1225px;

var bs_screen_sm_min = '768'; // tablet starts @768px

bs_screen_md_min = '1025'; // desktop starts @1025px

bs_screen_lg_min = '1225'; // large desktop starts @1225px

bs_screen_xs_max = bs_screen_sm_min - 1; // 767px

bs_screen_sm_max = bs_screen_md_min - 1; // 1024px

bs_screen_md_max = bs_screen_lg_min - 1; // 1224px

// enquire JS breakpoints

bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';

bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';

bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';

bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';

bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';

bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

Fichier global-mediaqueries.js :

+ function($){
  'use strict';

  $(document).ready(function(){
    // enquire JS
    enquire.register(bpMobile, {
      match : function() {
       // console.log('bpMobile');
      },
      unmatch : function() {}
    });

    enquire.register(bpSmartphone, {
      match : function() {
        // console.log('bpSmartphone');
      },
      unmatch : function() {}
    });

    enquire.register(bpTablet, {
      match : function() {
        // console.log('bpTablet');
      },
      unmatch : function() {}
    });

    enquire.register(bpDesktop, {
      match : function() {
        // console.log('bpDesktop');
      },
      unmatch : function() {}
    });

    enquire.register(bpSmallDesktop, {
      match : function() {
        // console.log('bpSmallDesktop');
      },
      unmatch : function() {}
    });

    enquire.register(bpLargeDesktop, {
      match : function() {
        // console.log('bpLargeDesktop');
      },
      unmatch : function() {}
    });
  });
  
}(jQuery);

+ function($){

'use strict';

$(document).ready(function(){

// enquire JS

enquire.register(bpMobile, {

match : function() {

// console.log('bpMobile');

unmatch : function() {}

});

enquire.register(bpSmartphone, {

match : function() {

// console.log('bpSmartphone');

unmatch : function() {}

});

enquire.register(bpTablet, {

match : function() {

// console.log('bpTablet');

unmatch : function() {}

});

enquire.register(bpDesktop, {

match : function() {

// console.log('bpDesktop');

unmatch : function() {}

});

enquire.register(bpSmallDesktop, {

match : function() {

// console.log('bpSmallDesktop');

unmatch : function() {}

});

enquire.register(bpLargeDesktop, {

match : function() {

// console.log('bpLargeDesktop');

unmatch : function() {}

});

}(jQuery);

[Bootstrap 3] Ajouter un point de rupture supplémentaire à la grille avec la version SASS de Bootstrap 3

13/07/2016 / admin

Dans notre exemple, nous allons chercher à ajouter un breakpoint col-xl-… pour des résolutions d’écran plus larges que col-lg.
Pour ce faire, il faudra éditer 4 fichiers :

bootstrap/mixins/grid-framework.scss
bootstrap/mixins/grid.scss
bootstrap/variables.scss
bootstrap/grid.scss

Une fois ces ajouts effectués, vous pourrez utiliser toute la batterie de mixins et de classes offerte par la grille Bootstrap pour les breakpoints XS, SM, MD, LG, mais également votre nouveau point de rupture XL !

mixins/grid-framework.scss

Rajouter en début de fichier la classe .col-xl-… dans le mixin make-grid-columns (arguments + boucle for) :

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}";
  }
  #{$list} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Inner gutter via padding
    padding-left:  ceil(($grid-gutter-width / 2));
    padding-right: floor(($grid-gutter-width / 2));
  }
}


// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-#{$class}-#{$i}";
  }
  #{$list} {
    float: left;
  }
}

// [converter] This is defined recursively in LESS, but Sass supports real loops

@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") {

@for $i from (1 + 1) through $grid-columns {

$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}";

}

#{$list} {

position: relative;

// Prevent columns from collapsing when empty

min-height: 1px;

// Inner gutter via padding

padding-left: ceil(($grid-gutter-width / 2));

padding-right: floor(($grid-gutter-width / 2));

}

// [converter] This is defined recursively in LESS, but Sass supports real loops

@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {

@for $i from (1 + 1) through $grid-columns {

$list: "#{$list}, .col-#{$class}-#{$i}";

}

#{$list} {

float: left;

}

mixins/grid.scss

Rajouter en fin de fichier les mixins make-xl-column, make-xl-column-offset, make-xl-column-push, make-xl-column-pull (vous pouvez vous inspirer de la batterie de mixins déjà présente pour make-lg-…) :

// Generate the extra large columns
@mixin make-xl-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);

  @media (min-width: $screen-xl-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
}
@mixin make-xl-column-offset($columns) {
  @media (min-width: $screen-xl-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
}
@mixin make-xl-column-push($columns) {
  @media (min-width: $screen-xl-min) {
    left: percentage(($columns / $grid-columns));
  }
}
@mixin make-xl-column-pull($columns) {
  @media (min-width: $screen-xl-min) {
    right: percentage(($columns / $grid-columns));
  }
}

// Generate the extra large columns

@mixin make-xl-column($columns, $gutter: $grid-gutter-width) {

position: relative;

min-height: 1px;

padding-left: ($gutter / 2);

padding-right: ($gutter / 2);

@media (min-width: $screen-xl-min) {

float: left;

width: percentage(($columns / $grid-columns));

}

@mixin make-xl-column-offset($columns) {

@media (min-width: $screen-xl-min) {

margin-left: percentage(($columns / $grid-columns));

}

@mixin make-xl-column-push($columns) {

@media (min-width: $screen-xl-min) {

left: percentage(($columns / $grid-columns));

}

@mixin make-xl-column-pull($columns) {

@media (min-width: $screen-xl-min) {

right: percentage(($columns / $grid-columns));

}

variables.scss

Rajouter les Media queries breakpoints pour Extra Large screen / wide desktop :

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra Large screen / wide desktop
//** Deprecated `$screen-xl` as of v3.0.1
$screen-xl:                  1600px !default;
$screen-xl-min:              $screen-xl !default;
//** Deprecated `$screen-xl-desktop` as of v3.0.1
$screen-xl-desktop:          $screen-xl-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-lg-max:              ($screen-xl-min - 1) !default;

//== Media queries breakpoints

//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra Large screen / wide desktop

//** Deprecated `$screen-xl` as of v3.0.1

$screen-xl: 1600px !default;

$screen-xl-min: $screen-xl !default;

//** Deprecated `$screen-xl-desktop` as of v3.0.1

$screen-xl-desktop: $screen-xl-min !default;

// So media queries don't overlap when required, provide a maximum

$screen-lg-max: ($screen-xl-min - 1) !default;

Rajouter les Container sizes :

//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Extra Large screen / wide desktop
$container-extralarge-desktop:      (1600px) !default;
//** For `$screen-lg-min` and up.
$container-xl:                 $container-extralarge-desktop !default;

//== Container sizes

//## Define the maximum width of `.container` for different screen sizes.

// Extra Large screen / wide desktop

$container-extralarge-desktop: (1600px) !default;

//** For `$screen-lg-min` and up.

$container-xl: $container-extralarge-desktop !default;

grid.scss

Rajouter un Container widths pour le breakpoint xl :

// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

.container {
  @media (min-width: $screen-xl-min) {
    width: $container-xl;
  }  
}

// Container widths

// Set the container width, and override it for fixed navbars in media queries.

.container {

@media (min-width: $screen-xl-min) {

width: $container-xl;

}

En toute fin de fichier, rajouter un Extra Large grid :

// Extra Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-xl-min) {
  @include make-grid(xl);
}

// Extra Large grid

// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-xl-min) {

@include make-grid(xl);

}

Les différentes astuces pour défaire un plug-in jQuery après son initialisation

23/07/2015 / admin

Existe-t’il un moyen d’annuler (à l’image de la méthode unbind) les effets sur des éléments du DOM d’un plug-in jQuery après son initialisation ?

Il n’existe malheureusement pas de méthode jQuery permettant d’annuler les effets d’un plug-in déjà initialisé, car ce dernier doit exécuter du code spécifique pour nettoyer les manipulations de DOM qu’il a entrainé. Nativement, jQuery ne peut anticiper ce que chaque plug-in va faire.

La méthode destroy

Avant de vous lancer dans des développements compliqués, vérifiez que le plug-in jQuery que vous souhaitez activer/désactiver ne bénéficie pas d’une méthode destroy. C’est par exemple le cas pour Superfish ou jQuery UI.

Tirer parti des namespaced events

(CSS tricks – bon tuto) Namespaced Events in jQuery
Namespace Your Events

Ajouter et retirer des évènements sur les listeners

(pas testé) addEventListener et nettoyage avec removeEventListener

Encapsuler le plug-in dans une fonction

Encapsuler le plug-in dans une fonction et l’initialiser uniquement lorsque la largeur du viewport correspond à un certain breakpoint. Lorsqu’on sort du breakpoint prédéfini, on recharge la page à l’aide de document.location = document.location; et le plug-in n’est plus initialisé.

function toto() {
  // mon plug-in
}

function toto() {

// mon plug-in

}

jQuery(document).ready(function(){
  enquire.register("screen and (max-width: 767px)", {
    match : function() {
      jQuery('body').removeClass('is-desktop').addClass('is-mobile');
      // ne fais rien
    },
    unmatch : function() {
      jQuery('body').removeClass('is-mobile').addClass('is-desktop');
      // ne fais rien
    }
  });

  enquire.register("screen and (min-width: 768px)", {
    match : function() {
      jQuery('body').removeClass('is-mobile').addClass('is-desktop');
      toto(); // initialise toto
    },
    unmatch : function() {
      jQuery('body').removeClass('is-desktop').addClass('is-mobile');
      document.location = document.location; // recharge la page dès que la largeur du viewport est inférieure à 768px
    }
  });
});

jQuery(document).ready(function(){

enquire.register("screen and (max-width: 767px)", {

match : function() {

jQuery('body').removeClass('is-desktop').addClass('is-mobile');

// ne fais rien

unmatch : function() {

jQuery('body').removeClass('is-mobile').addClass('is-desktop');

// ne fais rien

}

});

enquire.register("screen and (min-width: 768px)", {

match : function() {

jQuery('body').removeClass('is-mobile').addClass('is-desktop');

toto(); // initialise toto

unmatch : function() {

jQuery('body').removeClass('is-desktop').addClass('is-mobile');

document.location = document.location; // recharge la page dès que la largeur du viewport est inférieure à 768px

}

});

Avantages et inconvénients

+ Nous n’avons ni à ré-écrire des parties du code natif du plug-in, ni à maintenir du code que nous aurions écrit spécifiquement pour pallier aux manipulations de DOM générées par l’initialisation du plug-in.
+ Gain de temps énorme en terme de développement.
– On recharge la page lorsqu’on change de breakpoint. Si l’utilisateur était en-train de remplir un formulaire à ce moment là, les informations sont perdues.

Nullifier le plug-in

(pas testé) destroy a function in javascript (jquery) – nullify the function

Mettre en cache le DOM sur lequel le plug-in agit avant l’exécution de celui-ci

(pas testé – suggéré dans un fil de discussion stack overflow sans donner d’exemple de code…) One solution may be to cache a pre-plugin .clone() of the element(s) that you could revert back to if/when needed (assuming the plugin doesn’t have « undo » capability).

Activer/Désactiver les handlers d’événements de jQuery (plutôt que d’utiliser les méthodes `bind et` unbind)

Enable And Disable jQuery Event Handlers (Rather Than Bind And Unbind) .

Reinitializing NivoSlider after simulating destroy

Ok the best way is to forget about all the destroying thing and replace the silder with it’s initial state. suppose the initial state of silder is:

<div id="silder" class="nivoSlider"></div>

1	<div id="silder" class="nivoSlider"></div>

Then the best way to do the destroying and initializing at one step is to do something like:

$('#silder').replaceWith('<div id="slider" class="nivoSlider"></div>');

1	$('#silder').replaceWith('<div id="slider" class="nivoSlider"></div>');

Quelques ressources d’intérêt sur le sujet :

(CSS tricks – bon tuto) Namespaced Events in jQuery
Namespace Your Events
(pas testé) Remove jQuery Plugin Instances
(pas testé) Element Destroyed (a jQuery Special Event)
(pas testé) Shorthand methods for unbind
(pas testé) Removing a Whole Set of Event Handlers
(pas testé) addEventListener et nettoyage avec removeEventListener
Unbind – Remove – Kill a jQuery plugin
(pas testé) destroy a function in javascript (jquery) – nullify the function
(pas testé) Remove jQuery plugins at runtime
(pas testé) Reinitializing NivoSlider after simulating destroy
Tracing Event Binding And Event Triggering In jQuery

Base de l’initialisation du helper

Utiliser la méthode listen() avec un breakpoint unique

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

Ressources externes, documentation…

TODOs

Mise en place:

HOW TO USE THE MAGENTO2 MODAL WIDGET

HTML

JS

HTML

SASS

jQuery

Sync MQ: pour quoi faire?

De l’art de bien choisir ses points de rupture.

Et mon code JavaScript dans tout ça?

Quelques astuces d’utilisation:

HTML

CSS (SASS)

JS (enquire, jQuery)

mixins/grid-framework.scss

mixins/grid.scss

variables.scss

grid.scss

La méthode destroy

Tirer parti des namespaced events

Ajouter et retirer des évènements sur les listeners

Encapsuler le plug-in dans une fonction

Avantages et inconvénients

Nullifier le plug-in

Mettre en cache le DOM sur lequel le plug-in agit avant l’exécution de celui-ci

Activer/Désactiver les handlers d’événements de jQuery (plutôt que d’utiliser les méthodes bind et unbind)

Reinitializing NivoSlider after simulating destroy

Utiliser la méthode `listen()` avec un breakpoint unique

Activer/Désactiver les handlers d’événements de jQuery (plutôt que d’utiliser les méthodes `bind et` unbind)