• Sommaire
• Description
• Mobile first
• Classes
  • Alignement
  • Alignement du texte
  • Colonnes
  • Tableaux
  • Marges extérieures
  • Marges intérieures
  • Flexbox
  • Positions
  • Display
• Javascript
  • Événements

Foundation-extras ajoute des classes utilitaires au framework foundation

Foundation-extras utilise les breakpoints par défaut de foundation

/* Small only */
@media screen and (max-width: 39.9375em) {}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}

Toutes les classes ajoutées sont sous le même format.

/* Exemple */
.no-margin
.small-only-no-margin
.medium-no-margin
.medium-only-no-margin
.large-no-margin
.large-only-no-margin

Le préfixe small- est absent car c'est le style par défaut appliqué.

Toutes ces classes peuvent être préfixées par taille comme ci-dessus.

A mettre sur les .row pour changer l'alignement selon la taille.

.align-left .align-center .align-right .align-top .align-middle .align-bottom .align-justify .align-spaced

.text-left .text-center .text-right

Ajoute des préfixes pour la classe shrink de base.

.shrink

Change l'ordre des .column en fonction de la taille.

.order-[0-9]

Même chose que .offset-[0-9] mais fait un margin-right à la place d'un margin-left.

.offset-r-[0-9]

A placer sur les td ou th d'un tableau. Applique un width en pourcentage similaire aux .column.

.td-[0-9]

Applique width auto.

.td-shrink

Applique width 100%.

.td-expand

Retire toutes les marges.

.no-margin

Retire les marges à gauche et à droite.

.no-h-margin

Retire les marges en haut et en bas.

.no-v-margin

Défini les marges de 5 en 5 (Marges en pixels)

.margin-top-[5-50] .margin-right-[5-50] .margin-bottom-[5-50] .margin-left-[5-50] .margin-h-[5-50] .margin-v-[5-50]

Retire toutes les marges intérieures.

.no-margin

Retire les marges intérieures à gauche et à droite.

.no-h-margin

Retire les marges intérieures en haut et en bas.

.no-v-margin

Défini flex-wrap: wrap; en fonction de la taille.

.flex-wrap

Défini flex-wrap: nowrap; en fonction de la taille.

.flex-nowrap

Défini la position en fonction de la taille.

.position-absolute .position-relative .position-fixed

Défini le display en fonction de la taille.

.d-block .d-inline-block .d-inline .d-flex

Détect le changement de breakpoint

/*
@var sFromSize string small | medium | large 
@description sFromSize est la taille avant changement
 */
$(window).on('mq:change:small', function(oEvt, sFromSize){
    console.log('small');
})

$(window).on('mq:change:medium', function(oEvt, sFromSize){
    console.log('medium');
})

$(window).on('mq:change:large', function(oEvt, sFromSize){
    console.log('large');
})