From 75ebbbce967d8bc1243649f0771e43e3e501780b Mon Sep 17 00:00:00 2001 From: Dan Croak 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