Cacher is the code snippet organizer for pro developers

/**
 * @author Mirco Babini, Web & Mobile App Developer
 * @version 1.2.7
 * https://gist.github.com/mircobabini/0d0410498c975f30d6fb
 *
 * pattern for margins:  [m]{direction}{amount}, the m is optional
 * pattern for paddings: p{direction}{amount}, the p is NOT optional
 * 
 * the directions are top, right, bottom, left, horizontal (left and right) and vertical (top and bottom)
 * you can also use the short directions, that are t, r, b, l, h and v
 * the possible amounts are 0, 10, 20, 40 or 'do the fuck you want' accordingly to the license (wtfpl.net)
 *
 * pattern for global margins, paddings: {margin|padding}{amount} or {m|p}{amount}
 * the possible amounts are 0, 10, 20, 40 or 'do the fuck you want' accordingly to the license (wtfpl.net)
 *
 * pattern for real spacers: spacer{amount} or s{amount}
 * the possible amounts are 10, 20, 40, 60, 80 or 'dtfyw' once again, accordingly to the license (wtfpl.net)
 */

/* margins */
.mtop0, .mt0,
.top0, .t0{
	margin-top: 0;	
}
.mtop10, .mt10,
.top10, .t10{
	margin-top: 10px;	
}
.mtop20, .mt20,
.top20, .t20{
	margin-top: 20px;	
}
.mtop40, .mt40,
.top40, .t40{
	margin-top: 40px;	
}

.mbottom0, .mb0,
.bottom0, .b0{
	margin-bottom: 0;	
}
.mbottom10, .mb10,
.bottom10, .b10{
	margin-bottom: 10px;	
}
.mbottom20, .mb20,
.bottom20, .b20{
	margin-bottom: 20px;	
}
.mbottom40, .mb40,
.bottom40, .b40{
	margin-bottom: 40px;	
}

.mvertical0, .mv0,
.vertical0, .v0{
	margin-top: 0;	
	margin-bottom: 0;	
}
.mvertical10, .mv10,
.vertical10, .v10{
	margin-top: 10px;	
	margin-bottom: 10px;	
}
.mvertical20, .mv20,
.vertical20, .v20{
	margin-top: 20px;	
	margin-bottom: 20px;	
}
.mvertical40, .mv40,
.vertical40, .v40{
	margin-top: 40px;	
	margin-bottom: 40px;	
}

.mleft0, .ml0,
.left0, .l0{
	margin-left: 0;	
}
.mleft10, .ml10,
.left10, .l10{
	margin-left: 10px;	
}
.mleft20, .ml20,
.left20, .l20{
	margin-left: 20px;	
}
.mleft40, .ml40,
.left40, .l40{
	margin-left: 40px;	
}

.mright0, .mr0,
.right0, .r0{
	margin-right: 0;	
}
.mright10, .mr10,
.right10, .r10{
	margin-right: 10px;	
}
.mright20, .mr20,
.right20, .r20{
	margin-right: 20px;	
}
.mright40, .mr40,
.right40, .r40{
	margin-right: 40px;	
}

.mhorizontal0, .mh0,
.horizontal0, .h0{
	margin-right: 0;	
	margin-left: 0;	
}
.mhorizontal10, .mh10,
.horizontal10, .h10{
	margin-right: 10px;	
	margin-left: 10px;	
}
.mhorizontal20, .mh20,
.horizontal20, .h20{
	margin-right: 20px;	
	margin-left: 20px;	
}
.mhorizontal40, .mh40,
.horizontal40, .h40{
	margin-right: 40px;	
	margin-left: 40px;	
}

.margin0, .m0{
	margin: 0;
}
.margin10, .m10{
	margin: 10px;
}
.margin20, .m20{
	margin: 20px;
}
.margin40, .m40{
	margin: 40px;
}

/* paddings */
.ptop0, .pt0{
	padding-top: 0;	
}
.ptop10, .pt10{
	padding-top: 10px;	
}
.ptop20, .pt20{
	padding-top: 20px;	
}
.ptop40, .pt40{
	padding-top: 40px;	
}

.pbottom0, .pb0{
	padding-bottom: 0;	
}
.pbottom10, .pb10{
	padding-bottom: 10px;	
}
.pbottom20, .pb20{
	padding-bottom: 20px;	
}
.pbottom40, .pb40{
	padding-bottom: 40px;	
}

.pvertical0, .pv0{
	padding-top: 0;	
	padding-bottom: 0;	
}
.pvertical10, .pv10{
	padding-top: 10px;	
	padding-bottom: 10px;	
}
.pvertical20, .pv20{
	padding-top: 20px;	
	padding-bottom: 20px;	
}
.pvertical40, .pv40{
	padding-top: 40px;	
	padding-bottom: 40px;	
}

.pleft0, .pl0{
	padding-left: 0;	
}
.pleft10, .pl10{
	padding-left: 10px;	
}
.pleft20, .pl20{
	padding-left: 20px;	
}
.pleft40, .pl40{
	padding-left: 40px;	
}

.pright0, .pr0{
	padding-right: 0;	
}
.pright10, .pr10{
	padding-right: 10px;	
}
.pright20, .pr20{
	padding-right: 20px;	
}
.pright40, .pr40{
	padding-right: 40px;	
}

.phorizontal0, .ph0{
	padding-right: 0;	
	padding-left: 0;	
}
.phorizontal10, .ph10{
	padding-right: 10px;	
	padding-left: 10px;	
}
.phorizontal20, .ph20{
	padding-right: 20px;	
	padding-left: 20px;	
}
.phorizontal40, .ph40{
	padding-right: 40px;	
	padding-left: 40px;	
}

.padding0, .p0{
	padding: 0;
}
.padding10, .p10{
	padding: 10px;
}
.padding20, .p20{
	padding: 20px;
}
.padding40, .p40{
	padding: 40px;
}

/* real spacers */
.spacer10, .s10{
	height: 10px;
}
.spacer20, .s20{
	height: 20px;
}
.spacer40, .s40{
	height: 40px;
}
.spacer60, .s60{
	height: 60px;
}
.spacer80, .s80{
	height: 80px;
}