From b37250fb5c21615054fc2c7df13da646222c6b1b Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 7 Apr 2011 13:53:18 -0400 Subject: [PATCH 01/15] Added constant FONT_SIZE defaults to blueprint standard of 12 --- lib/blueprint/blueprint.rb | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/blueprint/blueprint.rb b/lib/blueprint/blueprint.rb index 55f42746..48a9a4f8 100644 --- a/lib/blueprint/blueprint.rb +++ b/lib/blueprint/blueprint.rb @@ -32,6 +32,7 @@ module Blueprint INPUT_PADDING = 5 INPUT_BORDER = 1 + FONT_SIZE = 12 end Dir["#{File.join(Blueprint::LIB_PATH)}/*"].each do |file| From af17fc025598a1f5ff7e5eab915e4fef55b57500 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 7 Apr 2011 13:55:07 -0400 Subject: [PATCH 02/15] Added symbol :font_size If compressor.rb sees custom layout and the css_source_file is typography.css it runs: custom_layout.generate_typography_css Modified the compressor output --- lib/blueprint/compressor.rb | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/blueprint/compressor.rb b/lib/blueprint/compressor.rb index 150a3cc1..b4f86c7d 100644 --- a/lib/blueprint/compressor.rb +++ b/lib/blueprint/compressor.rb @@ -98,7 +98,8 @@ def initialize_project_from_yaml(project_name = nil) :column_width => layout["column_width"], :gutter_width => layout["gutter_width"], :input_padding => layout["input_padding"], - :input_border => layout["input_border"]) + :input_border => layout["input_border"], + :font_size => layout["font_size"]) end @loaded_from_settings = true end @@ -120,6 +121,8 @@ def generate_css_files source_options = if self.custom_layout && css_source_file == "grid.css" self.custom_layout.generate_grid_css + elsif self.custom_layout && css_source_file == "typography.css" + self.custom_layout.generate_typography_css else File.path_to_string File.join(Blueprint::SOURCE_PATH, css_source_file) end @@ -145,6 +148,7 @@ def generate_css_files #attempt to generate a grid.png file if (grid_builder = GridBuilder.new(:column_width => self.custom_layout.column_width, :gutter_width => self.custom_layout.gutter_width, + :font_size => self.custom_layout.font_size, :output_path => File.join(self.destination_path, "src"))) grid_builder.generate! end @@ -254,6 +258,7 @@ def output_header puts " ** - Column Width: #{self.custom_layout.column_width}px" puts " ** - Gutter Width: #{self.custom_layout.gutter_width}px" puts " ** - Total Width : #{self.custom_layout.page_width}px" + puts " ** - Font Size : #{self.custom_layout.font_size}px" puts " **" puts " #{"*" * 100}" end From 64b6d3e5bc814c5ad81ab4b870007514d065c974 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 7 Apr 2011 13:56:11 -0400 Subject: [PATCH 03/15] Added attr_writer :font_size define font_size to return as a float or Blueprint default (12) defined generate_typography_css using the same syntax as generate_grid_css --- lib/blueprint/custom_layout.rb | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/lib/blueprint/custom_layout.rb b/lib/blueprint/custom_layout.rb index ccef91d3..94cb14e8 100644 --- a/lib/blueprint/custom_layout.rb +++ b/lib/blueprint/custom_layout.rb @@ -4,9 +4,10 @@ module Blueprint class CustomLayout # path to ERB file used for CSS template CSS_ERB_FILE = File.join(Blueprint::LIB_PATH, 'grid.css.erb') + CSS_TYPOGRAPHY_ERB_FILE = File.join(Blueprint::LIB_PATH, 'typography.css.erb') attr_writer :column_count, :column_width, :gutter_width, :input_padding, - :input_border + :input_border, :font_size # Column count of generated CSS. Returns itself or Blueprint's default def column_count @@ -35,6 +36,10 @@ def input_border def page_width column_count * (column_width + gutter_width) - gutter_width end + + def font_size + (@font_size || Blueprint::FONT_SIZE).to_f + end # ==== Options # * options @@ -49,6 +54,7 @@ def initialize(options = {}) @gutter_width = options[:gutter_width] @input_padding = options[:input_padding] @input_border = options[:input_border] + @font_size = options[:font_size] end # Boolean value if current settings are Blueprint's defaults @@ -57,7 +63,8 @@ def default? self.column_count == Blueprint::COLUMN_COUNT && self.gutter_width == Blueprint::GUTTER_WIDTH && self.input_padding == Blueprint::INPUT_PADDING && - self.input_border == Blueprint::INPUT_BORDER + self.input_border == Blueprint::INPUT_BORDER && + self.font_size == Blueprint::FONT_SIZE end # Loads grid.css.erb file, binds it to current instance, and returns output @@ -68,5 +75,10 @@ def generate_grid_css # bind it to this instance css.result(binding) end + + def generate_typography_css + css = ERB::new(File.path_to_string(CustomLayout::CSS_TYPOGRAPHY_ERB_FILE)) + css.result(binding) + end end end From 491160595ad2d84976c415aae8c2c7f31ff4fbd0 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 7 Apr 2011 13:57:13 -0400 Subject: [PATCH 04/15] Initial commit, erb file of typography Only change is to set the (font_size / 16) * 100 12 / 16 * 100 = 75 --- lib/blueprint/typography.css.erb | 123 +++++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 lib/blueprint/typography.css.erb diff --git a/lib/blueprint/typography.css.erb b/lib/blueprint/typography.css.erb new file mode 100644 index 00000000..6ed1d574 --- /dev/null +++ b/lib/blueprint/typography.css.erb @@ -0,0 +1,123 @@ +/* -------------------------------------------------------------- + + typography.css + * Sets up some sensible default typography. + +-------------------------------------------------------------- */ + +/* Default font settings. + The font-size percentage is of 16px. (0.75 * 16px = 12px) */ +html { font-size:100.01%; } +body { + font-size: <%= ((font_size / 16) * 100).round(2) %>%; + color: #222; + background: #fff; + font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; +} + + +/* Headings +-------------------------------------------------------------- */ + +h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; } + +h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } +h2 { font-size: 2em; margin-bottom: 0.75em; } +h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; } +h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; } +h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } +h6 { font-size: 1em; font-weight: bold; } + +h1 img, h2 img, h3 img, +h4 img, h5 img, h6 img { + margin: 0; +} + + +/* Text elements +-------------------------------------------------------------- */ + +p { margin: 0 0 1.5em; } +/* + These can be used to pull an image at the start of a paragraph, so + that the text flows around it (usage:

