Download as
Browse Code »

Commit 75ebbbce967d8bc1243649f0771e43e3e501780b

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

upgrading CSS framework

Showing 9 changed files with 281 additions and 190 deletions   Show diff stats
README.markdown
  Diff comments   View file @75ebbbc
... ... @@ -20,7 +20,7 @@ This will create a Rails 2.3.2 app with Heroku-recommended code:
20 20 * jQuery for Javascript
21 21 * Clearance for authentication
22 22 * Cucumber, Shoulda, Factory Girl, & Mocha for testing
23   -* Stylus for CSS framework
  23 +* Evergreen for CSS framework
24 24 * Coulda for features, model, controller, & helper generators
25 25  
26 26 Get the latest & greatest at anytime with:
... ...
public/stylesheets/framework/color.css
  Diff comments   View file @75ebbbc
  1 +/*
  2 + We use CSS color names by default for readability.
  3 + http://www.w3schools.com/css/css_colorsfull.asp
  4 +
  5 + It is expected the designer(s) will pick a scheme that may include hex colors.
  6 + http://colors.napcsweb.com/colorschemer
  7 +
  8 + We prefer off-white & off-black because computer screens
  9 + have high black/white contrast.
  10 +*/
  11 +
1 12 /* body */
2 13  
3 14 body {
4   - background-color: white; }
  15 + background-color: snow; }
5 16  
6 17 /* links */
7 18  
8 19 a {
9   - color: white; }
  20 + color: midgnightblue; }
10 21 a:visited {
11 22 color: dimgray; }
12   -a:hover {
13   - color: white;
14   - background-color: black; }
15 23  
16 24 /* flash */
17 25  
18 26 #flash_success {
19 27 background: seagreen; }
20 28 #flash_failure {
21   - background: tomato; }
  29 + color: beige;
  30 + background: firebrick; }
22 31  
23 32 /* errors */
24 33  
... ... @@ -29,7 +38,7 @@ a:hover {
29 38 background-color: snow; }
30 39 #errorExplanation h2 {
31 40 background-color: firebrick;
32   - color: white; }
  41 + color: floralwhite; }
33 42 #errorExplanation p {
34 43 color: darkgray; }
35 44  
... ...
public/stylesheets/framework/forms.css
View file @55c00dc
... ... @@ -1,90 +0,0 @@
1   -/* heavily inspired by Justin French's formtastic styles */
2   -
3   -/* fieldsets */
4   -
5   -fieldset.inputs, fieldset.buttons {
6   - margin: 1em 0; }
7   -
8   -/* labels */
9   -
10   -label {
11   - display: block;
12   - font-size: 1.4em; }
13   -
14   -/* instruction */
15   -
16   -fieldset p.instruction {
17   - font-size: 1em; }
18   -
19   -/* hidden field */
20   -
21   -fieldset div.hidden {
22   - display: none; }
23   -
24   -/* inputs */
25   -
26   -input {
27   - vertical-align: middle; }
28   -
29   -fieldset div.string,
30   -fieldset div.numeric,
31   -fieldset div.password {
32   - margin: 0 0 2em 0; }
33   -
34   -fieldset div.string input,
35   -fieldset div.numeric input,
36   -fieldset div.text textarea {
37   - padding: 0.4em; }
38   -
39   -fieldset div.password input {
40   - font-weight: bold; }
41   -
42   -fieldset div.boolean label,
43   -fieldset div.boolean input {
44   - display: inline; }
45   -
46   -fieldset div.boolean label {
47   - margin: 0 0.5em 0 0.2em; }
48   -
49   -/* radio buttons and check boxes */
50   -
51   -fieldset div.radios fieldset ol,
52   -fieldset div.checks fieldset ol, {
53   - margin-bottom: -0.6em; }
54   -fieldset div.radios fieldset ol li,
55   -fieldset div.checks fieldset ol li, {
56   - margin: 0.1em 0 0.5em 0; }
57   -fieldset div.radios fieldset ol li label,
58   -fieldset div.checks fieldset ol li label {
59   - float: none; }
60   -fieldset div.radios fieldset ol li label input,
61   -fieldset div.checks fieldset ol li label input, {
62   - margin-right: 0.2em; }
63   -
64   -/* dates, times, and datetimes */
65   -
66   -fieldset div.date fieldset ol li,
67   -fieldset div.time fieldset ol li,
68   -fieldset div.datetime fieldset ol li {
69   - float: left;
70   - width: auto;
71   - margin: 0 .3em 0 0; }
72   -
73   -fieldset div.date fieldset ol li label,
74   -fieldset div.time fieldset ol li label,
75   -fieldset div.datetime fieldset ol li label {
76   - display: none; }
77   -
78   -fieldset div.date fieldset ol li label input,
79   -fieldset div.time fieldset ol li label input,
80   -fieldset div.datetime fieldset ol li label input {
81   - display: inline;
82   - margin: 0;
83   - padding: 0; }
84   -
85   -/* buttons */
86   -
87   -fieldset.buttons input {
88   - font-size: 1.2em;
89   - padding: 1em; }
90   -
public/stylesheets/framework/grid.css 0 → 100644
  Diff comments   View file @75ebbbc
