From 75ebbbce967d8bc1243649f0771e43e3e501780b Mon Sep 17 00:00:00 2001
From: Dan Croak <dcroak@thoughtbot.com>
Date: Mon, 6 Jul 2009 01:54:30 -0400
Subject: [PATCH] upgrading CSS framework

---
 README.markdown                             |   2 +-
 public/stylesheets/framework/color.css      |  23 ++++++++++++++++-------
 public/stylesheets/framework/forms.css      |  90 ------------------------------------------------------------------------------------------
 public/stylesheets/framework/grid.css       |  46 ++++++++++++++++++++++++++++++++++++++++++++++
 public/stylesheets/framework/layout.css     |  39 ---------------------------------------
 public/stylesheets/framework/reset.css      |   3 +--
 public/stylesheets/framework/spacing.css    |  97 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 public/stylesheets/framework/typography.css | 167 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------
 public/stylesheets/screen.css               |   4 ++--
 9 files changed, 281 insertions(+), 190 deletions(-)
 delete mode 100644 public/stylesheets/framework/forms.css
 create mode 100644 public/stylesheets/framework/grid.css
 delete mode 100644 public/stylesheets/framework/layout.css
 create mode 100644 public/stylesheets/framework/spacing.css

diff --git a/README.markdown b/README.markdown
index 563fc54..ce53d31 100644
--- a/README.markdown
+++ b/README.markdown
@@ -20,7 +20,7 @@ This will create a Rails 2.3.2 app with Heroku-recommended code:
 * jQuery for Javascript
 * Clearance for authentication
 * Cucumber, Shoulda, Factory Girl, & Mocha for testing
-* Stylus for CSS framework
+* Evergreen for CSS framework
 * Coulda for features, model, controller, & helper generators
 
 Get the latest & greatest at anytime with:
diff --git a/public/stylesheets/framework/color.css b/public/stylesheets/framework/color.css
index 8ea9f09..7df9350 100644
--- a/public/stylesheets/framework/color.css
+++ b/public/stylesheets/framework/color.css
@@ -1,24 +1,33 @@
+/*
+  We use CSS color names by default for readability.
+  http://www.w3schools.com/css/css_colorsfull.asp
+
+  It is expected the designer(s) will pick a scheme that may include hex colors.
+  http://colors.napcsweb.com/colorschemer
+
+  We prefer off-white & off-black because computer screens
+  have high black/white contrast.
+*/
+
 /* body */
 
 body {
-  background-color: white; }
+  background-color: snow; }
 
 /* links */
 
 a {
-  color: white; }
+  color: midgnightblue; }
 a:visited {
   color: dimgray; }
-a:hover {
-  color: white;
-  background-color: black; }
 
 /* flash */
 
 #flash_success {
   background: seagreen; }
 #flash_failure {
-  background: tomato; }
+  color: beige;
+  background: firebrick; }
 
 /* errors */
 
@@ -29,7 +38,7 @@ a:hover {
   background-color: snow; }
 #errorExplanation h2 {
   background-color: firebrick;
-  color: white; }
+  color: floralwhite; }
 #errorExplanation p {
   color: darkgray; }
 
