Advanced Search

Nexus Themes full responsive web design CSS

/ Published in: CSS
Save to your folder(s)
The fixed page layout responsive design CSS used in Nexus Themes Framework

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*  
  2. Description: Nexus core responsive css
  3. Version: 2.0.1
  4. Author: Johan van Seijen
  5. Author URI: http://www.nexusthemes.com/ 
  6. */
  7.  
  8. /* BASIC RESPONSIVE FRAMEWORK
  9. ----------------------------------------------------------------------------------------------------
  10.  
  11. The #container is the main container of our theme. For the media query between 960 and 1199 pixels
  12. we are setting the body font-size on 10 pixels. With a width of 96 ems the container "acts" as if
  13. having the former best-practice width of 10 * 96 = 960px */
  14.  
  15. /* IE8 and older browsers do not support media queries. We've chosen to skip all of the responsive CSS for these browsers.
  16. To do so we've wrapped all our default responsive CSS in an "empty" media query. This means IE8 and older will
  17. not pass this media query test and will fall back on our static 960px page layout. */
  18. @media only screen and ( min-width: 0px ) { 
  19. #container		{ width: 96em; }							
  20.  
  21. /* The main and sidebar components have the exact same dimensions as the two-third and one-third grid columns. 
  22. Added together they are 96 ems */
  23. .main 			{ width: 65.2em; }
  24. .sidebar 		{ width: 30.8em; }
  25.  
  26. /* Both the rows and individual placeholders have their fixed border width translated into ems. From 36px to 3.6px */
  27. .row 			{ border-left: 3.6em solid transparent; clear: both; }
  28. .placeholder		{ border-right: 3.6em solid transparent; }
  29.  
  30. /* DEFAULT PLACEHOLDERS
  31. ----------------------------------------------------------------------------------------------------*/
  32.  
  33. 	/* FULLWIDTH */
  34. 	.one-fourth		{ width: 19.5em; }
  35. 	.one-third		{ width: 27.2em; }
  36. 	.one-half		{ width: 42.6em; }
  37. 	.two-third		{ width: 58.0em; }
  38. 	.one-whole		{ width: 88.8em; }
  39. 	.fullwidth		{ width: 96.0em; }
  40.  
  41. 	/* MAIN */	
  42. 	.main .one-fourth	{ width: 11.8em; }
  43. 	.main .one-third	{ width: 16.9em; }
  44. 	.main .one-half		{ width: 27.2em; }
  45. 	.main .one-whole	{ width: 58.0em; }
  46. 	.main .two-third	{ width: 37.4em; }
  47.  
  48. 	/* SIDEBAR */
  49. 	.sidebar .one-whole	{ width: 27.2em; }
  50.  
  51. } /* This is the end of the media query test for IE8 and older browsers */
  52.  
  53. /* VIEWPORTS AND MEDIA QUERIES
  54. ----------------------------------------------------------------------------------------------------
  55. For usability purposes we're currently curbing the responsive layout at 1200 pixels. Theoretically
  56. we already support responsiveness for whatever resolution. These are currently commented out.
  57.  
  58. -@media only screen and ( min-width: 2880px ) 	{ body { font-size: 28.5px; } }
  59. -@media only screen and ( max-width: 2879px ) 	{ body { font-size: 22.5px; } }
  60. -@media only screen and ( max-width: 2159px ) 	{ body { font-size: 19.0px; } }
  61. -@media only screen and ( max-width: 1919px ) 	{ body { font-size: 17.5px; } }
  62. -@media only screen and ( max-width: 1679px ) 	{ body { font-size: 15.0px; } } */
  63.  
  64. /* curbing the responsiveness at max font-size > 12.5px */
  65. @media only screen and ( min-width: 1440px ) 	{ body { font-size: 12.5px; } }
  66.  
  67. /* setting body font-sizes for different viewports */
  68. @media only screen and ( max-width: 1439px ) 	{ body { font-size: 12.5px; } }
  69. @media only screen and ( max-width: 1199px ) 	{ body { font-size: 10.0px; } }
  70. @media only screen and ( max-width: 959px ) 	{ body { font-size: 7.5px; } }
  71. @media only screen and ( max-width: 719px )	{ body { font-size: 5.0px; } }
  72. @media only screen and ( max-width: 479px )	{ body { font-size: 3.0px; } }
  73. @media only screen and ( max-width: 319px )	{ body { font-size: 2.5px; } }
  74.  
  75.  
  76. /* RESPONSIVE PLACEHOLDERS
  77. ----------------------------------------------------------------------------------------------------
  78. In consecutive order, individual placeholders are scaled up when a viewport's threshold is reached.
  79. For example: a fullwidth one-fourth will be promoted to a one-half when the viewport between 480 and
  80. 719 pixels is triggered.
  81.  
  82. "exceptional" rows are rows which contain heterogeneous placeholders. For example: a one-fourth paired
  83. with a one-half and another one-fourth needs to scale at different viewports than a one-fourth paired with
  84. three other one-fourths. This is necessary for individual rows to be completely filled up. */
  85.  
  86. @media only screen and ( max-width: 959px ) {
  87. .row1 ul.placeholder-list 	{ display: inline; }
  88. .placeholder 			{ display: list-item; float: left; }
  89.  
  90. 	/* FULLWIDTH */
  91. 	.main .one-fourth		{ width: 27.2em; }
  92.  
  93. 	/* MAIN */
  94. 	.main .exceptional .one-fourth	{ width: 58.0em; }
  95. 	.main .exceptional .one-half	{ width: 58.0em; }
  96. 	.main .exceptional2 .one-half	{ width: 58.0em; }
  97. 	.main .one-fourth		{ width: 27.2em; }
  98.  
  99. }
  100. @media only screen and ( max-width: 719px ) {
  101. .main				{ width: 96em; }
  102. .sidebar1			{ float: left; width: 88.8em; padding-left: 3.6em; }
  103.  
  104. 	/* FULLWIDTH */
  105. 	.exceptional .one-fourth	{ width: 88.8em; }
  106. 	.exceptional .one-half		{ width: 88.8em; }
  107. 	.exceptional2 .one-half		{ width: 88.8em; }
  108. 	.exceptional .one-third		{ width: 88.8em; }
  109. 	.exceptional .two-third		{ width: 88.8em; }
  110. 	.one-fourth			{ width: 42.6em; }
  111. 	.one-third			{ width: 27.2em; }
  112. 	.one-half			{ width: 42.6em; }
  113.  
  114. 	/* MAIN */	
  115. 	.main .exceptional .one-fourth	{ width: 88.8em; }
  116. 	.main .exceptional .one-half	{ width: 88.8em; }
  117. 	.main .exceptional2 .one-fourth	{ width: 42.6em; }
  118. 	.main .exceptional2 .one-half	{ width: 88.8em; }
  119. 	.main .one-fourth		{ width: 42.6em; }
  120. 	.main .one-third		{ width: 88.8em; }
  121. 	.main .one-half			{ width: 88.8em; }
  122. 	.main .one-whole		{ width: 88.8em; }
  123. 	.main .two-third		{ width: 88.8em; }
  124.  
  125. 	/* SIDEBAR */
  126. 	.sidebar1 .one-whole		{ width: 88.8em; }
  127.  
  128. }
  129. @media only screen and ( max-width: 479px ) {
  130.  
  131. 	/* FULLWIDTH */
  132. 	.exceptional .one-half		{ width: 88.8em; }
  133. 	.one-fourth			{ width: 88.8em; }
  134. 	.one-third			{ width: 88.8em; }
  135. 	.one-half			{ width: 88.8em; }
  136. 	.two-third			{ width: 88.8em; }
  137.  
  138. 	/* MAIN */
  139. 	.main .exceptional2 .one-fourth	{ width: 88.8em; }
  140. 	.main .one-fourth		{ width: 88.8em; }
  141.  
  142. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.