... ... @@ -0,0 +1,46 @@
  1 +/*
  2 + grid
  3 +
  4 + Every column can be divided into two, three, four and five parts.
  5 + Idea from http://code.google.com/p/malo
  6 +*/
  7 +
  8 +.main {
  9 + margin: 0 auto;
  10 + width: 96em; }
  11 +
  12 +.grid {
  13 + float: left;
  14 + display: inline;
  15 + *margin-left: -0.04em; } /* IE margin hack */
  16 +
  17 +.grid .whole {
  18 + width: 100%; }
  19 +
  20 +.grid .one_fifth {
  21 + width: 20% }
  22 +
  23 +.grid .one_fourth {
  24 + width: 25%; }
  25 +
  26 +.grid .one_third {
  27 + width: 33.33% }
  28 +
  29 +.grid .two_fifths {
  30 + width: 40%; }
  31 +
  32 +.grid .one_half {
  33 + width: 50%; }
  34 +
  35 +.grid .three_fifths {
  36 + width: 60% }
  37 +
  38 +.grid .two_thirds {
  39 + width: 66.66%; }
  40 +
  41 +.grid .three_quarters {
  42 + width: 75%; }
  43 +
  44 +.grid .four_fifths {
  45 + width: 80%; }
  46 +
... ...
public/stylesheets/framework/layout.css
View file @55c00dc
... ... @@ -1,39 +0,0 @@
1   -.clearfix:after {
2   - content: ".";
3   - display: block;
4   - height: 0;
5   - clear: both;
6   - visibility: hidden; }
7   -* html .clearfix {
8   - height: 1%; }
9   -*:first-child+html .clearfix {
10   - min-height: 1px; }
11   -
12   -.half,
13   -.quarter,
14   -.three_quarters {
15   - display: inline-block;
16   - vertical-align: top; }
17   -
18   -.middle {
19   - margin: 0 auto; }
20   -
21   -.center {
22   - text-align: center; }
23   -
24   -/* grid 960 { 480 240 120 60 30 15 5 } */
25   -
26   -/*.grid_960 */
27   -.grid_960 .row {
28   - width: 96em;
29   - margin: 0 auto; }
30   -
31   -.grid_960 .half {
32   - width: 48em; }
33   -
34   -.grid_960 .quarter {
35   - width: 24em; }
36   -
37   -.grid_960 .three_quarters {
38   - width: 72em; }
39   -
public/stylesheets/framework/reset.css
  Diff comments   View file @75ebbbc
1   -/* global defaults from http://meyerweb.com/tools/css/reset */
  1 +/* http://meyerweb.com/eric/tools/css/reset */