diff --git a/public/stylesheets/framework/forms.css b/public/stylesheets/framework/forms.css
deleted file mode 100644
index b552554..0000000
--- a/public/stylesheets/framework/forms.css
+++ /dev/null
@@ -1,90 +0,0 @@
-/* heavily inspired by Justin French's formtastic styles */
-
-/* fieldsets */
-
-fieldset.inputs, fieldset.buttons {
-  margin: 1em 0; }
-
-/* labels */
-
-label {
-  display: block;
-  font-size: 1.4em; }
-
-/* instruction */
-
-fieldset p.instruction {
-  font-size: 1em; }
-
-/* hidden field */
-
-fieldset div.hidden {
-  display: none; }
-
-/* inputs */
-
-input {
-  vertical-align: middle; }
-
-fieldset div.string,
-fieldset div.numeric,
-fieldset div.password {
-  margin: 0 0 2em 0; }
-
-fieldset div.string input,
-fieldset div.numeric input,
-fieldset div.text textarea {
-  padding: 0.4em; }
-
-fieldset div.password input {
-  font-weight: bold; }
-
-fieldset div.boolean label,
-fieldset div.boolean input {
-  display: inline; }
-
-fieldset div.boolean label {
-  margin: 0 0.5em 0 0.2em; }
-
-/* radio buttons and check boxes */
-
-fieldset div.radios fieldset ol,
-fieldset div.checks fieldset ol, {
-  margin-bottom: -0.6em; }
-fieldset div.radios fieldset ol li,
-fieldset div.checks fieldset ol li, {
-  margin: 0.1em 0 0.5em 0; }
-fieldset div.radios fieldset ol li label,
-fieldset div.checks fieldset ol li label {
-  float: none; }
-fieldset div.radios fieldset ol li label input,
-fieldset div.checks fieldset ol li label input, {
-  margin-right: 0.2em; }
-
-/* dates, times, and datetimes */
-
-fieldset div.date fieldset ol li,
-fieldset div.time fieldset ol li,
-fieldset div.datetime fieldset ol li {
-  float: left;
-  width: auto;
-  margin: 0 .3em 0 0; }
-
-fieldset div.date fieldset ol li label,
-fieldset div.time fieldset ol li label,
-fieldset div.datetime fieldset ol li label {
-  display: none; }
-
-fieldset div.date fieldset ol li label input, 
-fieldset div.time fieldset ol li label input, 
-fieldset div.datetime fieldset ol li label input {
-  display: inline;
-  margin: 0;
-  padding: 0; }
-
-/* buttons */
-
-fieldset.buttons input {
-  font-size: 1.2em;
-  padding: 1em; }
-
diff --git a/public/stylesheets/framework/grid.css b/public/stylesheets/framework/grid.css
new file mode 100644
index 0000000..0c6eb33
--- /dev/null
+++ b/public/stylesheets/framework/grid.css
@@ -0,0 +1,46 @@
+/*
+  grid
+
+  Every column can be divided into two, three, four and five parts.
+  Idea from http://code.google.com/p/malo
+*/
+
+.main {
+  margin: 0 auto;
+  width: 96em; }
+
+.grid {
+  float: left;
+  display: inline;
+  *margin-left: -0.04em; } /* IE margin hack */
+
+.grid .whole {
+  width: 100%; }
+
+.grid .one_fifth {
+  width: 20% }
+
+.grid .one_fourth {
+  width: 25%; }
+
+.grid .one_third {
+  width: 33.33% }
+
+.grid .two_fifths {
+  width: 40%; }
+
+.grid .one_half {
+  width: 50%; }
+
+.grid .three_fifths {
+  width: 60% }
+
+.grid .two_thirds {
+  width: 66.66%; }
+
+.grid .three_quarters {
+  width: 75%; }
+
+.grid .four_fifths {
+  width: 80%; }
+
diff --git a/public/stylesheets/framework/layout.css b/public/stylesheets/framework/layout.css
deleted file mode 100644
index bfe129f..0000000
--- a/public/stylesheets/framework/layout.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.clearfix:after {
-  content: ".";
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden; }
-* html .clearfix {
-  height: 1%; }
-*:first-child+html .clearfix {
-  min-height: 1px; }
-
-.half,
-.quarter,
-.three_quarters {
-  display: inline-block;
-  vertical-align: top; }
-
-.middle {
-  margin: 0 auto; }
-
-.center {
-  text-align: center; }
-
-/* grid 960 { 480 240 120 60 30 15 5 } */
-
-/*.grid_960 */
-.grid_960 .row {
-  width: 96em;
-  margin: 0 auto; }
-
-.grid_960 .half {
-  width: 48em; }
-
-.grid_960 .quarter {
-  width: 24em; }
-
-.grid_960 .three_quarters {
-  width: 72em; }
-
diff --git a/public/stylesheets/framework/reset.css b/public/stylesheets/framework/reset.css
index 5f9a26b..73b05d0 100644
--- a/public/stylesheets/framework/reset.css
+++ b/public/stylesheets/framework/reset.css
@@ -1,4 +1,4 @@
-/* global defaults from http://meyerweb.com/tools/css/reset */
+/* http://meyerweb.com/eric/tools/css/reset */
 
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
@@ -25,7 +25,6 @@ ol, ul {
 
 blockquote, q {
   quotes: none; }
-
 blockquote:before, blockquote:after,
 q:before, q:after {
   content: '';
diff --git a/public/stylesheets/framework/spacing.css b/public/stylesheets/framework/spacing.css
new file mode 100644
index 0000000..0db81da
--- /dev/null
+++ b/public/stylesheets/framework/spacing.css
@@ -0,0 +1,97 @@
+p {
+  padding: 0.4em 0; }
+
+/* flashes & errors */
+
+#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li {
+  padding: 0.6em; }
+
+/* fieldsets */
+
+fieldset.inputs, fieldset.buttons {
+  margin: 1em 0; }
+
+/* labels */
+
+label {
+  display: block;
+  font-size: 1.4em; }
+
+/* hidden field */
+
+fieldset div.hidden {
+  display: none; }
+
+/* inputs */
+
+input {
+  vertical-align: middle; }
+
+fieldset div.string,
+fieldset div.numeric,
+fieldset div.password,
+fieldset div.text,
+fieldset div.boolean {
+  margin: 0 0 1em 0; }
+
+fieldset div.string label,
+fieldset div.numeric label,
+fieldset div.password label,
+fieldset div.text label {
+  padding: 0.2em 0; }
+
+fieldset div.string input,
+fieldset div.numeric input,
+fieldset div.password input,
+fieldset div.text textarea {
+  padding: 0.4em; }
+
+fieldset div.boolean label {
+  display: inline;
+  margin: 0.2em; }
+
+fieldset div.boolean input {
+  margin: 0;
+  vertical-align: top; }
+
+/* radio buttons and check boxes */
+
+fieldset div.radios fieldset ol,
+fieldset div.checks fieldset ol, {
+  margin-bottom: -0.6em; }
+fieldset div.radios fieldset ol li,
+fieldset div.checks fieldset ol li, {
+  margin: 0.1em 0 0.5em 0; }
+fieldset div.radios fieldset ol li label,
+fieldset div.checks fieldset ol li label {
+  float: none; }
+fieldset div.radios fieldset ol li label input,
+fieldset div.checks fieldset ol li label input, {
+  margin-right: 0.2em; }
+
+/* dates, times, and datetimes */
+
+fieldset div.date fieldset ol li,
+fieldset div.time fieldset ol li,
+fieldset div.datetime fieldset ol li {
+  float: left;
+  width: auto;
+  margin: 0 .3em 0 0; }
+
+fieldset div.date fieldset ol li label,
+fieldset div.time fieldset ol li label,
+fieldset div.datetime fieldset ol li label {
+  display: none; }
+
+fieldset div.date fieldset ol li label input, 
+fieldset div.time fieldset ol li label input, 
+fieldset div.datetime fieldset ol li label input {
+  display: inline;
+  margin: 0;
+  padding: 0; }
+
+/* buttons */
+
+fieldset.buttons input {
+  padding: 1em; }
+
diff --git a/public/stylesheets/framework/typography.css b/public/stylesheets/framework/typography.css
index 634a0a6..50894bb 100644
--- a/public/stylesheets/framework/typography.css
+++ b/public/stylesheets/framework/typography.css
@@ -1,73 +1,142 @@
 /*
-  Formula:
-  base line-height / font-size = element line-height
+  scale
 
-  Example:
-  base line-height: 1.8 (18px)
+  Use the classic typographer's scale:
+  6,7,8,9,10,11,12,14,16,18,21,24,36,48,60,72
 
-  1.8 / 7.2em = .25
+  We use ems for font size.
 
-  2.1 lineheight
+  Our typographical math is made easier by Richard Rutter's 62.5% trick:
+  http://www.clagnut.com/blog/348/
+
+  16 pixels is 1.6em. 18 pixels is 1.8em. 9 pixels is 0.9em.
+
+  Inheritance slightly complicates the math, but there's a simple formula:
+
+  child pixels / parent pixels = child ems
 */
 
 body {
-  background-position: top left;
-  font-size: .625em; /* 62.5% of browser default (16px) is 10px */
-  font-family: Lucida Sans, Arial, Helvetica,sans-serif; }
+  font-size: .625em; }
+
+h1 {
+  font-size: 4.8em; }
+
+h2 {
+  font-size: 3.6em; }
+
+h3 {
+  font-size: 2.4em; }
+
+h4 {
+  font-size: 2.1em; }
+
+h5 {
+  font-size: 1.8em; }
+
+h6 {
+  font-size: 1.6em; }
+
+#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li {
+  font-size: 1.6em; }
+
+p, ul, dl, th, td, legend {
+  font-size: 1.4em; }
+
+fieldset.buttons input {
+  font-size: 1.2em; }
+
+fieldset p.instruction {
+  font-size: 1em; }
+
+/* typeface */
+
+body {
+  font-family: Verdana, "Lucida Grande", Lucida, Arial, sans-serif; }
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Georgia, "Times New Roman", Times, serif; }
+
+pre, code {
+  font-family: Monaco, "DejaVu Sans", Courier, "Courier New", monospace; }
+
+/* weighting */
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: Georgia, "Times New Roman", Times, serif;
   font-weight: normal; }
 
