Download as
Browse Code »

Commit 225e36a8562d91abc5b94bbc93f1590af3eac6d7

Authored by Dan Croak
1 parent dacfcb14
Exists in master and in 1 other branch production-vendorized

adding CSS framework

Showing 5 changed files with 353 additions and 0 deletions   Show diff stats
public/stylesheets/framework/forms.css 0 → 100644
  Diff comments   View file @225e36a
... ... @@ -0,0 +1,83 @@
  1 +/* fieldsets */
  2 +
  3 +form fieldset.inputs, form fieldset.buttons {
  4 + margin: 1em 0; }
  5 +
  6 +/* labels */
  7 +
  8 +form fieldset div label {
  9 + display: block;
  10 + font-size: 1.4em; }
  11 +
  12 +/* instruction */
  13 +
  14 +form fieldset p.instruction {
  15 + font-size: 1em; }
  16 +
  17 +form fieldset .hidden {
  18 + display: none; }
  19 +
  20 +/* inputs */
  21 +
  22 +form fieldset div.string,
  23 +form fieldset div.numeric,
  24 +form fieldset div.password {
  25 + margin: 0 0 2em 0; }
  26 +
  27 +form fieldset div.string input,
  28 +form fieldset div.numeric input,
  29 +form fieldset div.text textarea {
  30 + padding: 0.4em; }
  31 +
  32 +form fieldset div.password input {
  33 + font-weight: bold; }
  34 +
  35 +form fieldset div.boolean label,
  36 +form fieldset div.boolean input {
  37 + display: inline; }
  38 +
  39 +form fieldset div.boolean label {
  40 + margin: 0 0.5em 0 0.2em; }
  41 +
  42 +/* radio buttons and check boxes */
  43 +
  44 +form fieldset div.radio_buttons fieldset ol,
  45 +form fieldset div.check_boxes fieldset ol, {
  46 + margin-bottom: -0.6em; }
  47 +form fieldset div.radio_buttons fieldset ol li,
  48 +form fieldset div.check_boxes fieldset ol li, {
  49 + margin: 0.1em 0 0.5em 0; }
  50 +form fieldset div.radio_buttons fieldset ol li label,
  51 +form fieldset div.check_boxes fieldset ol li label {
  52 + float: none; }
  53 +form fieldset div.radio_buttons fieldset ol li label input,
  54 +form fieldset div.check_boxes fieldset ol li label input, {
  55 + margin-right: 0.2em; }
  56 +
  57 +/* dates, times, and datetimes */
  58 +
  59 +form fieldset div.date fieldset ol li,
  60 +form fieldset div.time fieldset ol li,
  61 +form fieldset div.datetime fieldset ol li {
  62 + float: left;
  63 + width: auto;
  64 + margin: 0 .3em 0 0; }
  65 +
  66 +form fieldset div.date fieldset ol li label,
  67 +form fieldset div.time fieldset ol li label,
  68 +form fieldset div.datetime fieldset ol li label {
  69 + display: none; }
  70 +
  71 +form fieldset div.date fieldset ol li label input,
  72 +form fieldset div.time fieldset ol li label input,
  73 +form fieldset div.datetime fieldset ol li label input {
  74 + display: inline;
  75 + margin: 0;
  76 + padding: 0; }
  77 +
  78 +/* buttons */
  79 +
  80 +form fieldset.buttons input {
  81 + font-size: 1.2em;
  82 + padding: 1em; }
  83 +
... ...
public/stylesheets/framework/layout.css 0 → 100644
  Diff comments   View file @225e36a