2 2  
3 3 html, body, div, span, applet, object, iframe,
4 4 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
... ... @@ -25,7 +25,6 @@ ol, ul {
25 25  
26 26 blockquote, q {
27 27 quotes: none; }
28   -
29 28 blockquote:before, blockquote:after,
30 29 q:before, q:after {
31 30 content: '';
... ...
public/stylesheets/framework/spacing.css 0 → 100644
  Diff comments   View file @75ebbbc
... ... @@ -0,0 +1,97 @@
  1 +p {
  2 + padding: 0.4em 0; }
  3 +
  4 +/* flashes & errors */
  5 +
  6 +#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li {
  7 + padding: 0.6em; }
  8 +
  9 +/* fieldsets */
  10 +
  11 +fieldset.inputs, fieldset.buttons {
  12 + margin: 1em 0; }
  13 +
  14 +/* labels */
  15 +
  16 +label {
  17 + display: block;
  18 + font-size: 1.4em; }
  19 +
  20 +/* hidden field */
  21 +
  22 +fieldset div.hidden {
  23 + display: none; }
  24 +
  25 +/* inputs */
  26 +
  27 +input {
  28 + vertical-align: middle; }
  29 +
  30 +fieldset div.string,
  31 +fieldset div.numeric,
  32 +fieldset div.password,
  33 +fieldset div.text,
  34 +fieldset div.boolean {
  35 + margin: 0 0 1em 0; }
  36 +
  37 +fieldset div.string label,
  38 +fieldset div.numeric label,
  39 +fieldset div.password label,
  40 +fieldset div.text label {
  41 + padding: 0.2em 0; }
  42 +
  43 +fieldset div.string input,
  44 +fieldset div.numeric input,
  45 +fieldset div.password input,
  46 +fieldset div.text textarea {
  47 + padding: 0.4em; }
  48 +
  49 +fieldset div.boolean label {
  50 + display: inline;
  51 + margin: 0.2em; }
  52 +
  53 +fieldset div.boolean input {
  54 + margin: 0;
  55 + vertical-align: top; }
  56 +
  57 +/* radio buttons and check boxes */
  58 +
  59 +fieldset div.radios fieldset ol,
  60 +fieldset div.checks fieldset ol, {
  61 + margin-bottom: -0.6em; }
  62 +fieldset div.radios fieldset ol li,
  63 +fieldset div.checks fieldset ol li, {
  64 + margin: 0.1em 0 0.5em 0; }
  65 +fieldset div.radios fieldset ol li label,
  66 +fieldset div.checks fieldset ol li label {
  67 + float: none; }
  68 +fieldset div.radios fieldset ol li label input,
  69 +fieldset div.checks fieldset ol li label input, {
  70 + margin-right: 0.2em; }
  71 +
  72 +/* dates, times, and datetimes */
  73 +
  74 +fieldset div.date fieldset ol li,
  75 +fieldset div.time fieldset ol li,
  76 +fieldset div.datetime fieldset ol li {
  77 + float: left;
  78 + width: auto;
  79 + margin: 0 .3em 0 0; }
  80 +
  81 +fieldset div.date fieldset ol li label,
  82 +fieldset div.time fieldset ol li label,
  83 +fieldset div.datetime fieldset ol li label {
  84 + display: none; }
  85 +
  86 +fieldset div.date fieldset ol li label input,
  87 +fieldset div.time fieldset ol li label input,
  88 +fieldset div.datetime fieldset ol li label input {
  89 + display: inline;
  90 + margin: 0;
  91 + padding: 0; }
  92 +
  93 +/* buttons */
  94 +
  95 +fieldset.buttons input {
  96 + padding: 1em; }
  97 +
... ...
public/stylesheets/framework/typography.css
  Diff comments   View file @75ebbbc
1 1 /*
2   - Formula:
3   - base line-height / font-size = element line-height
  2 + scale
4 3  
5   - Example:
6   - base line-height: 1.8 (18px)
  4 + Use the classic typographer's scale:
  5 + 6,7,8,9,10,11,12,14,16,18,21,24,36,48,60,72
7 6  
8   - 1.8 / 7.2em = .25
  7 + We use ems for font size.
9 8  
10   - 2.1 lineheight
  9 + Our typographical math is made easier by Richard Rutter's 62.5% trick:
  10 + http://www.clagnut.com/blog/348/
  11 +
  12 + 16 pixels is 1.6em. 18 pixels is 1.8em. 9 pixels is 0.9em.
  13 +
  14 + Inheritance slightly complicates the math, but there's a simple formula:
  15 +
  16 + child pixels / parent pixels = child ems
11 17 */
12 18  
13 19 body {
14   - background-position: top left;
15   - font-size: .625em; /* 62.5% of browser default (16px) is 10px */
16   - font-family: Lucida Sans, Arial, Helvetica,sans-serif; }
  20 + font-size: .625em; }
  21 +
  22 +h1 {
  23 + font-size: 4.8em; }
  24 +
  25 +h2 {
  26 + font-size: 3.6em; }
  27 +
  28 +h3 {
  29 + font-size: 2.4em; }
  30 +
  31 +h4 {
  32 + font-size: 2.1em; }
  33 +
  34 +h5 {
  35 + font-size: 1.8em; }
  36 +
  37 +h6 {
  38 + font-size: 1.6em; }
  39 +
  40 +#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li {
  41 + font-size: 1.6em; }
  42 +
  43 +p, ul, dl, th, td, legend {
  44 + font-size: 1.4em; }
  45 +
  46 +fieldset.buttons input {
  47 + font-size: 1.2em; }
  48 +
  49 +fieldset p.instruction {
  50 + font-size: 1em; }
  51 +
  52 +/* typeface */
  53 +
  54 +body {
  55 + font-family: Verdana, "Lucida Grande", Lucida, Arial, sans-serif; }
  56 +
  57 +h1, h2, h3, h4, h5, h6 {
  58 + font-family: Georgia, "Times New Roman", Times, serif; }
  59 +
  60 +pre, code {
  61 + font-family: Monaco, "DejaVu Sans", Courier, "Courier New", monospace; }
  62 +
  63 +/* weighting */
