Article Image
read

Je propose aujourd'hui une mixin que j'utilise sur quasiment tous les projets sur lesquels je suis amené à faire de l'intégration. Cette mixin sass permet de générer des classes responsives "à la Boostrap" pour les margins et les paddings.

Elles s'utilisent de la façon suivante :
<div class="p-xs-5 m-sm-15 mh-md-30"></div> qui veut dire :

  • Utilise des paddings de 5px tout le temps
  • Utilise des marges 15px à partir des écrans "smalls"
  • Utilise des marges horizontales de 30px à partir des écrans "mediums"

Toutes les combinaisons sont possibles.

Les variables $screen-sm-min, $screen-md-min et $screen-lg-min sont issues du Bootstrap.
Il est possible de changer les tailles de marge pour les adapter à son projet.

Blog Logo

Ludovic Meyer

Freelance et amoureux de technologie


Published

Blog Comments powered by Disqus.
Image

Ludovic Meyer

Back to Overview