... ... @@ -0,0 +1,70 @@
  1 +.clearfix:after {
  2 + content: ".";
  3 + display: block;
  4 + height: 0;
  5 + clear: both;
  6 + visibility: hidden;
  7 +}
  8 +* html .clearfix { height: 1%; }
  9 +*:first-child+html .clearfix { min-height: 1px; }
  10 +
  11 +.half,
  12 +.quarter,
  13 +.three_quarters {
  14 + display: inline-block;
  15 + vertical-align: top;
  16 +}
  17 +
  18 +.middle {
  19 + margin: 0 auto;
  20 +}
  21 +
  22 +.center {
  23 + text-align: center;
  24 +}
  25 +
  26 +/* grid 960 { 480 240 120 60 30 15 5 } */
  27 +
  28 +/*.grid_960 */
  29 +.grid_960 .row{
  30 + width: 96em;
  31 + margin: 0 auto;
  32 +}
  33 +
  34 +.grid_960 .half {
  35 + width: 48em;
  36 +}
  37 +
  38 +.grid_960 .quarter {
  39 + width: 24em;
  40 +}
  41 +
  42 +.grid_960 .three_quarters {
  43 + width: 72em;
  44 +}
  45 +
  46 +/* testing framework */
  47 +.test {
  48 + -moz-opacity: .7;
  49 + background: #000;
  50 + color: #FFF;
  51 +}
  52 +.test h1 {
  53 + background: #0F0;
  54 +}
  55 +.test h2 {
  56 + background: #0C0;
  57 +}
  58 +.test h3 {
  59 + background: #090;
  60 +}
  61 +.test h4 {
  62 + background: #060;
  63 +}
  64 +.test ul {
  65 + background: #c00;
  66 +}
  67 +.test p {
  68 + background: #c00;
  69 +}
  70 +
... ...
public/stylesheets/framework/reset.css 0 → 100644
  Diff comments   View file @225e36a
... ... @@ -0,0 +1,50 @@
  1 +/*
  2 + reset.css - global defaults
  3 + http://meyerweb.com/tools/css/reset
  4 +*/
  5 +
  6 +html, body, div, span, applet, object, iframe,
  7 +h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  8 +a, abbr, acronym, address, big, cite, code,
  9 +del, dfn, em, font, img, ins, kbd, q, s, samp,
  10 +small, strike, strong, sub, sup, tt, var,
  11 +b, u, i, center,
  12 +dl, dt, dd, ol, ul, li,
  13 +fieldset, form, label, legend,
  14 +table, caption, tbody, tfoot, thead, tr, th, td {
  15 + margin: 0;
  16 + padding: 0;
  17 + border: 0;
  18 + outline: 0;
  19 + font-size: 100%;
  20 + vertical-align: baseline;
  21 + background: transparent;
  22 +}
  23 +
  24 +body { line-height: 1; }
  25 +
  26 +ol, ul { list-style: none; }
  27 +
  28 +blockquote, q { quotes: none; }
  29 +
  30 +blockquote:before, blockquote:after,
  31 +q:before, q:after {
  32 + content: '';
  33 + content: none;
  34 +}
  35 +
  36 +/* remember to define focus styles! */
  37 +:focus {
  38 + outline: 0;
  39 +}
  40 +
  41 +/* remember to highlight inserts somehow! */
  42 +ins { text-decoration: none; }
  43 +del { text-decoration: line-through; }
  44 +
  45 +/* tables still need 'cellspacing="0"' in the markup */
  46 +table {
  47 + border-collapse: collapse;
  48 + border-spacing: 0;
  49 +}
  50 +
... ...
public/stylesheets/framework/typography.css 0 → 100644
  Diff comments   View file @225e36a
