skeleton.css 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. /*
  2. * Skeleton V1.2
  3. * Copyright 2011, Dave Gamache
  4. * www.getskeleton.com
  5. * Free to use under the MIT license.
  6. * http://www.opensource.org/licenses/mit-license.php
  7. * 6/20/2012
  8. */
  9. /* Table of Contents
  10. ==================================================
  11. #Base 960 Grid
  12. #Tablet (Portrait)
  13. #Mobile (Portrait)
  14. #Mobile (Landscape)
  15. #Clearing */
  16. /* #Base 960 Grid
  17. ================================================== */
  18. .container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
  19. .container .column,
  20. .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
  21. .row { margin-bottom: 20px; }
  22. /* Nested Column Classes */
  23. .column.alpha, .columns.alpha { margin-left: 0; }
  24. .column.omega, .columns.omega { margin-right: 0; }
  25. /* Base Grid */
  26. .container .one.column,
  27. .container .one.columns { width: 40px; }
  28. .container .two.columns { width: 100px; }
  29. .container .three.columns { width: 160px; }
  30. .container .four.columns { width: 220px; }
  31. .container .five.columns { width: 280px; }
  32. .container .six.columns { width: 340px; }
  33. .container .seven.columns { width: 400px; }
  34. .container .eight.columns { width: 460px; }
  35. .container .nine.columns { width: 520px; }
  36. .container .ten.columns { width: 580px; }
  37. .container .eleven.columns { width: 640px; }
  38. .container .twelve.columns { width: 700px; }
  39. .container .thirteen.columns { width: 760px; }
  40. .container .fourteen.columns { width: 820px; }
  41. .container .fifteen.columns { width: 880px; }
  42. .container .sixteen.columns { width: 940px; }
  43. .container .one-third.column { width: 300px; }
  44. .container .two-thirds.column { width: 620px; }
  45. /* Offsets */
  46. .container .offset-by-one { padding-left: 60px; }
  47. .container .offset-by-two { padding-left: 120px; }
  48. .container .offset-by-three { padding-left: 180px; }
  49. .container .offset-by-four { padding-left: 240px; }
  50. .container .offset-by-five { padding-left: 300px; }
  51. .container .offset-by-six { padding-left: 360px; }
  52. .container .offset-by-seven { padding-left: 420px; }
  53. .container .offset-by-eight { padding-left: 480px; }
  54. .container .offset-by-nine { padding-left: 540px; }
  55. .container .offset-by-ten { padding-left: 600px; }
  56. .container .offset-by-eleven { padding-left: 660px; }
  57. .container .offset-by-twelve { padding-left: 720px; }
  58. .container .offset-by-thirteen { padding-left: 780px; }
  59. .container .offset-by-fourteen { padding-left: 840px; }
  60. .container .offset-by-fifteen { padding-left: 900px; }
  61. /* #Tablet (Portrait)
  62. ================================================== */
  63. /* Note: Design for a width of 768px */
  64. @media only screen and (min-width: 768px) and (max-width: 959px) {
  65. .container { width: 768px; }
  66. .container .column,
  67. .container .columns { margin-left: 10px; margin-right: 10px; }
  68. .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
  69. .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
  70. .alpha.omega { margin-left: 0; margin-right: 0; }
  71. .container .one.column,
  72. .container .one.columns { width: 28px; }
  73. .container .two.columns { width: 76px; }
  74. .container .three.columns { width: 124px; }
  75. .container .four.columns { width: 172px; }
  76. .container .five.columns { width: 220px; }
  77. .container .six.columns { width: 268px; }
  78. .container .seven.columns { width: 316px; }
  79. .container .eight.columns { width: 364px; }
  80. .container .nine.columns { width: 412px; }
  81. .container .ten.columns { width: 460px; }
  82. .container .eleven.columns { width: 508px; }
  83. .container .twelve.columns { width: 556px; }
  84. .container .thirteen.columns { width: 604px; }
  85. .container .fourteen.columns { width: 652px; }
  86. .container .fifteen.columns { width: 700px; }
  87. .container .sixteen.columns { width: 748px; }
  88. .container .one-third.column { width: 236px; }
  89. .container .two-thirds.column { width: 492px; }
  90. /* Offsets */
  91. .container .offset-by-one { padding-left: 48px; }
  92. .container .offset-by-two { padding-left: 96px; }
  93. .container .offset-by-three { padding-left: 144px; }
  94. .container .offset-by-four { padding-left: 192px; }
  95. .container .offset-by-five { padding-left: 240px; }
  96. .container .offset-by-six { padding-left: 288px; }
  97. .container .offset-by-seven { padding-left: 336px; }
  98. .container .offset-by-eight { padding-left: 384px; }
  99. .container .offset-by-nine { padding-left: 432px; }
  100. .container .offset-by-ten { padding-left: 480px; }
  101. .container .offset-by-eleven { padding-left: 528px; }
  102. .container .offset-by-twelve { padding-left: 576px; }
  103. .container .offset-by-thirteen { padding-left: 624px; }
  104. .container .offset-by-fourteen { padding-left: 672px; }
  105. .container .offset-by-fifteen { padding-left: 720px; }
  106. }
  107. /* #Mobile (Portrait)
  108. ================================================== */
  109. /* Note: Design for a width of 320px */
  110. @media only screen and (max-width: 767px) {
  111. .container { width: 300px; }
  112. .container .columns,
  113. .container .column { margin: 0; }
  114. .container .one.column,
  115. .container .one.columns,
  116. .container .two.columns,
  117. .container .three.columns,
  118. .container .four.columns,
  119. .container .five.columns,
  120. .container .six.columns,
  121. .container .seven.columns,
  122. .container .eight.columns,
  123. .container .nine.columns,
  124. .container .ten.columns,
  125. .container .eleven.columns,
  126. .container .twelve.columns,
  127. .container .thirteen.columns,
  128. .container .fourteen.columns,
  129. .container .fifteen.columns,
  130. .container .sixteen.columns,
  131. .container .one-third.column,
  132. .container .two-thirds.column { width: 300px; }
  133. /* Offsets */
  134. .container .offset-by-one,
  135. .container .offset-by-two,
  136. .container .offset-by-three,
  137. .container .offset-by-four,
  138. .container .offset-by-five,
  139. .container .offset-by-six,
  140. .container .offset-by-seven,
  141. .container .offset-by-eight,
  142. .container .offset-by-nine,
  143. .container .offset-by-ten,
  144. .container .offset-by-eleven,
  145. .container .offset-by-twelve,
  146. .container .offset-by-thirteen,
  147. .container .offset-by-fourteen,
  148. .container .offset-by-fifteen { padding-left: 0; }
  149. }
  150. /* #Mobile (Landscape)
  151. ================================================== */
  152. /* Note: Design for a width of 480px */
  153. @media only screen and (min-width: 480px) and (max-width: 767px) {
  154. .container { width: 420px; }
  155. .container .columns,
  156. .container .column { margin: 0; }
  157. .container .one.column,
  158. .container .one.columns,
  159. .container .two.columns,
  160. .container .three.columns,
  161. .container .four.columns,
  162. .container .five.columns,
  163. .container .six.columns,
  164. .container .seven.columns,
  165. .container .eight.columns,
  166. .container .nine.columns,
  167. .container .ten.columns,
  168. .container .eleven.columns,
  169. .container .twelve.columns,
  170. .container .thirteen.columns,
  171. .container .fourteen.columns,
  172. .container .fifteen.columns,
  173. .container .sixteen.columns,
  174. .container .one-third.column,
  175. .container .two-thirds.column { width: 420px; }
  176. }
  177. /* #Clearing
  178. ================================================== */
  179. /* Self Clearing Goodness */
  180. .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
  181. /* Use clearfix class on parent to clear nested columns,
  182. or wrap each row of columns in a <div class="row"> */
  183. .clearfix:before,
  184. .clearfix:after,
  185. .row:before,
  186. .row:after {
  187. content: '\0020';
  188. display: block;
  189. overflow: hidden;
  190. visibility: hidden;
  191. width: 0;
  192. height: 0; }
  193. .row:after,
  194. .clearfix:after {
  195. clear: both; }
  196. .row,
  197. .clearfix {
  198. zoom: 1; }
  199. /* You can also use a <br class="clear" /> to clear columns */
  200. .clear {
  201. clear: both;
  202. display: block;
  203. overflow: hidden;
  204. visibility: hidden;
  205. width: 0;
  206. height: 0;
  207. }