Skip to content

Instantly share code, notes, and snippets.

@ShivrajRath

ShivrajRath/spacing.css

Last active August 29, 2015 14:03
Show Gist options
  • Save ShivrajRath/ab132bc41a7b345c4dc9 to your computer and use it in GitHub Desktop.
Save ShivrajRath/ab132bc41a7b345c4dc9 to your computer and use it in GitHub Desktop.
Download ZIP
Common Classes Used for margin and padding
Raw
spacing.css
/*
////////////////////////////////////////////
============================
Spacing Adjusting Classes:
===========================*/
/*margin-top 0-50*/
.mt0 {margin-top: 0;}
.mt5 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt25 {margin-top: 25px;}
.mt30 {margin-top: 30px;}
.mt35 {margin-top: 35px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
/*margin-bottom 0-50*/
.mb0 {margin-bottom: 0;}
.mb5 {margin-bottom: 5px;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb25 {margin-bottom: 25px;}
.mb30 {margin-bottom: 30px;}
.mb35 {margin-bottom: 35px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
/*margin-left 0-50*/
.ml0 {margin-left: 0;}
.ml5 {margin-left: 5px;}
.ml10 {margin-left: 10px;}
.ml15 {margin-left: 15px;}
.ml20 {margin-left: 20px;}
.ml25 {margin-left: 25px;}
.ml30 {margin-left: 30px;}
.ml35 {margin-left: 35px;}
.ml40 {margin-left: 40px;}
.ml50 {margin-left: 50px;}
/*margin-top 0-50*/
.mr0 {margin-right: 0;}
.mr5 {margin-right: 5px;}
.mr10 {margin-right: 10px;}
.mr15 {margin-right: 15px;}
.mr20 {margin-right: 20px;}
.mr25 {margin-right: 25px;}
.mr30 {margin-right: 30px;}
.mr35 {margin-right: 35px;}
.mr40 {margin-right: 40px;}
.mr50 {margin-right: 50px;}
/*padding-top 0-50*/
.pt0 {padding-top: 0;}
.pt5 {padding-top: 5px;}
.pt10 {padding-top: 10px;}
.pt15 {padding-top: 15px;}
.pt20 {padding-top: 20px;}
.pt25 {padding-top: 25px;}
.pt30 {padding-top: 30px;}
.pt35 {padding-top: 35px;}
.pt40 {padding-top: 40px;}
.pt50 {padding-top: 50px;}
/*padding-bottom 0-50*/
.pb0 {padding-bottom: 0;}
.pb5 {padding-bottom: 5px;}
.pb10 {padding-bottom: 10px;}
.pb15 {padding-bottom: 15px;}
.pb20 {padding-bottom: 20px;}
.pb25 {padding-bottom: 25px;}
.pb30 {padding-bottom: 30px;}
.pb35 {padding-bottom: 35px;}
.pb40 {padding-bottom: 40px;}
.pb50 {padding-bottom: 50px;}
/*padding-left 0-50*/
.pl0 {padding-left: 0;}
.pl5 {padding-left: 5px;}
.pl10 {padding-left: 10px;}
.pl15 {padding-left: 15px;}
.pl20 {padding-left: 20px;}
.pl25 {padding-left: 25px;}
.pl30 {padding-left: 30px;}
.pl35 {padding-left: 35px;}
.pl40 {padding-left: 40px;}
.pl50 {padding-left: 50px;}
/*padding-right 0-50*/
.pr0 {padding-right: 0;}
.pr5 {padding-right: 5px;}
.pr10 {padding-right: 10px;}
.pr15 {padding-right: 15px;}
.pr20 {padding-right: 20px;}
.pr25 {padding-right: 25px;}
.pr30 {padding-right: 30px;}
.pr35 {padding-right: 35px;}
.pr40 {padding-right: 40px;}
.pr50 {padding-right: 50px;}
/*Rest the margin and padding to 0 value*/
.m0 {
margin: 0 !important;
}
.p0 {
padding: 0 !important;
}
/*Padding for all sides*/
.p5 {padding: 5px;}
.p10 {padding: 10px;}
.p15 {padding: 15px;}
.p20 {padding: 20px;}
.p25 {padding: 25px;}
.p30 {padding: 30px;}
.p35 {padding: 35px;}
.p40 {padding: 40px;}
.p45 {padding: 45px;}
.p50 {padding: 50px;}
/*Margin for all sides*/
.m5 {margin: 5px;}
.m10 {margin: 10px;}
.m15 {margin: 15px;}
.m20 {margin: 20px;}
.m25 {margin: 25px;}
.m30 {margin: 30px;}
.m35 {margin: 35px;}
.m40 {margin: 40px;}
.m45 {margin: 45px;}
.m50 {margin: 50px;}
/*Margin negative on both sides*/
.m-0 {
margin-left: 0;
margin-right: 0;
}
.m-5 {
margin-left: -5px;
margin-right: -5px;
}
.m-10 {
margin-left: -10px;
margin-right: -10px;
}
.m-15 {
margin-left: -15px;
margin-right: -15px;
}
.m-20 {
margin-left: -20px;
margin-right: -20px;
}
.m-25 {
margin-left: -25px;
margin-right: -25px;
}
.m-30 {
margin-left: -30px;
margin-right: -30px;
}
/*Margin negative on left side*/
.ml-0 {
margin-left: 0;
}
.ml-5 {
margin-left: -5px;
}
.ml-10 {
margin-left: -10px;
}
.ml-15 {
margin-left: -15px;
}
.ml-20 {
margin-left: -20px;
}
.ml-25 {
margin-left: -25px;
}
.ml-30 {
margin-left: -30px;
}
/*Margin negative on right side*/
.mr-0 {
margin-right: 0;
}
.mr-5 {
margin-right: -5px;
}
.mr-10 {
margin-right: -10px;
}
.mr-15 {
margin-right: -15px;
}
.mr-20 {
margin-right: -20px;
}
.mr-25 {
margin-right: -25px;
}
.mr-30 {
margin-right: -30px;
}
/*width with percentage value*/
.gbl_full-width {
width: 100%;
}
.gbl_width-95p {
width: 95%;
}
.gbl_width-90p {
width: 90%;
}
.gbl_width-85p {
width: 85%;
}
.gbl_width-80p {
width: 80%;
}
.gbl_width-75p {
width: 75%;
}
.gbl_width-70p {
width: 70%;
}
.gbl_width-65p {
width: 65%;
}
.gbl_width-60p {
width: 60%;
}
.gbl_width-55p {
width: 55%;
}
.gbl_width-50p {
width: 50%;
}
.gbl_width-45p {
width: 45%;
}
.gbl_width-40p {
width: 40%;
}
.gbl_width-35p {
width: 35%;
}
.gbl_width-30p {
width: 30%;
}
.gbl_width-25p {
width: 25%;
}
.gbl_width-20p {
width: 20%;
}
.gbl_width-15p {
width: 15%;
}
.gbl_width-10p {
width: 10%;
}
.gbl_width-5p {
width: 5%;
}
/*width with pixel value*/
.gbl_width-5 {
width: 5px;
}
.gbl_width-10 {
width: 10px;
}
.gbl_width-15 {
width: 15px;
}
.gbl_width-20 {
width: 20px;
}
.gbl_width-25 {
width: 25px;
}
.gbl_width-30 {
width: 30px;
}
.gbl_width-35 {
width: 35px;
}
.gbl_width-40 {
width: 40px;
}
.gbl_width-45 {
width: 45px;
}
.gbl_width-50 {
width: 50px;
}
/*strong full width*/
.gbl_FULL-FULL-width {
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/*extend to container full width*/
.gbl_main-content.pl40.pr40 .gbl_container-extend-full {
margin-left: -40px !important;
margin-right: -40px !important;
}
/*global height*/
.gbl_height-50 {
height: 50px;
}
.gbl_height-100 {
height: 100px;
}
.gbl_height-150 {
height: 150px;
}
.gbl_height-200 {
height: 200px;
}
.gbl_height-250 {
height: 250px;
}
.gbl_height-300 {
height: 300px;
}
.gbl_height-350 {
height: 350px;
}
.gbl_height-400 {
height: 400px;
}
.gbl_height-450 {
height: 450px;
}
.gbl_height-500 {
height: 500px;
}
.gbl_height-550 {
height: 550px;
}
.gbl_height-600 {
height: 600px;
}
.gbl_height-650 {
height: 650px;
}
.gbl_height-700 {
height: 700px;
}
.gbl_height-750 {
height: 750px;
}
.gbl_height-800 {
height: 800px;
}
.gbl_height-850 {
height: 850px;
}
.gbl_height-900 {
height: 900px;
}
.gbl_height-950 {
height: 950px;
}
.gbl_height-1000 {
height: 1000px;
}
.gbl_height-auto {
height: auto;
}
/*end spacing styles*/
/*set line height to "1" for accuricy of vertical spacing*/
.gbl_lh-1 {
line-height: 1;
}
/*restore line height to default value*/
.gbl_lh-default {
line-height: 1.42857;
}
/*line height at 1.2*/
.gbl_lh-1-2 {
line-height: 1.2;
}
/*line height at 1.25*/
.gbl_lh-1-25 {
line-height: 1.25;
}
/*line height with pixel value*/
.gbl_lh-10 {
line-height: 10px;
height: 10px;
}
.gbl_lh-12 {
line-height: 12px;
height: 12px;
}
.gbl_lh-15 {
line-height: 15px;
height: 15px;
}
.gbl_lh-20 {
line-height: 20px;
height: 20px;
}
.gbl_lh-25 {
line-height: 25px;
height: 25px;
}
.gbl_lh-30 {
line-height: 30px;
height: 30px;
}
.gbl_lh-35 {
line-height: 35px;
height: 35px;
}
.gbl_lh-40 {
line-height: 40px;
height: 40px;
}
.gbl_lh-45 {
line-height: 45px;
height: 45px;
}
.gbl_lh-50 {
line-height: 50px;
height: 50px;
}
Raw
spacing.less
// Depends on LESS CURIOUS's FOR LOOP: https://github.com/seven-phases-max/less.curious/blob/master/src/for.less
// Margin all classes
.m {
.for(0 5 10 15 20 25 30 35 40 50 55 60 65 70 75 80 85 90 95 100); .-each(@name) {
&@{name} {
margin: ~"@{name}px"
}
&t@{name} {
margin: ~"@{name}px"
}
&b@{name} {
margin: ~"@{name}px"
}
&l@{name} {
margin: ~"@{name}px"
}
&r@{name} {
margin: ~"@{name}px"
}
&l-@{name} {
margin-left: ~"-@{name}px";
}
&r-@{name} {
margin-right: ~"-@{name}px";
}
&-@{name} {
margin-left: ~"-@{name}px";
margin-right: ~"-@{name}px";
}
}
}
// Padding All Classes
.p {
.for(0 5 10 15 20 25 30 35 40 50 55 60 65 70 75 80 85 90 95 100); .-each(@name) {
&@{name} {
padding: ~"@{name}px"
}
&t@{name} {
padding: ~"@{name}px"
}
&b@{name} {
padding: ~"@{name}px"
}
&l@{name} {
padding: ~"@{name}px"
}
&r@{name} {
padding: ~"@{name}px"
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment