Skip to content
Browse files

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
  • Loading branch information...
1 parent 5d113e9 commit 9bd92dd2bc10873812e3b1064db0123b648e460e Owen Jones and Josh Clayton committed with Apr 3, 2011
View
2 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;}
View
2 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;
}
View
1 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|
View
17 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
View
33 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
# * <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 +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
View
2 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;
}
View
9 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
View
123 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; }
View
1 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

0 comments on commit 9bd92dd

Please sign in to comment.
Something went wrong with that request. Please try again.