-p {
-  font-size: 1.4em;
-  line-height: 1.5;
-  margin: 0 1.5em 1.5em 0; }
+p, ul, li, dl, th, td, legend {
+  font-weight: lighter; }
+
+#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li {
+  font-weight: bold; }
+
+/*
+  leading
+
+  d. The space between lines of type.
+
+  Blocks of text usually need positive leading.
+  Headers usually need less leading.
+
+  Darker faces usually need more lead than lighter ones.
+  Sans serif type usually needs more lead then serif type.
+
+  Leading is set with line-height.
+  line-height can be (and should be) set with a unit-less integer.
+  We use the unit-less integer to ensure line-height scales with text.
+*/
 
 h1 {
-  font-size: 4.2em;
-  line-height: 1;
-  margin: 0 .5em .5em 0; }
+  line-height: 1.0; }
 
 h2 {
-  font-size: 3.5em;
-  line-height: 1.2;
-  margin: 0 .6em .6em 0; }
+  line-height: 1.2; }
 
 h3 {
-  font-size: 2.8em;
-  line-height: .75em;
-  margin: 0 .75em .75em 0 }
+  line-height: 1.4; }
+
+h4 {
+  line-height: 1.6; }
+
+h5 {
+  line-height: 1.6; }
+
+h6, p {
+  line-height: 1.8; }
+
+ul, dl, th, td, legend {
+  line-height: 1.6; }
+
+/* justification */
+
+body {
+  text-align: left; }
+
+/* decoration */
 
 ul {
-  list-style-type: square;
-  margin: 0 1.5em 1.5em 1em; }
-
-ul,
-dl,
-th,
-td,
-legend {
-  font-size: 1.4em;
-  line-height: 1.5; }
-
-#flash_notice, #flash_success, #flash_failure {
-  letter-spacing: .15em;
-  padding: .5em 0;
-  border-top: 1px dashed;
-  border-bottom: 1px dashed; }
-
-#flash {
-  font-size: 2.4em;
-  width: 100%; }
-
-p, li {
-  font-weight: lighter;
-  font-family: Gotham, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; }
-
-a {
+  list-style-position: outside;
+  list-style-type: square; }
+
+a, a:visited, a:link {
   text-decoration: none; }
 
 a:hover {
   text-decoration: underline; }
 
+th {
+  text-transform: uppercase; }
+
+fieldset div.password input {
+  font-weight: bold; }
+
+/*
+  the measure
+
+  d. The length of a single line of text.
+
+  We use ems to set the width of blocks of text.
+  Typically, between 30 and 50 ems is recommended for optimal readibility.
+*/
+
diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
index e32f588..466d441 100644
--- a/public/stylesheets/screen.css
+++ b/public/stylesheets/screen.css
@@ -1,6 +1,6 @@
 @import url("framework/reset.css");
 @import url("framework/typography.css");
-@import url("framework/layout.css");
-@import url("framework/forms.css");
 @import url("framework/color.css");
+@import url("framework/grid.css");
+@import url("framework/spacing.css");
 
--
libgit2 0.21.2