... ... @@ -0,0 +1,145 @@
  1 +/*
  2 + These values are sensible defaults. You are encouraged to define your own values.
  3 +
  4 + Formula:
  5 + base line-height / font-size = element line-height
  6 +
  7 + Example:
  8 + base line-height: 1.8 (18px)
  9 +
  10 + 1.8 / 7.2em = .25
  11 +
  12 + 2.1 lineheight
  13 +
  14 +*/
  15 +
  16 +body {
  17 + background: #fff top left repeat;
  18 + font-size: .625em; /* 62.5% of browser default (16px) is 10px */
  19 + font-family: Lucida Sans, Arial, Helvetica,sans-serif;
  20 +}
  21 +
  22 +h1, h2, h3, h4, h5, h6 {
  23 + font-family: Georgia, "Times New Roman", Times, serif;
  24 + font-weight: normal;
  25 +}
  26 +
  27 +p {
  28 + font-size: 1.4em;
  29 + line-height: 1.5;
  30 + margin: 0 1.5em 1.5em 0;
  31 +}
  32 +
  33 +h1 {
  34 + font-size: 4.2em;
  35 + line-height: 1;
  36 + margin: 0 .5em .5em 0;
  37 +}
  38 +
  39 +h2 {
  40 + font-size: 3.5em;
  41 + line-height: 1.2;
  42 + margin: 0 .6em .6em 0;
  43 +}
  44 +
  45 +h3 {
  46 + font-size: 2.8em;
  47 + line-height: .75em;
  48 + margin: 0 .75em .75em 0
  49 +}
  50 +
  51 +h3.center {
  52 + margin-right: 0;
  53 +}
  54 +
  55 +ul {
  56 + list-style-type: square;
  57 + margin: 0 1.5em 1.5em 1em;
  58 +}
  59 +
  60 +ul,
  61 +dl,
  62 +th,
  63 +td,
  64 +legend {
  65 + font-size: 1.4em;
  66 + line-height: 1.5;
  67 +}
  68 +
  69 +input {
  70 + vertical-align: middle;
  71 +}
  72 +
  73 +/* custom typography */
  74 +
  75 +h1 {
  76 + font-family: "Garamond", "Times New Roman", Times, serif;
  77 + text-shadow: 0 0 4px #000;
  78 +}
  79 +
  80 +h2 {
  81 + font-family: "Baskerville", "Garamond", "Times New Roman", Times, serif;
  82 +}
  83 +
  84 +h3 {
  85 + font-family: "Baskerville", "Garamond", "Times New Roman", Times, serif;
  86 + font-style: italic;
  87 +}
  88 +
  89 +#flash_notice, #flash_success, #flash_failure {
  90 + font-family: Georgia;
  91 + letter-spacing: .15em;
  92 + font-variant: small-caps;
  93 + text-transform: lowercase;
  94 +}
  95 +
  96 +#flash_success {
  97 + padding: .5em 0;
  98 + border-top: 1px dashed;
  99 + border-bottom: 1px dashed;
  100 +}
  101 +
  102 +#flash_notice {
  103 + padding: .5em 0;
  104 + border-top: 1px dashed;
  105 + border-bottom: 1px dashed;
  106 +}
  107 +
  108 +#flash_failure {
  109 + padding: .5em 0;
  110 + background: #200;
  111 + border-top: 1px dashed;
  112 + border-bottom: 1px dashed;
  113 +}
  114 +
  115 +#flash {
  116 + font-size: 2.4em;
  117 + width: 100%;
  118 +}
  119 +
  120 +p, li {
  121 + font-weight: lighter;
  122 + font-family: Gotham, Century Gothic, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
  123 +}
  124 +
  125 +a {
  126 + text-decoration: none;
  127 +}
  128 +
  129 +a:hover {
  130 + text-decoration: underline;
  131 +}
  132 +
  133 +p.date {
  134 + text-align: center;
  135 + text-transform: lowercase;
  136 + letter-spacing: .2em;
  137 + font-variant: small-caps;
  138 + font-family: Georgia, "Times New Roman", Times, serif;
  139 + font-size: 1.4em;
  140 +}
  141 +
  142 +p.date span {
  143 + padding: 0 .5em;
  144 +}
  145 +
... ...
public/stylesheets/screen.css
  Diff comments   View file @225e36a
... ... @@ -0,0 +1,5 @@
  1 +@import url("framework/reset.css");
  2 +@import url("framework/typography.css");
  3 +@import url("framework/layout.css");
  4 +@import url("framework/forms.css");
  5 +
... ...