Adjustable Custom Layout Font SIzes

blueprint/src/forms.css

@@ -14,11 +14,11 @@
 	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; }
-legend      { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; }
+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

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|

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

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,10 +32,18 @@ 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
     end
+
+    def font_size
+      (@font_size || Blueprint::FONT_SIZE).to_f
+    end
 
     # ==== Options
     # * <tt>options</tt>
@@ -43,21 +52,24 @@ def page_width
     #   * <tt>:gutter_width</tt> -- Sets the gutter width (in pixels) of generated CSS
     #   * <tt>:input_padding</tt> -- Sets the input padding width (in pixels) of generated CSS
     #   * <tt>:input_border</tt> -- Sets the border width (in pixels) of generated CSS
+    #   * <tt>:font_size</tt> -- 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 +80,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

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).to_i %>px;
   border: none;
 }
 

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

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: <p><img class="left">Text</p>) 
+ */
+.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; }

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