A very basic reset, grid and layout helper, useful for rapid development / testing

quick_start.css

/*------------------------------------*\
    $RESET
\*------------------------------------*/

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}






/*------------------------------------*\
    $CLEARFIX
\*------------------------------------*/

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}






/*------------------------------------*\
    $GRID
\*------------------------------------*/

[class*='col-'] {
        float: left;
        padding-right: 20px;
}

[class*='col-']:last-of-type,
.nopad {
        padding-right: 0px;
}

.grid {
        width: 100%;
        max-width: 840px;
        min-width: 755px;
        margin: 0 auto;
        overflow: hidden;
}

.grid:after {
        content: "";
        display: table;
        clear: both;
}

.grid-pad {
        padding: 20px 0 0px 20px;
}

.grid-pad > [class*='col-']:last-of-type {
        padding-right: 20px;
}

.push-right {
        float: right;
}

/* Content Columns */

.col-1-1 {
        width: 100%;
}
.col-2-3, .col-8-12 {
        width: 66.66%;
}

.col-1-2, .col-6-12 {
        width: 50%;
}

.col-1-3, .col-4-12 {
        width: 33.33%;
}

.col-1-4, .col-3-12 {
        width: 25%;
}

.col-1-5 {
        width: 20%;
}

.col-1-6, .col-2-12 {
        width: 16.667%;
}

.col-1-7 {
        width: 14.28%;
}

.col-1-8 {
        width: 12.5%;
}

.col-1-9 {
        width: 11.1%;
}

.col-1-10 {
        width: 10%;
}

.col-1-11 {
        width: 9.09%;
}

.col-1-12 {
        width: 8.33%
}

/* Layout Columns */

.col-11-12 {
        width: 91.66%
}

.col-10-12 {
        width: 83.333%;
}

.col-9-12 {
        width: 75%;
}

.col-5-12 {
        width: 41.66%;
}

.col-7-12 {
        width: 58.33%
}

@media handheld, only screen and (max-width: 767px) {
    
    .grid {
        width: 100%;
        min-width: 0;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
        
    [class*='col-'] {
        width: auto;
        float: none;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    img {
        max-width: 100%;
    }
    
}






/*------------------------------------*\
    $LAYOUT HELPERS
\*------------------------------------*/

.p10a { padding: 10px; }
.p10l { padding-left: 10px; }
.p10r { padding-right: 10px; }
.p10t { padding-top: 10px; }
.p10b { padding-bottom: 10px; }

.p20a { padding: 20px; }
.p20l { padding-left: 20px; }
.p20r { padding-right: 20px; }
.p20t { padding-top: 20px; }
.p20b { padding-bottom: 20px; }

.txtleft { text-align: left; }
.txtright { text-align: right; }
.txtcenter { text-align: center; }