CSS Mini-grid

css-mini-grid.css

html {
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}


/*
Grid
*/
.r {
	margin: 0 auto;
}
.b, .sb, .xsb {
	margin: 0 auto;
	padding: 0 10px;
}
.b {
	max-width: 960px;
}
.sb {
	max-width: 640px;
}
.xsb {
	max-width: 480px;
}



.xs12,.xs11,.xs10,.xs9,.xs8,.xs7,.xs6,.xs5,.xs4,.xs3,.xs2,.xs1,
.s12,.s11,.s10,.s9,.s8,.s7,.s6,.s5,.s4,.s3,.s2,.s1,
.m12,.m11,.m10,.m9,.m8,.m7,.m6,.m5,.m4,.m3,.m2,.m1,
.l12,.l11,.l10,.l9,.l8,.l7,.l6,.l5,.l4,.l3,.l2,.l1 {
	margin: 0 -4px 0 0;
	padding: 0;
	display: inline-block;
	vertical-align: top;
}

/* Medium */
html {border-top: 5px solid black;}
.m12 { width: 100%; margin-right: 0; }
.m11 { width: 91.66666666666666%; }
.m10 { width: 83.33333333333333%; }
.m9  { width: 75%; }
.m8  { width: 66.66666666666666%; }
.m7  { width: 58.33333333333333%; }
.m6  { width: 50%; }
.m5  { width: 41.66666666666666%; }
.m4  { width: 33.33333333333333%; }
.m3  { width: 25%; }
.m2  { width: 16.66666666666666%; }
.m1  { width:  8.33333333333333%; }

.dn { display: none; }
.tac { text-align: center; }
.tar { text-align: right; }

.p { padding: 20px; }
.pb { padding-bottom: 20px; }
.pl { padding-left: 20px; }
.pr { padding-right: 20px; }
.pt { padding-top: 20px; }


/* Small devices */
@media only screen and ( max-width: 768px ){
	html {border-top: 5px solid orange;}
	.s12 { width: 100%; margin-right: 0; }
	.s11 { width: 91.66666666666666%; }
	.s10 { width: 83.33333333333333%; }
	.s9  { width: 75%; }
	.s8  { width: 66.66666666666666%; }
	.s7  { width: 58.33333333333333%; }
	.s6  { width: 50%; }
	.s5  { width: 41.66666666666666%; }
	.s4  { width: 33.33333333333333%; }
	.s3  { width: 25%; }
	.s2  { width: 16.66666666666666%; }
	.s1  { width:  8.33333333333333%; }

	.sdn { display: none; }
	.stac { text-align: center; }
	.star { text-align: right; }

	.sp { padding: 20px; }
	.spb { padding-bottom: 20px; }
	.spl { padding-left: 20px; }
	.spr { padding-right: 20px; }
	.spt { padding-top: 20px; }
}
/* Extra Small devices */
@media only screen and ( max-width: 512px ){
	html {border-top: 5px solid red;}
	.xs12 { width: 100%; margin-right: 0; }
	.xs11 { width: 91.66666666666666%; }
	.xs10 { width: 83.33333333333333%; }
	.xs9  { width: 75%; }
	.xs8  { width: 66.66666666666666%; }
	.xs7  { width: 58.33333333333333%; }
	.xs6  { width: 50%; }
	.xs5  { width: 41.66666666666666%; }
	.xs4  { width: 33.33333333333333%; }
	.xs3  { width: 25%; }
	.xs2  { width: 16.66666666666666%; }
	.xs1  { width:  8.33333333333333%; }

	.xsdn { display: none; }
	.xstac { text-align: center; }
	.xstar { text-align: right; }

	.xsp { padding: 20px; }
	.xspb { padding-bottom: 20px; }
	.xspl { padding-left: 20px; }
	.xspr { padding-right: 20px; }
	.xspt { padding-top: 20px; }
}
/* Ridiculously small devices */
@media only screen and ( max-width: 480px ){
	.xxs12 { width: 100%; margin-right: 0; }
	.xxs11 { width: 91.66666666666666%; }
	.xxs10 { width: 83.33333333333333%; }
	.xxs9  { width: 75%; }
	.xxs8  { width: 66.66666666666666%; }
	.xxs7  { width: 58.33333333333333%; }
	.xxs6  { width: 50%; }
	.xxs5  { width: 41.66666666666666%; }
	.xxs4  { width: 33.33333333333333%; }
	.xxs3  { width: 25%; }
	.xxs2  { width: 16.66666666666666%; }
	.xxs1  { width:  8.33333333333333%; }

	.xxstal { text-align: left; }
	.xxstac { text-align: center; }
	.xxstar { text-align: right; }

	.xxspr { padding-right: 20px; }
	.xxspl { padding-left: 20px; }
	.xxspt { padding-top: 20px; }
	.xxspb { padding-bottom: 20px; }
	/* display only here */
	.xxsd { display: inline-block; }
	.xxsdn { display: none; }
}
/* Large devices */
@media only screen and ( min-width: 1280px ) {
	html {border-top: 5px solid green;}
	.l12 { width: 100%; margin-right: 0; }
	.l11 { width: 91.66666666666666%; }
	.l10 { width: 83.33333333333333%; }
	.l9  { width: 75%; }
	.l8  { width: 66.66666666666666%; }
	.l7  { width: 58.33333333333333%; }
	.l6  { width: 50%; }
	.l5  { width: 41.66666666666666%; }
	.l4  { width: 33.33333333333333%; }
	.l3  { width: 25%; }
	.l2  { width: 16.66666666666666%; }
	.l1  { width:  8.33333333333333%; }

	.ldn { display: none; }
	.ltac { text-align: center; }
	.ltar { text-align: right; }

	.lp { padding: 20px; }
	.lpb { padding-bottom: 20px; }
	.lpl { padding-left: 20px; }
	.lpr { padding-right: 20px; }
	.lpt { padding-top: 20px; }
}
/* Extra Large devices */
@media only screen and ( min-width: 1600px ) {
	html {border-top: 5px solid blue;}
	.xl12 { width: 100%; margin-right: 0; }
	.xl11 { width: 91.66666666666666%; }
	.xl10 { width: 83.33333333333333%; }
	.xl9  { width: 75%; }
	.xl8  { width: 66.66666666666666%; }
	.xl7  { width: 58.33333333333333%; }
	.xl6  { width: 50%; }
	.xl5  { width: 41.66666666666666%; }
	.xl4  { width: 33.33333333333333%; }
	.xl3  { width: 25%; }
	.xl2  { width: 16.66666666666666%; }
	.xl1  { width:  8.33333333333333%; }

	.xldn { display: none; }
	.xltac { text-align: center; }
	.xltar { text-align: right; }

	.xlp { padding: 20px; }
	.xlpb { padding-bottom: 20px; }
	.xlpl { padding-left: 20px; }
	.xlpr { padding-right: 20px; }
	.xlpt { padding-top: 20px; }
}