KNACSS/sass/_02-helpers.scss

/* ---------------------------------- */
/* ==visual helpers                   */
/* .. use them with parcimony !       */
/* ---------------------------------- */

/* blocks widths (percentage and pixels) */
.w10 {
	width: 10%;
}

.w20 {
	width: 20%;
}

.w25 {
	width: 25%;
}

.w30 {
	width: 30%;
}

.w33 {
	width: 33.3333%;
}

.w40 {
	width: 40%;
}

.w50 {
	width: 50%;
}

.w60 {
	width: 60%;
}

.w66 {
	width: 66.6666%;
}

.w70 {
	width: 70%;
}

.w75 {
	width: 75%;
}

.w80 {
	width: 80%;
}

.w90 {
	width: 90%;
}

.w100 {
	width: 100%;
}

.w50p {
	width: 50px;
}

.w100p {
	width: 100px;
}

.w150p {
	width: 150px;
}

.w200p {
	width: 200px;
}

.w300p {
	width: 300px;
}

.w400p {
	width: 400px;
}

.w500p {
	width: 500px;
}

.w600p {
	width: 600px;
}

.w700p {
	width: 700px;
}

.w800p {
	width: 800px;
}

.w960p {
	width: 960px;
}

.mw960p {
	max-width: 960px;
}

.w1140p {
	width: 1140px;
}

.mw1140p {
	max-width: 1140px;
}

.wauto {
	width: auto;
}

/* spacing helpers
p,m = padding,margin
a,t,r,b,l = all,top,right,bottom,left
s,m,l,n = small, medium, large, none
*/
.man,
.ma0 {
	margin: 0;
}

.pan,
.pa0 {
	padding: 0;
}

.mas {
	margin: $small-value;
}

.mam {
	margin: $medium-value;
}

.mal {
	margin: $large-value;
}

.pas {
	padding: $small-value;
}

.pam {
	padding: $medium-value;
}

.pal {
	padding: $large-value;
}

.mtn,
.mt0 {
	margin-top: 0;
}

.mts {
	margin-top: $small-value;
}

.mtm {
	margin-top: $medium-value;
}

.mtl {
	margin-top: $large-value;
}

.mrn,
.mr0 {
	margin-right: 0;
}

.mrs {
	margin-right: $small-value;
}

.mrm {
	margin-right: $medium-value;
}

.mrl {
	margin-right: $large-value;
}

.mbn,
.mb0 {
	margin-bottom: 0;
}

.mbs {
	margin-bottom: $small-value;
}

.mbm {
	margin-bottom: $medium-value;
}

.mbl {
	margin-bottom: $large-value;
}

.mln,
.ml0 {
	margin-left: 0;
}

.mls {
	margin-left: $small-value;
}

.mlm {
	margin-left: $medium-value;
}

.mll {
	margin-left: $large-value;
}

.ptn,
.pt0 {
	padding-top: 0;
}

.pts {
	padding-top: $small-value;
}

.ptm {
	padding-top: $medium-value;
}

.ptl {
	padding-top: $large-value;
}

.prn,
.pr0 {
	padding-right: 0;
}

.prs {
	padding-right: $small-value;
}

.prm {
	padding-right: $medium-value;
}

.prl {
	padding-right: $large-value;
}

.pbn,
.pb0 {
	padding-bottom: 0;
}

.pbs {
	padding-bottom: $small-value;
}

.pbm {
	padding-bottom: $medium-value;
}

.pbl {
	padding-bottom: $large-value;
}

.pln,
.pl0 {
	padding-left: 0;
}

.pls {
	padding-left: $small-value;
}

.plm {
	padding-left: $medium-value;
}

.pll {
	padding-left: $large-value;
}