Posted By

fasterhorses on 04/01/13

Tagged

web
design

Versions (?)

Last Edited at 04/01/13 03:34am

Statistics

Viewed 730 times

Favorited by 0 user(s)

Related snippets

The Double A Method

/ Published in: CSS

A toolkit method for responsive development

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

/*
==================================================
    The Double A Method
==================================================
*/
 
* { box-sizing: border-box; }
 
body {
	border-left-color: red;
	border-left-style: solid;
	border-left-width: 8px;
}
 
@media only screen and (min-width: 30em) { 
	body { border-left-color: orange; }
}
 
@media only screen and (min-width: 40em) { 
	body { border-left-color: green; }
}
 
@media only screen and (min-width: 50em) { 
	body { border-left-color: blue; }
}
 
@media only screen and (min-width: 60em) { 
	body { border-left-color: purple; }
}