17 64  
18 65 h1, h2, h3, h4, h5, h6 {
19   - font-family: Georgia, "Times New Roman", Times, serif;
20 66 font-weight: normal; }
21 67  
22   -p {
23   - font-size: 1.4em;
24   - line-height: 1.5;
25   - margin: 0 1.5em 1.5em 0; }
  68 +p, ul, li, dl, th, td, legend {
  69 + font-weight: lighter; }
  70 +
  71 +#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li {
  72 + font-weight: bold; }
  73 +
  74 +/*
  75 + leading
  76 +
  77 + d. The space between lines of type.
  78 +
  79 + Blocks of text usually need positive leading.
  80 + Headers usually need less leading.
  81 +
  82 + Darker faces usually need more lead than lighter ones.
  83 + Sans serif type usually needs more lead then serif type.
  84 +
  85 + Leading is set with line-height.
  86 + line-height can be (and should be) set with a unit-less integer.
  87 + We use the unit-less integer to ensure line-height scales with text.
  88 +*/
26 89  
27 90 h1 {
28   - font-size: 4.2em;
29   - line-height: 1;
30   - margin: 0 .5em .5em 0; }
  91 + line-height: 1.0; }
31 92  
32 93 h2 {
33   - font-size: 3.5em;
34   - line-height: 1.2;
35   - margin: 0 .6em .6em 0; }
  94 + line-height: 1.2; }
36 95  
37 96 h3 {
38   - font-size: 2.8em;
39   - line-height: .75em;
40   - margin: 0 .75em .75em 0 }
  97 + line-height: 1.4; }
  98 +
  99 +h4 {
  100 + line-height: 1.6; }
  101 +
  102 +h5 {
  103 + line-height: 1.6; }
  104 +
  105 +h6, p {
  106 + line-height: 1.8; }
  107 +
  108 +ul, dl, th, td, legend {
  109 + line-height: 1.6; }
  110 +
  111 +/* justification */
  112 +
  113 +body {
  114 + text-align: left; }
  115 +
  116 +/* decoration */
41 117  
42 118 ul {
43   - list-style-type: square;
44   - margin: 0 1.5em 1.5em 1em; }
45   -
46   -ul,
47   -dl,
48   -th,
49   -td,
50   -legend {
51   - font-size: 1.4em;
52   - line-height: 1.5; }
53   -
54   -#flash_notice, #flash_success, #flash_failure {
55   - letter-spacing: .15em;
56   - padding: .5em 0;
57   - border-top: 1px dashed;
58   - border-bottom: 1px dashed; }
59   -
60   -#flash {
61   - font-size: 2.4em;
62   - width: 100%; }
63   -
64   -p, li {
65   - font-weight: lighter;
66   - font-family: Gotham, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; }
67   -
68   -a {
  119 + list-style-position: outside;
  120 + list-style-type: square; }
  121 +
  122 +a, a:visited, a:link {
69 123 text-decoration: none; }
70 124  
71 125 a:hover {
72 126 text-decoration: underline; }
73 127  
  128 +th {
  129 + text-transform: uppercase; }
  130 +
  131 +fieldset div.password input {
  132 + font-weight: bold; }
  133 +
  134 +/*
  135 + the measure
  136 +
  137 + d. The length of a single line of text.
  138 +
  139 + We use ems to set the width of blocks of text.
  140 + Typically, between 30 and 50 ems is recommended for optimal readibility.
  141 +*/
  142 +
... ...
public/stylesheets/screen.css
  Diff comments   View file @75ebbbc
1 1 @import url("framework/reset.css");
2 2 @import url("framework/typography.css");
3   -@import url("framework/layout.css");
4   -@import url("framework/forms.css");
5 3 @import url("framework/color.css");
  4 +@import url("framework/grid.css");
  5 +@import url("framework/spacing.css");
6 6  
... ...