Responsive margin and padding
open-source SCSS classes generator

Download on GitHub

Padding and Margin examples

Create quick and easy padding, margin, negative margin and responsive padding and margin classes.
By default the out of the box setup goes from 0-200 at increments of 10.

Padding - All

padding 40px

HTML


  <div class="padding-40 padding-20-sm"></div>

Padding - Top

padding top 40px

HTML


  <div class="padding-top-40 padding-top-20-sm"></div>

Padding - Right

padding right 40px

HTML


  <div class="padding-right-40 padding-right-20-sm"></div>

Padding - Bottom

padding bottom 40px

HTML


  <div class="padding-bottom-40 padding-bottom-20-sm"></div>

Padding - Left

padding left 40px

HTML


  <div class="padding-left-40 padding-left-20-sm"></div>

Margin - All

margin 40px

HTML


  <div class="margin-40 margin-20-sm"></div>

Margin - Top

margin top 40px

HTML


  <div class="margin-top-40 margin-top-20-sm"></div>

Margin - Right

margin right 40px

HTML


  <div class="margin-right-40 margin-right-20-sm"></div>

Margin - Bottom

margin bottom 40px

HTML


  <div class="margin-bottom-40 margin-bottom-20-sm"></div>

Margin - Left

margin left 40px

HTML


  <div class="margin-left-40 margin-left-20-sm"></div>

How to use it

Getting started

Navigate to the "SCSS" folder and open up the "margin.scss" or "padding.scss" files. Once open you will be able to adjust a while loop which is set to count until it's requirement is meet. By default this is set to 200 and will increment in additions of 10 starting from 0. If you wish to lower the top value just change the figure of 200 to something lower or if you wish to change the increments find within the while loop (at the bottom) the "$i" variable and change the value of 10 to something else. Please take note that anything you change will need to be recomplied and generated to CSS again.

SCSS

$i : 0;
@while $i <= 200 {
  .padding-#{$i} {
    padding: #{$i}px;
  }
  .padding-top-#{$i} {
    padding-top: #{$i}px;
  }
  .padding-left-#{$i} {
    padding-left: #{$i}px;
  }
  .padding-bottom-#{$i} {
    padding-bottom: #{$i}px;
  }
  .padding-right-#{$i} {
    padding-right: #{$i}px;
  }
  $i : $i + 10;
}