API tools faq
paste
Advertisement
helgatheviki

Baseline CSS 16px/24px

helgatheviki
Apr 7th, 2011
535
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.89 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. Baseline - a designer framework
  3. Copyright (C) 2009 Stephane Curzi, ProjetUrbain.com
  4. Creative Commons Attribution-Share Alike 3.0 License
  5. version 0.5
  6. */
  7.  
  8. /******************** Reset ********************/
  9. html, body, div, span, a, img,
  10. h1, h2, h3, h4, h5, h6, hgroup, p,
  11. dl, dialog, dt, dd, ol, ul, li,
  12. abbr, acronym, address, b, big, blockquote,
  13. cite, code, del, dfn, em, i, ins, kbd, pre, q,
  14. samp, tt, var, small, strong, sub, sup,
  15. object, iframe, form, fieldset, label, legend,
  16. table, caption, tbody, tfoot, thead, tr, th, td,
  17. article, aside, footer, header, nav, section,
  18. figure, menu, time, mark, audio, video                      { font-family: inherit; font-size: 100%; font-weight: inherit; font-style: inherit; vertical-align: baseline; white-space: normal; text-align: left; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; }
  19. textarea                                                    { font-family: inherit; font-size: 100%; font-weight: normal; font-style: normal; white-space: normal; text-align: left; margin: 0; padding: 0; }
  20. article, aside, footer, header, nav, section,
  21. dialog, figure, hgroup, menu                                { display: block; }
  22.  
  23. h1, h2, h3, h4, h5, h6                                      { font-size: 100%; font-weight: normal; }
  24. del, ins                                                    { text-decoration: none; }
  25. ol, ul                                                      { list-style: none; }
  26. nav ul                                                      { list-style-type: none; }
  27. table                                                       { border-collapse: separate; border-spacing: 0; background-color: transparent; width: auto; height: auto; }
  28. :focus                                                      { outline: 0; }
  29. blockquote:before, blockquote:after, q:before, q:after      { content: ""; }
  30. blockquote, q                                               { quotes: "" ""; }
  31. input                                                       { margin: 0; }
  32.  
  33.  
  34. /********** Deprecated and obsolete elements **********/
  35. applet, basefont, dir, font, isindex, menu, s, strike, u    { font-family: inherit; font-size: 100%; font-weight: normal; font-style: normal; white-space: normal; vertical-align: baseline; text-decoration: inherit; text-align: left; color: inherit; margin: 0; padding: 0; border: 0; outline: 0; }
  36. dir, menu                                                   { list-style: none; }
  37. nobr                                                        { white-space: normal; }
  38. blink                                                       { text-decoration: none; }
  39. marquee                                                     { overflow: visible; }
  40.  
  41.  
  42. /*
  43. Baseline - a designer framework
  44. Copyright (C) 2009 Stephane Curzi, ProjetUrbain.com
  45. Creative Commons Attribution-Share Alike 3.0 License
  46. version 0.5.2
  47. */
  48.  
  49. /******************** Base ********************/
  50. body                                            { font-family: helvetica, arial, sans-serif; line-height: 1.5; background: white; color: black; }
  51. h1, h2, h3, h4, h5, h6                          { line-height: 1.2; }
  52. h4, h5, h6                                      { font-weight: bold; }
  53. b, strong, caption, th, thead, dt, legend       { font-weight: bold; }
  54. cite, dfn, em, i                                { font-style: italic; }
  55. code, kbd, samp, pre, tt, var                   { font-family: mono-space, monospace; }
  56. h1, h2, h3, h4, h5, h6                          { word-spacing: -0.125em; }
  57. p                                               { word-spacing: 0.125em; hyphenate: auto; hyphenate-lines: 3; }
  58. p+p                                             { text-indent: 1.5em; }
  59. p+p.no-indent                                   { text-indent: 0; }
  60. pre                                             { white-space: pre; }
  61. del                                             { text-decoration: line-through; }
  62. mark                                            { background: rgba(255, 255, 0, 0.4); padding: 0 .25em; }
  63. ins                                             { color: #f00; }
  64. small, sup, sub                                 { font-size: 80%; }
  65. big                                             { font-size: 125%; line-height: 80%; }
  66. abbr, acronym                                   { font-size: 85%; text-transform: uppercase; letter-spacing: .1em; }
  67. abbr[title], acronym[title], dfn[title]         { border-bottom: 1px dotted black; cursor: help; }
  68. sup, sub                                        { line-height: 0; }
  69. sup                                             { vertical-align: super; }
  70. sub                                             { vertical-align: sub; }
  71. blockquote                                      { padding: 1.5em; }
  72. hr                                              { border: none; background: #ddd; width: 100%; }
  73. ul, ol                                          { margin-left: 1.5em; }
  74. ul                                              { list-style: disc outside; }
  75. ol                                              { list-style: decimal outside; }
  76. input, select, button                           { cursor: pointer; }
  77. table                                           { font: inherit; width: 100%; }
  78.  
  79. /* html 5 */
  80. article, aside, header, hgroup,
  81. nav, figure, section, footer                    { display: block; }
  82.  
  83. /* Debug */
  84. .debug                                          { outline: solid gold 1px; }
  85. .debug-background                               { background: rgba(255, 215, 0, 0.2) !important; }
  86.  
  87.  
  88. /*
  89. Baseline - a designer framework
  90. Copyright (C) 2009 Stephane Curzi, ProjetUrbain.com
  91. Creative Commons Attribution-Share Alike 3.0 License
  92. version 0.5
  93. */
  94.  
  95. /******************** Baseline grid: 16/24px ********************/
  96. body                                { font-size: 100%; line-height: 1.5; /*16/24*/ }
  97.  
  98. h1, h2, h3, h4, h5, h6              { position: relative; }
  99. h1, h2                              { line-height: 48px; margin-bottom: 24px; }
  100. h1, h2, h3, h4                      { margin-top: 24px; }
  101. h3, h4, h5, h6                      { line-height: 24px; }
  102. h1                                  { font-size: 40px; top: 10px; }
  103. h2                                  { font-size: 36px; top: 11px; }
  104. h3                                  { font-size: 30px; top: 1px; }
  105. h4                                  { font-size: 24px; top: 3px; }
  106. h5                                  { font-size: 20px; top: 4px; }
  107. h6                                  { font-size: 16px; top: 5px; }
  108. h1:first-child,
  109. h2:first-child,
  110. h3:first-child,
  111. h4:first-child                      { margin-top: 0; }
  112.  
  113. p, pre, address                     { font-size: 16px; line-height: 24px; position: relative; top: 5px; }
  114. small                               { font-size: 13px; }
  115. abbr, code, kbd,
  116. samp, small, var                    { line-height: 24px; }
  117. ul, ol, dl, dialog                  { font-size: 16px; line-height: 24px; position: relative; top: 5px; margin-top: 24px; margin-bottom: 24px; }
  118. li ul, li ol, ul ul, ol ol          { top: 0; margin-top: 0; margin-bottom: 0; }
  119. li h1, li h2, li h3,
  120. li h4, li h5, li h6,
  121. li p                                { top: 0; }
  122. form, legend, label                 { font-size: 16px; line-height: 24px; }
  123. legend                              { position: relative; top: 6px; }
  124. table                               { font-size: 16px; }
  125. caption                             { font-size: 16px; line-height: 24px; position: relative; }
  126. hr                                  { position: relative; height: 4px; margin: 24px 0 20px 0; }
  127.  
  128.  
  129. /*
  130. Baseline - a designer framework
  131. Copyright (C) 2009 Stephane Curzi, ProjetUrbain.com
  132. Creative Commons Attribution-Share Alike 3.0 License
  133. version 0.5
  134. */
  135.  
  136. /******************** Table ********************/
  137. table                               { border-collapse: collapse; border-top: solid 3px #000; position: relative; margin-top: 24px; }
  138.  
  139. th, td                              { line-height: 24px; padding: 12px 24px 11px 0; }
  140. thead th, thead td                  { padding-top: 10px; }
  141. tfoot th, tfoot td                  { padding-bottom: 11px; }
  142. tbody th, tbody td,
  143. tfoot th, tfoot td                  { border-top: solid 1px #000; }
  144.  
  145. th:first-child, td:first-child      { padding-left: 0; }
  146. th:last-child, td:last-child        { padding-right: 0; }
  147.  
  148. tr:nth-child(even) td               { }
  149. tbody tr:nth-child(odd) th,
  150. tbody tr:nth-child(odd) td          { background: rgba(0, 0, 0, 0.035); }
  151.  
  152. caption                             { top: 5px; margin-bottom: 24px; }
  153.  
  154.  
  155. /*
  156. Baseline - a designer framework
  157. Copyright (C) 2009 Stephane Curzi, ProjetUrbain.com
  158. Creative Commons Attribution-Share Alike 3.0 License
  159. version 0.5
  160. */
  161.  
  162. /******************** Form ********************/
  163.  
  164. form                            { overflow: auto; }
  165. legend                          { padding-bottom: 24px; }
  166. label                           { width: 100%; position: relative; top: 5px; margin-bottom: 24px; line-height: 24px; display: block; }
  167.  
  168. input[type="text"],
  169. input[type="password"],
  170. input[type="select"],
  171. input[type="search"]            { width: 100%; margin-bottom: -4px; display: block; padding: 4px;}
  172.  
  173. input[type="radio"]             { top: -1px; margin: 0 4px 3px 1px; }
  174. input[type="checkbox"]          { top: -2px; margin: 0 4px 3px 1px; }
  175. input[type="file"]              { margin: 0px 6px 0px 6px; }
  176.  
  177. input[type="submit"],
  178. input[type="reset"],
  179. input[type="button"]            { position: relative; top: 5px; margin-bottom: 24px; }
  180.  
  181. select                          { display: block; margin-bottom: -6px; padding: 4px;}
  182. textarea                        { width: 99%; line-height: 24px; padding: 4px; margin-bottom: -10px; display: block; clear: left; overflow: auto; }
  183.  
  184.  
  185.  
  186. /*
  187. Baseline - a designer framework
  188. Copyright (C) 2009 Stephane Curzi, ProjetUrbain.com
  189. Creative Commons Attribution-Share Alike 3.0 License
  190. version 0.5.3
  191. */
  192.  
  193. /******************** Grid ********************/
  194. #page               { width: 990px; position: relative; } /* 82.5em */
  195. #page:after         { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  196.  
  197. /* Base column markup */
  198. .column             { margin-left: 18px; display: block; float: left; } /* 1.5em */
  199. .colgroup           { display: block; float: left; }
  200. .first              { margin-left: 0; clear: left; }
  201. .gutter             { margin-left: 18px; } /* 1.5em */
  202. .no-gutter          { margin-left: 0; }
  203. .align-left         { float: left; }
  204. .align-right        { float: right; text-align: right; }
  205. .clear              { float: left; }
  206. header,
  207. section             { padding-bottom: 24px; }
  208.  
  209. .leading            { margin-bottom: 24px; } /* 1.5em */
  210. .noleading          { margin-bottom: 0 !important; }       
  211.  
  212. /* Base column width */
  213. .width1             { width: 234px; } /* 19.5em */
  214. .width2             { width: 486px; } /* 40.5em */
  215. .width3             { width: 738px; } /* 61.5em */
  216. .width4             { width: 990px; margin-left: 0 !important; } /* 82.5em */
  217. .full               { display: block; float: left; width: 100%; margin-left: 0 !important; }
  218.  
  219. /* Base column unit, 2 units = 1 column */
  220. .unitx1             { width: 108px; } /* 9em */
  221. .unitx2             { width: 234px; } /* 19.5em, Same as width1 */
  222. .unitx3             { width: 360px; } /* 30em */
  223. .unitx4             { width: 486px; } /* 40.5em, Same as width2 */
  224. .unitx5             { width: 612px; } /* 51em */
  225. .unitx6             { width: 738px; } /* 61.5em, Same as width3 */
  226. .unitx7             { width: 864px; } /* 72em */
  227. .unitx8             { width: 990px; margin-left: 0 !important; } /* 82.5em, Same as width4 */
  228.  
  229. /* CSS3 columns */
  230. .columnsx2          { -webkit-column-count: 2; -webkit-column-gap: 18px; -moz-column-count: 2; -moz-column-gap: 18px; column-count: 2; column-gap: 18px; }
  231. .columnsx4          { -webkit-column-count: 4; -webkit-column-gap: 18px; -moz-column-count: 4; -moz-column-gap: 18px; column-count: 4; column-gap: 18px; }
  232.  
  233. /******************** Table ********************/
  234. /* Columns */
  235. th.width1, td.width1            { width: 234px; }
  236. th.width2, td.width2            { width: 486px; }
  237. th.width3, td.width3            { width: 738px; }
  238. th.width4, td.width4            { width: 990px; }
  239.  
  240. /* Units */
  241. th.unitx1, th.unitx1            { width: 108px; }
  242. th.unitx2, td.unitx2            { width: 234px; }
  243. th.unitx3, td.unitx3            { width: 360px; }
  244. th.unitx4, td.unitx4            { width: 486px; }
  245. th.unitx5, td.unitx5            { width: 612px; }
  246. th.unitx6, td.unitx6            { width: 738px; }
  247. th.unitx7, td.unitx7            { width: 864px; }
  248. th.unitx8, td.unitx8            { width: 990px; }
  249.  
  250. /******************** Forms ********************/
  251. label.width1, label.width2,
  252. label.width3, label.width4      { margin-left: 18px; float: left; }
  253.  
  254. label.unitx1, label.unitx2,
  255. label.unitx3, label.unitx4,
  256. label.unitx5, label.unitx6,
  257. label.unitx7, label.unitx8      { margin-left: 18px; float: left; }
  258. label.first                     { margin-left: 0; }
  259.  
  260. label.width4, label.unitx8      { width: 990px; overflow: hidden; }
  261.  
  262. label.width1 input[type="text"], label.width1 input[type="password"], label.width1 input[type="select"], label.width1 input[type="search"]  { width: 228px; }
  263. label.width2 input[type="text"], label.width2 input[type="password"], label.width2 input[type="select"], label.width2 input[type="search"]  { width: 480px; }
  264. label.width3 input[type="text"], label.width3 input[type="password"], label.width3 input[type="select"], label.width3 input[type="search"]  { width: 732px; }
  265. label.width4 input[type="text"], label.width4 input[type="password"], label.width4 input[type="select"], label.width4 input[type="search"]  { width: 984px; }
  266.  
  267. label.width1 select             { width: 234px; }
  268. label.width2 select             { width: 486px; }
  269. label.width3 select             { width: 738px; }
  270. label.width4 select             { width: 990px; }
  271.  
  272. label.unitx1 input[type="text"], label.unitx1 input[type="password"], label.unitx1 input[type="select"], label.unitx1 input[type="search"]  { width: 102px; }
  273. label.unitx2 input[type="text"], label.unitx2 input[type="password"], label.unitx2 input[type="select"], label.unitx2 input[type="search"]  { width: 228px; }
  274. label.unitx3 input[type="text"], label.unitx3 input[type="password"], label.unitx3 input[type="select"], label.unitx3 input[type="search"]  { width: 354px; }
  275. label.unitx4 input[type="text"], label.unitx4 input[type="password"], label.unitx4 input[type="select"], label.unitx4 input[type="search"]  { width: 480px; }
  276. label.unitx5 input[type="text"], label.unitx5 input[type="password"], label.unitx5 input[type="select"], label.unitx5 input[type="search"]  { width: 606px; }
  277. label.unitx6 input[type="text"], label.unitx6 input[type="password"], label.unitx6 input[type="select"], label.unitx6 input[type="search"]  { width: 732px; }
  278. label.unitx7 input[type="text"], label.unitx7 input[type="password"], label.unitx7 input[type="select"], label.unitx7 input[type="search"]  { width: 858px; }
  279. label.unitx8 input[type="text"], label.unitx8 input[type="password"], label.unitx8 input[type="select"], label.unitx8 input[type="search"]  { width: 984px; }
  280.  
  281. label.unitx1 select             { width: 108px; }
  282. label.unitx2 select             { width: 234px; }
  283. label.unitx3 select             { width: 360px; }
  284. label.unitx4 select             { width: 486px; }
  285. label.unitx5 select             { width: 612px; }
  286. label.unitx6 select             { width: 738px; }
  287. label.unitx7 select             { width: 864px; }
  288. label.unitx8 select             { width: 990px; }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!