Text

) + */ +.left { float: left !important; } +p .left { margin: 1.5em 1.5em 1.5em 0; padding: 0; } +.right { float: right !important; } +p .right { margin: 1.5em 0 1.5em 1.5em; padding: 0; } + +a:focus, +a:hover { color: #09f; } +a { color: #06c; text-decoration: underline; } + +blockquote { margin: 1.5em; color: #666; font-style: italic; } +strong,dfn { font-weight: bold; } +em,dfn { font-style: italic; } +sup, sub { line-height: 0; } + +abbr, +acronym { border-bottom: 1px dotted #666; } +address { margin: 0 0 1.5em; font-style: italic; } +del { color:#666; } + +pre { margin: 1.5em 0; white-space: pre; } +pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } + + +/* Lists +-------------------------------------------------------------- */ + +li ul, +li ol { margin: 0; } +ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; } + +ul { list-style-type: disc; } +ol { list-style-type: decimal; } + +dl { margin: 0 0 1.5em 0; } +dl dt { font-weight: bold; } +dd { margin-left: 1.5em;} + + +/* Tables +-------------------------------------------------------------- */ + +/* + Because of the need for padding on TH and TD, the vertical rhythm + on table cells has to be 27px, instead of the standard 18px or 36px + of other elements. + */ +table { margin-bottom: 1.4em; width:100%; } +th { font-weight: bold; } +thead th { background: #c3d9ff; } +th,td,caption { padding: 4px 10px 4px 5px; } +/* + You can zebra-stripe your tables in outdated browsers by adding + the class "even" to every other table row. + */ +tbody tr:nth-child(even) td, +tbody tr.even td { + background: #e5ecf9; +} +tfoot { font-style: italic; } +caption { background: #eee; } + + +/* Misc classes +-------------------------------------------------------------- */ + +.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; } +.large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } +.hide { display: none; } + +.quiet { color: #666; } +.loud { color: #000; } +.highlight { background:#ff0; } +.added { background:#060; color: #fff; } +.removed { background:#900; color: #fff; } + +.first { margin-left:0; padding-left:0; } +.last { margin-right:0; padding-right:0; } +.top { margin-top:0; padding-top:0; } +.bottom { margin-bottom:0; padding-bottom:0; } From ac969aa4d60495c5844b68827f12698635367b67 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 7 Apr 2011 14:02:12 -0400 Subject: [PATCH 05/15] Adjusts height based on either passing in a baseline_height, automatically computed from passing in font_size or from the Blueprint default (12) Baseline is font size * 1.5 --- lib/blueprint/grid_builder.rb | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/blueprint/grid_builder.rb b/lib/blueprint/grid_builder.rb index b04a9727..a4c65282 100644 --- a/lib/blueprint/grid_builder.rb +++ b/lib/blueprint/grid_builder.rb @@ -33,13 +33,14 @@ def initialize(options={}) @column_width = options[:column_width] || Blueprint::COLUMN_WIDTH @gutter_width = options[:gutter_width] || Blueprint::GUTTER_WIDTH @output_path = options[:output_path] || Blueprint::SOURCE_PATH + @baseline_height = options[:baseline_height] || (options[:font_size] * 1.5) || (Blueprint::FONT_SIZE * 1.5) end # generates (overwriting if necessary) grid.png image to be tiled in background def generate! return false unless self.able_to_generate total_width = self.column_width + self.gutter_width - height = 18 + height = @baseline_height RVG::dpi = 100 width_in_inches = (total_width.to_f/RVG::dpi).in From c21009f4cd116f8cfaa802e4690dd858e555c6b3 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 7 Apr 2011 14:05:05 -0400 Subject: [PATCH 06/15] Baseline will always be 1.5 * font_size --- lib/blueprint/grid_builder.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/blueprint/grid_builder.rb b/lib/blueprint/grid_builder.rb index a4c65282..b25bee09 100644 --- a/lib/blueprint/grid_builder.rb +++ b/lib/blueprint/grid_builder.rb @@ -33,7 +33,7 @@ def initialize(options={}) @column_width = options[:column_width] || Blueprint::COLUMN_WIDTH @gutter_width = options[:gutter_width] || Blueprint::GUTTER_WIDTH @output_path = options[:output_path] || Blueprint::SOURCE_PATH - @baseline_height = options[:baseline_height] || (options[:font_size] * 1.5) || (Blueprint::FONT_SIZE * 1.5) + @baseline_height = (options[:font_size] * 1.5) || (Blueprint::FONT_SIZE * 1.5) end # generates (overwriting if necessary) grid.png image to be tiled in background From 174a5be4dc0e2287ea726b1b57e9d88a3ad684f4 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 7 Apr 2011 14:05:48 -0400 Subject: [PATCH 07/15] Added setting font_size example --- lib/settings.example.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/settings.example.yml b/lib/settings.example.yml index 6cb20285..a47a3dc5 100644 --- a/lib/settings.example.yml +++ b/lib/settings.example.yml @@ -14,6 +14,7 @@ project1: column_count: 12 column_width: 70 gutter_width: 10 + font_size: 16 plugins: - fancy-type - buttons From d8dc04cb2e18726a5294393d8e94c0fe30f4f3d7 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 7 Apr 2011 14:31:26 -0400 Subject: [PATCH 08/15] adjusted hr margin based on baseline (1.5 * font_size) - 1 (hr height) --- lib/blueprint/grid.css.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/blueprint/grid.css.erb b/lib/blueprint/grid.css.erb index 135a09fc..a9a9321f 100644 --- a/lib/blueprint/grid.css.erb +++ b/lib/blueprint/grid.css.erb @@ -115,7 +115,7 @@ hr { float: none; width: 100%; height: 1px; - margin: 0 0 17px; + margin: 0 0 <%= font_size * 1.5 - 1 %>px; border: none; } From 652a6a9b419767bfe3acdc1d651a929ec62f6cc6 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 7 Apr 2011 14:36:12 -0400 Subject: [PATCH 09/15] hr margins are to_i --- lib/blueprint/grid.css.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/blueprint/grid.css.erb b/lib/blueprint/grid.css.erb index a9a9321f..9f3f0d96 100644 --- a/lib/blueprint/grid.css.erb +++ b/lib/blueprint/grid.css.erb @@ -115,7 +115,7 @@ hr { float: none; width: 100%; height: 1px; - margin: 0 0 <%= font_size * 1.5 - 1 %>px; + margin: 0 0 <%= (font_size * 1.5 - 1).to_i %>px; border: none; } From 9bd92dd2bc10873812e3b1064db0123b648e460e Mon Sep 17 00:00:00 2001 From: Owen Jones and Josh Clayton Date: Sun, 3 Apr 2011 16:20:39 -0400 Subject: [PATCH 10/15] Fixing hr bottom margin by setting to 17px Deleting debug.zip Merging updates from Eric Meyer's latest reset.css Adding explicit font color to input & textarea Added constant FONT_SIZE defaults to blueprint standard of 12 Added symbol :font_size If compressor.rb sees custom layout and the css_source_file is typography.css it runs: custom_layout.generate_typography_css Modified the compressor output Added attr_writer :font_size define font_size to return as a float or Blueprint default (12) defined generate_typography_css using the same syntax as generate_grid_css Initial commit, erb file of typography Only change is to set the (font_size / 16) * 100 12 / 16 * 100 = 75 Adjusts height based on either passing in a baseline_height, automatically computed from passing in font_size or from the Blueprint default (12) Baseline is font size * 1.5 Baseline will always be 1.5 * font_size Added setting font_size example adjusted hr margin based on baseline (1.5 * font_size) - 1 (hr height) hr margins are to_i --- blueprint/screen.css | 2 +- blueprint/src/grid.css | 2 +- lib/blueprint/blueprint.rb | 1 + lib/blueprint/compressor.rb | 17 +++-- lib/blueprint/custom_layout.rb | 33 ++++++--- lib/blueprint/grid.css.erb | 2 +- lib/blueprint/grid_builder.rb | 9 ++- lib/blueprint/typography.css.erb | 123 +++++++++++++++++++++++++++++++ lib/settings.example.yml | 1 + 9 files changed, 168 insertions(+), 22 deletions(-) create mode 100644 lib/blueprint/typography.css.erb diff --git a/blueprint/screen.css b/blueprint/screen.css index 58f53aaa..2093b086 100644 --- a/blueprint/screen.css +++ b/blueprint/screen.css @@ -258,7 +258,7 @@ input.span-24, textarea.span-24 {width:938px;} div.prepend-top, .prepend-top {margin-top:1.5em;} div.append-bottom, .append-bottom {margin-bottom:1.5em;} .box {padding:1.5em;margin-bottom:1.5em;background:#e5eCf9;} -hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:0 0 1.45em;border:none;} +hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:0 0 17px;border:none;} hr.space {background:#fff;color:#fff;visibility:hidden;} .clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;} .clearfix, .container {display:block;} diff --git a/blueprint/src/grid.css b/blueprint/src/grid.css index c102c1fb..dbd57381 100755 --- a/blueprint/src/grid.css +++ b/blueprint/src/grid.css @@ -249,7 +249,7 @@ hr { float: none; width: 100%; height: 1px; - margin: 0 0 1.45em; + margin: 0 0 17px; border: none; } diff --git a/lib/blueprint/blueprint.rb b/lib/blueprint/blueprint.rb index 55f42746..fcb68119 100644 --- a/lib/blueprint/blueprint.rb +++ b/lib/blueprint/blueprint.rb @@ -32,6 +32,7 @@ module Blueprint INPUT_PADDING = 5 INPUT_BORDER = 1 + FONT_SIZE = 12 end Dir["#{File.join(Blueprint::LIB_PATH)}/*"].each do |file| diff --git a/lib/blueprint/compressor.rb b/lib/blueprint/compressor.rb index 150a3cc1..881c52d8 100644 --- a/lib/blueprint/compressor.rb +++ b/lib/blueprint/compressor.rb @@ -66,6 +66,8 @@ def options #:nodoc:# "Set a new gutter width (in pixels) for the output grid") {|gw| self.custom_layout.gutter_width = gw } o.on( "--column_count=COLUMN_COUNT", Integer, "Set a new column count for the output grid") {|cc| self.custom_layout.column_count = cc } + o.on( "--font_size=FONT_SIZE", Integer, + "Set a new font size for the output grid") {|fs| self.custom_layout.font_size = fs } #o.on("-v", "--verbose", "Turn on verbose output.") { |$verbose| } o.on("-h", "--help", "Show this help message.") { puts o; exit } end @@ -94,11 +96,12 @@ def initialize_project_from_yaml(project_name = nil) self.plugins = project["plugins"] || [] if (layout = project["custom_layout"]) - self.custom_layout = CustomLayout.new(:column_count => layout["column_count"], - :column_width => layout["column_width"], - :gutter_width => layout["gutter_width"], + self.custom_layout = CustomLayout.new(:column_count => layout["column_count"], + :column_width => layout["column_width"], + :gutter_width => layout["gutter_width"], :input_padding => layout["input_padding"], - :input_border => layout["input_border"]) + :input_border => layout["input_border"], + :font_size => layout["font_size"]) end @loaded_from_settings = true end @@ -120,6 +123,8 @@ def generate_css_files source_options = if self.custom_layout && css_source_file == "grid.css" self.custom_layout.generate_grid_css + elsif self.custom_layout && css_source_file == "typography.css" + self.custom_layout.generate_typography_css else File.path_to_string File.join(Blueprint::SOURCE_PATH, css_source_file) end @@ -145,7 +150,8 @@ def generate_css_files #attempt to generate a grid.png file if (grid_builder = GridBuilder.new(:column_width => self.custom_layout.column_width, :gutter_width => self.custom_layout.gutter_width, - :output_path => File.join(self.destination_path, "src"))) + :font_size => self.custom_layout.font_size, + :output_path => File.join(self.destination_path, "src"))) grid_builder.generate! end end @@ -254,6 +260,7 @@ def output_header puts " ** - Column Width: #{self.custom_layout.column_width}px" puts " ** - Gutter Width: #{self.custom_layout.gutter_width}px" puts " ** - Total Width : #{self.custom_layout.page_width}px" + puts " ** - Font Size : #{self.custom_layout.font_size}px" puts " **" puts " #{"*" * 100}" end diff --git a/lib/blueprint/custom_layout.rb b/lib/blueprint/custom_layout.rb index ccef91d3..141a14a9 100644 --- a/lib/blueprint/custom_layout.rb +++ b/lib/blueprint/custom_layout.rb @@ -4,9 +4,10 @@ module Blueprint class CustomLayout # path to ERB file used for CSS template CSS_ERB_FILE = File.join(Blueprint::LIB_PATH, 'grid.css.erb') + CSS_TYPOGRAPHY_ERB_FILE = File.join(Blueprint::LIB_PATH, 'typography.css.erb') attr_writer :column_count, :column_width, :gutter_width, :input_padding, - :input_border + :input_border, :font_size # Column count of generated CSS. Returns itself or Blueprint's default def column_count @@ -31,6 +32,10 @@ def input_border (@input_border || Blueprint::INPUT_BORDER).to_i end + def font_size + (@font_size || Blueprint::FONT_SIZE).to_f + end + # Returns page width (in pixels) def page_width column_count * (column_width + gutter_width) - gutter_width @@ -43,21 +48,24 @@ def page_width # * :gutter_width -- Sets the gutter width (in pixels) of generated CSS # * :input_padding -- Sets the input padding width (in pixels) of generated CSS # * :input_border -- Sets the border width (in pixels) of generated CSS + # * :font_size -- Sets the font size (in pixels) of generated CSS def initialize(options = {}) - @column_count = options[:column_count] - @column_width = options[:column_width] - @gutter_width = options[:gutter_width] - @input_padding = options[:input_padding] - @input_border = options[:input_border] + @column_count = options[:column_count] + @column_width = options[:column_width] + @gutter_width = options[:gutter_width] + @input_padding = options[:input_padding] + @input_border = options[:input_border] + @font_size = options[:font_size] end # Boolean value if current settings are Blueprint's defaults def default? - self.column_width == Blueprint::COLUMN_WIDTH && - self.column_count == Blueprint::COLUMN_COUNT && - self.gutter_width == Blueprint::GUTTER_WIDTH && + self.column_width == Blueprint::COLUMN_WIDTH && + self.column_count == Blueprint::COLUMN_COUNT && + self.gutter_width == Blueprint::GUTTER_WIDTH && self.input_padding == Blueprint::INPUT_PADDING && - self.input_border == Blueprint::INPUT_BORDER + self.input_border == Blueprint::INPUT_BORDER && + self.font_size == Blueprint::FONT_SIZE end # Loads grid.css.erb file, binds it to current instance, and returns output @@ -68,5 +76,10 @@ def generate_grid_css # bind it to this instance css.result(binding) end + + def generate_typography_css + css = ERB::new(File.path_to_string(CustomLayout::CSS_TYPOGRAPHY_ERB_FILE)) + css.result(binding) + end end end diff --git a/lib/blueprint/grid.css.erb b/lib/blueprint/grid.css.erb index 618408a9..9f3f0d96 100644 --- a/lib/blueprint/grid.css.erb +++ b/lib/blueprint/grid.css.erb @@ -115,7 +115,7 @@ hr { float: none; width: 100%; height: 1px; - margin: 0 0 1.45em; + margin: 0 0 <%= (font_size * 1.5 - 1).to_i %>px; border: none; } diff --git a/lib/blueprint/grid_builder.rb b/lib/blueprint/grid_builder.rb index b04a9727..b5c61632 100644 --- a/lib/blueprint/grid_builder.rb +++ b/lib/blueprint/grid_builder.rb @@ -30,16 +30,17 @@ class GridBuilder def initialize(options={}) @able_to_generate = Magick::Long_version rescue false return unless @able_to_generate - @column_width = options[:column_width] || Blueprint::COLUMN_WIDTH - @gutter_width = options[:gutter_width] || Blueprint::GUTTER_WIDTH - @output_path = options[:output_path] || Blueprint::SOURCE_PATH + @column_width = options[:column_width] || Blueprint::COLUMN_WIDTH + @gutter_width = options[:gutter_width] || Blueprint::GUTTER_WIDTH + @output_path = options[:output_path] || Blueprint::SOURCE_PATH + @baseline_height = (options[:font_size] || Blueprint::FONT_SIZE) * 1.5 end # generates (overwriting if necessary) grid.png image to be tiled in background def generate! return false unless self.able_to_generate total_width = self.column_width + self.gutter_width - height = 18 + height = @baseline_height RVG::dpi = 100 width_in_inches = (total_width.to_f/RVG::dpi).in diff --git a/lib/blueprint/typography.css.erb b/lib/blueprint/typography.css.erb new file mode 100644 index 00000000..70527489 --- /dev/null +++ b/lib/blueprint/typography.css.erb @@ -0,0 +1,123 @@ +/* -------------------------------------------------------------- + + typography.css + * Sets up some sensible default typography. + +-------------------------------------------------------------- */ + +/* Default font settings. + The font-size percentage is of 16px. (0.75 * 16px = 12px) */ +html { font-size:100.01%; } +body { + font-size: <%= ((font_size / 16.0) * 100).round %>%; + color: #222; + background: #fff; + font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; +} + + +/* Headings +-------------------------------------------------------------- */ + +h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; } + +h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } +h2 { font-size: 2em; margin-bottom: 0.75em; } +h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; } +h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; } +h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } +h6 { font-size: 1em; font-weight: bold; } + +h1 img, h2 img, h3 img, +h4 img, h5 img, h6 img { + margin: 0; +} + + +/* Text elements +-------------------------------------------------------------- */ + +p { margin: 0 0 1.5em; } +/* + These can be used to pull an image at the start of a paragraph, so + that the text flows around it (usage:

Text

) + */ +.left { float: left !important; } +p .left { margin: 1.5em 1.5em 1.5em 0; padding: 0; } +.right { float: right !important; } +p .right { margin: 1.5em 0 1.5em 1.5em; padding: 0; } + +a:focus, +a:hover { color: #09f; } +a { color: #06c; text-decoration: underline; } + +blockquote { margin: 1.5em; color: #666; font-style: italic; } +strong,dfn { font-weight: bold; } +em,dfn { font-style: italic; } +sup, sub { line-height: 0; } + +abbr, +acronym { border-bottom: 1px dotted #666; } +address { margin: 0 0 1.5em; font-style: italic; } +del { color:#666; } + +pre { margin: 1.5em 0; white-space: pre; } +pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } + + +/* Lists +-------------------------------------------------------------- */ + +li ul, +li ol { margin: 0; } +ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; } + +ul { list-style-type: disc; } +ol { list-style-type: decimal; } + +dl { margin: 0 0 1.5em 0; } +dl dt { font-weight: bold; } +dd { margin-left: 1.5em;} + + +/* Tables +-------------------------------------------------------------- */ + +/* + Because of the need for padding on TH and TD, the vertical rhythm + on table cells has to be 27px, instead of the standard 18px or 36px + of other elements. + */ +table { margin-bottom: 1.4em; width:100%; } +th { font-weight: bold; } +thead th { background: #c3d9ff; } +th,td,caption { padding: 4px 10px 4px 5px; } +/* + You can zebra-stripe your tables in outdated browsers by adding + the class "even" to every other table row. + */ +tbody tr:nth-child(even) td, +tbody tr.even td { + background: #e5ecf9; +} +tfoot { font-style: italic; } +caption { background: #eee; } + + +/* Misc classes +-------------------------------------------------------------- */ + +.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; } +.large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } +.hide { display: none; } + +.quiet { color: #666; } +.loud { color: #000; } +.highlight { background:#ff0; } +.added { background:#060; color: #fff; } +.removed { background:#900; color: #fff; } + +.first { margin-left:0; padding-left:0; } +.last { margin-right:0; padding-right:0; } +.top { margin-top:0; padding-top:0; } +.bottom { margin-bottom:0; padding-bottom:0; } diff --git a/lib/settings.example.yml b/lib/settings.example.yml index 6cb20285..a47a3dc5 100644 --- a/lib/settings.example.yml +++ b/lib/settings.example.yml @@ -14,6 +14,7 @@ project1: column_count: 12 column_width: 70 gutter_width: 10 + font_size: 16 plugins: - fancy-type - buttons From d19466961b8745657a4ea28feb8cc438b02b4078 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 21 Apr 2011 21:29:12 -0400 Subject: [PATCH 11/15] Although

and inherit the same font-size and weight (1.2em, strong) the bottom margin on

appears to be 6px above the baseline while the is 4px below it. [Image taken on Chrome at maximum zoom] The one thing that appeared to be missing was a line-height, so I added

's line-height of 1.25em. This appears to me to be centered from 12px font-size all the way up to 100px font-size. --- blueprint/src/forms.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blueprint/src/forms.css b/blueprint/src/forms.css index 410a03a3..3466cd84 100644 --- a/blueprint/src/forms.css +++ b/blueprint/src/forms.css @@ -15,7 +15,7 @@ correctly on fieldsets */ label { font-weight: bold; } -fieldset { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; } +fieldset { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; line-height: 1.25;} legend { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; } fieldset, #IE8#HACK { padding-top:1.4em; } From fc82e1f84a387f0324cdc1508f7720c970135618 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 21 Apr 2011 21:48:26 -0400 Subject: [PATCH 12/15] Nope, I added line-height to
not --- blueprint/src/forms.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blueprint/src/forms.css b/blueprint/src/forms.css index 3466cd84..2e1654fc 100644 --- a/blueprint/src/forms.css +++ b/blueprint/src/forms.css @@ -14,9 +14,9 @@ A special hack is included for IE8 since it does not apply padding correctly on fieldsets */ -label { font-weight: bold; } -fieldset { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; line-height: 1.25;} -legend { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; } +label { font-weight: bold; margin: 0 0 1.5em; } +fieldset { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc;} +legend { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; line-height: 1.25;} fieldset, #IE8#HACK { padding-top:1.4em; } legend, #IE8#HACK { margin-top:0; margin-bottom:0; } From 104ffed7982797a6ec2d19cc341ae0ff03a48e91 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 21 Apr 2011 21:49:58 -0400 Subject: [PATCH 13/15] Committed this by accident. --- blueprint/src/forms.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blueprint/src/forms.css b/blueprint/src/forms.css index 2e1654fc..4107ebf4 100644 --- a/blueprint/src/forms.css +++ b/blueprint/src/forms.css @@ -14,7 +14,7 @@ A special hack is included for IE8 since it does not apply padding correctly on fieldsets */ -label { font-weight: bold; margin: 0 0 1.5em; } +label { font-weight: bold;} fieldset { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc;} legend { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; line-height: 1.25;} From b41bf0e2bc368fde1c317f17994c52d5879f8b42 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 21 Apr 2011 22:57:12 -0400 Subject: [PATCH 14/15] 1.5em appears much more centered on Chrome. --- blueprint/src/forms.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blueprint/src/forms.css b/blueprint/src/forms.css index 4107ebf4..8764cc6b 100644 --- a/blueprint/src/forms.css +++ b/blueprint/src/forms.css @@ -15,7 +15,7 @@ correctly on fieldsets */ label { font-weight: bold;} -fieldset { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc;} +fieldset { padding:1.5em 1.4em 1.5em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc;} legend { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; line-height: 1.25;} fieldset, #IE8#HACK { padding-top:1.4em; } From 28ca2352d5b19faf20dfa5315fd15f7c0cd0c229 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 21 Apr 2011 22:57:57 -0400 Subject: [PATCH 15/15] Although this is labeled as IE8#HACK I still see it getting processed in Chrome's element inspector. --- blueprint/src/forms.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blueprint/src/forms.css b/blueprint/src/forms.css index 8764cc6b..f90e4baf 100644 --- a/blueprint/src/forms.css +++ b/blueprint/src/forms.css @@ -18,7 +18,7 @@ label { font-weight: bold;} fieldset { padding:1.5em 1.4em 1.5em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc;} legend { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; line-height: 1.25;} -fieldset, #IE8#HACK { padding-top:1.4em; } +fieldset, #IE8#HACK { padding-top:1.5em; } legend, #IE8#HACK { margin-top:0; margin-bottom:0; } /* Form fields