Revision: 60349
Updated Code
at November 4, 2012 20:48 by vanseijen
Updated Code
/*
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; }
}
Revision: 60348
Updated Code
at November 4, 2012 20:40 by vanseijen
Updated Code
/*
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; }
}
Revision: 60347
Updated Code
at November 4, 2012 20:35 by vanseijen
Updated Code
/*
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; }
}
Revision: 60346
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at November 4, 2012 20:24 by vanseijen
Initial Code
Johan van Seijen
Initial URL
http://nexusthemes.com/how-to-make-a-responsive-wordpress-theme-part-4/
Initial Description
The fixed page layout responsive design CSS used in Nexus Themes Framework
Initial Title
Nexus Themes full responsive web design CSS
Initial Tags
wordpress, web, design
Initial Language
CSS