<div class="mbl plop">
<button class="nav-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
</div>
<div class="mbl">
<select class="select">
<option value="valeur1">Salade</option>
<option value="valeur2">Tomate</option>
<option value="valeur3">Oignon</option>
</select>
<div class="arrow"></div>
<p>arrow down <i class="icon-arrow--down"></i></p>
<p>arrow up <i class="icon-arrow--up"></i></p>
<p>arrow right <i class="icon-arrow--right"></i></p>
<p>arrow left <i class="icon-arrow--left"></i></p>
</div>
<div class="tabs js-tabs">
<nav class="tabs-menu">
<a href="#tab1" class="tabs-menu-link is-active">Salade</a>
<a href="#tab2" class="tabs-menu-link">Tomate</a>
<a href="#tab3" class="tabs-menu-link">Oignons</a>
</nav>
<div class="tabs-content">
<div id="tab1" class="tabs-content-item">Contenu 1. <br>Lorem Elsass Ipsum mitt picon bière munster du ftomi! Ponchour bisame. Bibbeleskaas jetz rossbolla sech choucroute un schwanz geburtstàg, Chinette dû, ìch bier deppfele schiesser.</div>
<div id="tab2" class="tabs-content-item">Contenu 2. <br>Flammekueche de knèkes Seppele gal! a hopla geburtstàg, alles fraü Chulia Roberts oder knäckes dûû blottkopf. Noch bredele schissabibala, yeuh e schmutz.</div>
<div id="tab3" class="tabs-content-item">Contenu 3. <br>E gewurtztraminer doch Carola schneck, schmutz a riesling de chambon eme rucksack Roger dû hopla geiss, jetz Chorchette de Scharrarbergheim.</div>
</div>
</div>
<table class="table table--zebra mtl" summary="">
<caption>comparaison entre Grillade v6 et Grillade v7</caption>
<thead>
<tr>
<td></td>
<th scope="col">Grillade v6</th>
<th scope="col">Grillade v7</th>
</tr>
</thead>
<tbody>
<tr>
<th>Techno CSS employée</th>
<td>Flexbox</td>
<td>Grid Layout</td>
</tr>
<tr>
<th>Poids fichier CSS</th>
<td>11 Ko</td>
<td>3 Ko</td>
</tr>
<tr>
<th>Compatibilité</th>
<td>IE10+</td>
<td>Edge 16+</td>
</tr>
<tr>
<th>Fonctionnalités</th>
<td>Mobile first<br>Largeurs fluides<br>Gouttières<br>Fusion de colonnes<br><del>Fusion de rangées</del><br>Gestion des écrans intermédiaires<br><del>Tailles d'enfants responsive</del><br>Ordonnancement des enfants</td>
<td>Mobile first<br>Largeurs fluides<br>Gouttières<br>Fusion de colonnes<br>Fusion de rangées<br>Gestion des écrans intermédiaires<br>Tailles d'enfants responsive<br>Ordonnancement des enfants</td>
</tr>
</tbody>
</table>
<section class="grid-6-small-3 has-gutter">
<div>1</div>
<div>2</div>
<div class="item-first">(3) item-first</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div class="col-3-small-2">col-3-small-2</div>
<div class="col-2-small-1">col-2-small-1</div>
<div class="col-2-small-1">col-2-small-1</div>
<div class="col-4-small-2">col-4-small-2</div>
<div class="row-2">row-2</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div class="col-3">col-3</div>
<div>18</div>
<div>19</div>
<div class="col-all">col-all</div>
</section>
body {
padding: 2rem;
}
[class*=grid] > * {
background: pink;
}
.plop.is-opened {
background: pink;
}
/**!
Tabs
Manages tabs with content
*/
(function($) {
$.tabs = function(el, options) {
// Default settings values
var defaults = {
selectorLinks: '.tabs-menu-link',
selectorList: '.tabs-menu',
selectorListItems: 'li',
selectorContent: '.tabs-content-item',
classActive: 'is-active'
};
var plugin = this;
plugin.settings = {};
var $element = $(el),
element = el;
// Plugin initialization
plugin.init = function() {
plugin.settings = $.extend({}, defaults, options);
updateSettingsFromHTMLData();
registerEvents();
setAriaAttributes();
plugin.switchContent(null);
};
// Reads plugin settings from HTML data-* attributes (camelCase)
var updateSettingsFromHTMLData = function() {
var data = $element.data();
for (var dat in data) plugin.settings[dat] = data[dat];
};
// Set initial ARIA attributes on elements
var setAriaAttributes = function() {
$(plugin.settings.selectorList,$element).attr('role','tablist').find(plugin.settings.selectorListItems).attr('role','presentation').find(plugin.settings.selectorLinks).attr({'role':'tab','tabindex':'-1'}).each(function(index,item) {
var target = $(this).attr('href');
// If the link is marked active with the class, then tabindex 0
if($(this).hasClass(plugin.settings.classActive)) {
$(this).attr('tabindex','0');
}
// Establish relationships between tabs (links) and tabpanels
$(this).attr('id','tablink'+index).attr('aria-controls',target.replace('#',''));
$(target).attr('aria-labelledby','tablink'+index).attr('tabindex','0').attr('role','tabpanel');
});
};
// Set event handlers on HTML elements (private method)
var registerEvents = function() {
// Navigate with clicks
$(plugin.settings.selectorLinks,$element).off('click.tabs').on('click.tabs', function(e) {
plugin.switchClasses($(this));
plugin.switchContent($(this).attr('href'));
e.preventDefault();
// Navigate with arrow keys
}).off('keydown.tabs').on('keydown.tabs', function(e) {
if(e.metaKey || e.altKey) return; // Do not react with modifier keys
switch (e.keyCode) {
case 37:
case 38:
plugin.prevTab();
e.preventDefault();
break;
case 39:
case 40:
plugin.nextTab();
e.preventDefault();
break;
default:
break;
}
});
};
// Switch active classes for tabs (public method)
plugin.switchClasses = function($el) {
// Other elements
$(plugin.settings.selectorLinks,$element).removeClass(plugin.settings.classActive).removeAttr('aria-selected').attr('tabindex','-1');
// Current element
$el.addClass(plugin.settings.classActive).attr({'aria-selected':'true','tabindex':'0'}).focus();
};
// Switch active classes for content panels (public method)
plugin.switchContent = function(targetId) {
var $target;
// Other elements
$(plugin.settings.selectorContent,$element).attr({'aria-hidden':'true'});
// Target element
if(targetId) {
$target = $(targetId,$element);
} else {
$target = $(plugin.settings.selectorContent,$element).first();
}
$target.attr('tabindex','0').removeAttr('aria-hidden');
};
// Switch to next tab
plugin.nextTab = function() {
plugin.goTab(1);
};
// Switch to next tab
plugin.prevTab = function() {
plugin.goTab(-1);
};
// Switch to prev/next tab
plugin.goTab = function(direction) {
var $current = $(plugin.settings.selectorLinks,$element).filter('.'+plugin.settings.classActive);
var $links = $(plugin.settings.selectorLinks,$element);
var eq = $links.index($current)+direction;
if(eq<0) return; // Prevent backward focus on last element
var $next = $links.eq(eq);
$next.trigger('click.tabs');
};
// Initialization
plugin.init();
};
$.fn.tabs = function(options) {
return this.each(function() {
if (undefined === $(this).data('tabs')) {
var plugin = new $.tabs(this, options);
$(this).data('tabs', plugin);
}
});
};
$(document).ready(function() {
// Launch plugin on target element
$('.js-tabs').tabs();
});
})(jQuery);
/**!
Navigation Button Toggle class
*/
(function() {
// old browser or not ?
if ( !('querySelector' in document && 'addEventListener' in window) ) {
return;
}
window.document.documentElement.className += ' js-enabled';
function toggleNav() {
// Define targets by their class or id
var button = document.querySelector('.nav-button');
var target = document.querySelector('.plop');
// click-touch event
if ( button ) {
button.addEventListener('click',
function (e) {
button.classList.toggle('is-active');
target.classList.toggle('is-opened');
e.preventDefault();
}, false );
}
} // end toggleNav()
toggleNav();
}());
Also see: Tab Triggers