Posted By

dsuffern on 02/20/13


Tagged

css template design responsive


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

fhenderson
vishal_panchal
bdario


Responsive Design Starter CSS


 / Published in: CSS
 

Took bits and pieces of Responsive Boilerplate, using mobile first and progressively enhanced ideology to make a solid starting point for Responsive Design.

  1. /* -----------------------------------------
  2. Responsive Starter Template
  3.   ----------------------------------------- */
  4.  
  5. /* Reset & Base
  6. ================================================================================================= */
  7. 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 {
  8. margin: 0;
  9. padding: 0;
  10. border: 0;
  11. font-size: 100%;
  12. font: inherit;
  13. vertical-align: baseline;
  14. }
  15. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
  16. body {line-height: 1;}
  17. ol, ul {list-style: none;}
  18. blockquote, q {quotes: none;}
  19. blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
  20. table {border-collapse: collapse; border-spacing: 0;}
  21. figure {margin: 0}
  22. img, object, embed, video {max-width: 100%; _width: 100%} /* Fluid images */
  23. img {border: 0; -ms-interpolation-mode: bicubic; height: auto;} /* Improve IE's resizing of images */
  24. svg:not(:root) {overflow: hidden} /* Correct IE9 overflow */
  25.  
  26.  
  27. /* Links (No outline borders)
  28. ============================================================================================== */
  29. a{text-decoration: none;}
  30. a:hover, a:active {outline: 0;}
  31.  
  32.  
  33. /* #Containers
  34. ================================================================================================= */
  35. .fixed-container {
  36. width:1024px;
  37. margin: 0 auto;
  38. display: block;
  39. }
  40.  
  41. .container {
  42. width: 100%;
  43. margin: 0 auto;
  44. padding: 0 20px;
  45. display: block;
  46. }
  47.  
  48. /* #Colummns
  49. ================================================================================================= */
  50. .one-unit, .two-units, .three-units, .four-units, .five-units, .six-units, .seven-units, .eight-units, .nine-units, .ten-units, .eleven-units, .twelve-units {
  51. float: left;
  52. position: relative;
  53. margin-left: 1%;
  54. margin-right: 1%;
  55. }
  56.  
  57. /* #Grid 12 Colummns
  58. ================================================================================================= */
  59. .one-unit {width:6.333%;}
  60. .two-units {width:14.667%;}
  61. .three-units {width:23.0%;}
  62. .four-units {width:31.333%;}
  63. .five-units {width:39.667%;}
  64. .six-units {width:48.0%;}
  65. .seven-units {width:56.333%;}
  66. .eight-units {width:64.667%;}
  67. .nine-units {width:73.0%;}
  68. .ten-units {width:81.333%;}
  69. .eleven-units {width:89.667%;}
  70. .twelve-units {width:98.0%;}
  71.  
  72. /* #Clear Margin left and right
  73. ================================================================================================= */
  74. .first {margin-left: 0;}
  75. .last {margin-right: 0;}
  76.  
  77.  
  78.  
  79. /* Responsive Navigation Basic Style
  80. ----------------------------------------------------------------------------------------------------*/
  81. nav ul {list-style: none;}
  82. nav li {display: inline-block;}
  83. nav a {display: inline-block;}
  84. nav select {display: none;}
  85.  
  86.  
  87. /* Clear
  88. ----------------------------------------------------------------------------------------------------*/
  89. .cf:before, .cf:after {content:""; display:table;}
  90. .cf:after {clear:both;}
  91. .cf {zoom:1;}
  92.  
  93.  
  94. /* General small screen Mobile
  95. ============================================================================================== */
  96. body {
  97. font-size: 1.0em;
  98. -webkit-text-size-adjust: none;
  99. -ms-text-size-adjust: none;
  100. }
  101.  
  102. .fixed-container,.container {
  103. width: 100%;
  104. min-width: 0;
  105. margin-left: 0px;
  106. margin-right: 0px;
  107. padding-left: 0px;
  108. padding-right: 0px;
  109. }
  110.  
  111. .one-unit, .two-units, .three-units, .four-units, .five-units, .six-units, .seven-units, .eight-units, .nine-units, .ten-units, .eleven-units, .twelve-units {
  112. {
  113. width: auto;
  114. float: none;
  115. margin-left: 10px;
  116. margin-right: 10px;
  117. padding-left: 10px;
  118. padding-right: 10px;
  119. }
  120.  
  121.  
  122. /* #MEDIA QUERIES - Progressively Enhance With Mobile First
  123. ============================================================================================== */
  124. @media screen and (min-width: 320px) {
  125. /* Add your styles for devices with a maximum width of 320 */
  126. }
  127.  
  128. @media screen and (min-width: 480px) {
  129. /* Add your styles for devices with a maximum width of 480 */
  130. }
  131.  
  132. @media screen and (min-width: 768px) {
  133. /* GRID FOR DESKTOPS */
  134. /* #Containers
  135. ================================================================================================= */
  136. .fixed-container {
  137. width:1024px;
  138. margin: 0 auto;
  139. display: block;
  140. }
  141.  
  142. .container {
  143. width: 100%;
  144. margin: 0 auto;
  145. padding: 0 20px;
  146. display: block;
  147. }
  148.  
  149. /* #Colummns
  150. ================================================================================================= */
  151. .one-unit, .two-units, .three-units, .four-units, .five-units, .six-units, .seven-units, .eight-units, .nine-units, .ten-units, .eleven-units, .twelve-units {
  152. float: left;
  153. position: relative;
  154. margin-left: 1%;
  155. margin-right: 1%;
  156. }
  157.  
  158. /* #Grid 12 Colummns
  159. ================================================================================================= */
  160. .one-unit {width:6.333%;}
  161. .two-units {width:14.667%;}
  162. .three-units {width:23.0%;}
  163. .four-units {width:31.333%;}
  164. .five-units {width:39.667%;}
  165. .six-units {width:48.0%;}
  166. .seven-units {width:56.333%;}
  167. .eight-units {width:64.667%;}
  168. .nine-units {width:73.0%;}
  169. .ten-units {width:81.333%;}
  170. .eleven-units {width:89.667%;}
  171. .twelve-units {width:98.0%;}
  172. }
  173.  
  174. @media screen and (min-width: 1024px) {
  175. /* Add your styles for devices with a maximum width of 1024 */
  176. }
  177.  
  178. /* iPads (landscape) ----------- */
  179. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  180. /* Add your styles for devices with a maximum width of 1024 */
  181. }
  182. /* iPads (portrait) ----------- */
  183. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  184. /* Add your styles for devices with a maximum width of 768 */
  185. }

Report this snippet  

You need to login to post a comment.