Responsive margin and padding
open-source SCSS classes generator
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;
}