Posted By

vanseijen on 11/04/12

Tagged

Versions (?)

Last Edited at 11/04/12 08:24pm

Statistics

Viewed 666 times

Favorited by 0 user(s)

Related snippets

Nexus Themes full responsive web design CSS

/ Published in: CSS

The fixed page layout responsive design CSS used in Nexus Themes Framework

Highlighted TextExpand

/*  
Description: Nexus core responsive css
Version: 2.0.1
Author: Johan van Seijen
Author URI: http://www.nexusthemes.com/ 
*/

/* BASIC RESPONSIVE FRAMEWORK
----------------------------------------------------------------------------------------------------

The #container is the main container of our theme. For the media query between 960 and 1199 pixels
we are setting the body font-size on 10 pixels. With a width of 96 ems the container "acts" as if
having the former best-practice width of 10 * 96 = 960px */

/* IE8 and older browsers do not support media queries. We've chosen to skip all of the responsive CSS for these browsers.
To do so we've wrapped all our default responsive CSS in an "empty" media query. This means IE8 and older will
not pass this media query test and will fall back on our static 960px page layout. */
@media only screen and ( min-width: 0px ) { 
#container		{ width: 96em; }

/* The main and sidebar components have the exact same dimensions as the two-third and one-third grid columns. 
Added together they are 96 ems */
.main 			{ width: 65.2em; }
.sidebar 		{ width: 30.8em; }

/* Both the rows and individual placeholders have their fixed border width translated into ems. From 36px to 3.6px */
.row 			{ border-left: 3.6em solid transparent; clear: both; }
.placeholder		{ border-right: 3.6em solid transparent; }

/* DEFAULT PLACEHOLDERS
----------------------------------------------------------------------------------------------------*/

/* FULLWIDTH */
	.one-fourth		{ width: 19.5em; }
	.one-third		{ width: 27.2em; }
	.one-half		{ width: 42.6em; }
	.two-third		{ width: 58.0em; }
	.one-whole		{ width: 88.8em; }
	.fullwidth		{ width: 96.0em; }

/* MAIN */	
	.main .one-fourth	{ width: 11.8em; }
	.main .one-third	{ width: 16.9em; }
	.main .one-half		{ width: 27.2em; }
	.main .one-whole	{ width: 58.0em; }
	.main .two-third	{ width: 37.4em; }
	
	/* SIDEBAR */
	.sidebar .one-whole	{ width: 27.2em; }
	
} /* This is the end of the media query test for IE8 and older browsers */

/* VIEWPORTS AND MEDIA QUERIES
----------------------------------------------------------------------------------------------------
For usability purposes we're currently curbing the responsive layout at 1200 pixels. Theoretically
we already support responsiveness for whatever resolution. These are currently commented out.

-@media only screen and ( min-width: 2880px ) 	{ body { font-size: 28.5px; } }
-@media only screen and ( max-width: 2879px ) 	{ body { font-size: 22.5px; } }
-@media only screen and ( max-width: 2159px ) 	{ body { font-size: 19.0px; } }
-@media only screen and ( max-width: 1919px ) 	{ body { font-size: 17.5px; } }
-@media only screen and ( max-width: 1679px ) 	{ body { font-size: 15.0px; } } */

/* curbing the responsiveness at max font-size > 12.5px */
@media only screen and ( min-width: 1440px ) 	{ body { font-size: 12.5px; } }

/* setting body font-sizes for different viewports */
@media only screen and ( max-width: 1439px ) 	{ body { font-size: 12.5px; } }
@media only screen and ( max-width: 1199px ) 	{ body { font-size: 10.0px; } }
@media only screen and ( max-width: 959px ) 	{ body { font-size: 7.5px; } }
@media only screen and ( max-width: 719px )	{ body { font-size: 5.0px; } }
@media only screen and ( max-width: 479px )	{ body { font-size: 3.0px; } }
@media only screen and ( max-width: 319px )	{ body { font-size: 2.5px; } }

/* RESPONSIVE PLACEHOLDERS
----------------------------------------------------------------------------------------------------
In consecutive order, individual placeholders are scaled up when a viewport's threshold is reached.
For example: a fullwidth one-fourth will be promoted to a one-half when the viewport between 480 and
719 pixels is triggered.

"exceptional" rows are rows which contain heterogeneous placeholders. For example: a one-fourth paired
with a one-half and another one-fourth needs to scale at different viewports than a one-fourth paired with
three other one-fourths. This is necessary for individual rows to be completely filled up. */

@media only screen and ( max-width: 959px ) {
.row1 ul.placeholder-list 	{ display: inline; }
.placeholder 			{ display: list-item; float: left; }
	
	/* FULLWIDTH */
	.main .one-fourth		{ width: 27.2em; }
	
	/* MAIN */
	.main .exceptional .one-fourth	{ width: 58.0em; }
	.main .exceptional .one-half	{ width: 58.0em; }
	.main .exceptional2 .one-half	{ width: 58.0em; }
	.main .one-fourth		{ width: 27.2em; }

}
@media only screen and ( max-width: 719px ) {
.main				{ width: 96em; }
.sidebar1			{ float: left; width: 88.8em; padding-left: 3.6em; }
	
	/* FULLWIDTH */
	.exceptional .one-fourth	{ width: 88.8em; }
	.exceptional .one-half		{ width: 88.8em; }
	.exceptional2 .one-half		{ width: 88.8em; }
	.exceptional .one-third		{ width: 88.8em; }
	.exceptional .two-third		{ width: 88.8em; }
	.one-fourth			{ width: 42.6em; }
	.one-third			{ width: 27.2em; }
	.one-half			{ width: 42.6em; }
	
	/* MAIN */	
	.main .exceptional .one-fourth	{ width: 88.8em; }
	.main .exceptional .one-half	{ width: 88.8em; }
	.main .exceptional2 .one-fourth	{ width: 42.6em; }
	.main .exceptional2 .one-half	{ width: 88.8em; }
	.main .one-fourth		{ width: 42.6em; }
	.main .one-third		{ width: 88.8em; }
	.main .one-half			{ width: 88.8em; }
	.main .one-whole		{ width: 88.8em; }
	.main .two-third		{ width: 88.8em; }
	
	/* SIDEBAR */
	.sidebar1 .one-whole		{ width: 88.8em; }
	
}
@media only screen and ( max-width: 479px ) {
	
	/* FULLWIDTH */
	.exceptional .one-half		{ width: 88.8em; }
	.one-fourth			{ width: 88.8em; }
	.one-third			{ width: 88.8em; }
	.one-half			{ width: 88.8em; }
	.two-third			{ width: 88.8em; }
	
	/* MAIN */
	.main .exceptional2 .one-fourth	{ width: 88.8em; }
	.main .one-fourth		{ width: 88.8em; }
	
}

URL: http://nexusthemes.com/how-to-make-a-responsive-wordpress-theme-part-4/

Report this snippet Tweet