blueprintr 0.1.0

data/lib/blueprint-css/lib/blueprint/core_ext.rb

@@ -0,0 +1,39 @@
+class String
+  # see if string has any content
+  def blank?; self.length.zero?; end
+  
+  # strip space after :, remove newlines, replace multiple spaces with only one space, remove comments
+  def strip_space!
+    replace self.gsub(/:\s*/, ':').gsub(/\n/, '').gsub(/\s+/, ' ').gsub(/(\/\*).*?(\*\/)/, '')
+  end
+  
+  # remove newlines, insert space after comma, replace two spaces with one space after comma
+  def strip_selector_space!
+    replace self.gsub(/(\n)/, '').gsub(',', ', ').gsub(',  ', ', ')
+  end
+  
+  # remove leading whitespace, remove end whitespace
+  def strip_side_space!
+    replace self.gsub(/^\s+/, '').gsub(/\s+$/, $/)
+  end
+end
+
+class NilClass
+  def blank?
+    true
+  end
+end
+
+class File
+  # string output from file
+  def self.path_to_string(path)
+    File.new(path).read
+  end
+  
+  # saves a string to a specified file path
+  def self.string_to_file(string, path)
+    directory = File.dirname(path)
+    FileUtils.mkdir_p directory unless File.directory?(directory)
+    File.open(path, 'w') { |f| f << string }
+  end
+end

data/lib/blueprint-css/lib/blueprint/css_parser.rb

@@ -0,0 +1,69 @@
+module Blueprint
+  # Strips out most whitespace and can return a hash or string of parsed data
+  class CSSParser
+    attr_accessor :namespace
+    attr_reader   :css_output, :raw_data
+  
+    # ==== Options
+    # * <tt>css_string</tt> String of CSS data
+    # * <tt>options</tt>
+    #   * <tt>:namespace</tt> -- Namespace to use when generating output
+    def initialize(css_string = "", options = {})
+      @raw_data     = css_string
+      @namespace    = options[:namespace] || ""
+      compress(@raw_data)
+    end
+  
+    # returns string of CSS which can be saved to a file or otherwise
+    def to_s
+      @css_output
+    end
+  
+    # returns a hash of all CSS data passed
+    #
+    # ==== Options
+    # * <tt>data</tt> -- CSS string; defaults to string passed into the constructor
+    def parse(data = nil)
+      data ||= @raw_data
+    
+      # wrapper array holding hashes of css tags/rules
+      css_out = []
+      # clear initial spaces
+      data.strip_side_space!.strip_space!
+    
+      # split on end of assignments
+      data.split('}').each_with_index do |assignments, index|
+        # split again to separate tags from rules
+        tags, styles = assignments.split('{').map{|a| a.strip_side_space!}
+        unless styles.blank?
+          # clean up tags and apply namespaces as needed
+          tags.strip_selector_space!
+          tags.gsub!(/\./, ".#{namespace}") unless namespace.blank?
+      
+          # split on semicolon to iterate through each rule
+          rules = []
+          styles.split(';').each do |key_val_pair|
+            unless key_val_pair.nil?
+              # split by property/val and append to rules array with correct declaration
+              property, value = key_val_pair.split(':', 2).map{|kv| kv.strip_side_space!}
+              break unless property && value
+              rules << "#{property}:#{value};"
+            end
+          end
+          # now keeps track of index as hashes don't keep track of position (which will be fixed in Ruby 1.9)
+          css_out << {:tags => tags, :rules => rules.join, :idx => index} unless tags.blank? || rules.to_s.blank?
+        end
+      end
+      css_out
+    end
+  
+    private
+  
+    def compress(data)
+      @css_output = ""
+      parse(data).flatten.sort_by {|i| i[:idx]}.each do |line|
+        @css_output += "#{line[:tags]} {#{line[:rules]}}\n"
+      end
+    end
+  end
+end

data/lib/blueprint-css/lib/blueprint/custom_layout.rb

@@ -0,0 +1,71 @@
+require 'erb'
+module Blueprint
+  # Generates a custom grid file, using ERB to evaluate custom settings
+  class CustomLayout
+    # path to ERB file used for CSS template
+    CSS_ERB_FILE = File.join(Blueprint::LIB_PATH, 'grid.css.erb')
+  
+    attr_writer :column_count, :column_width, :gutter_width, :input_padding, :input_border
+
+    # Column count of generated CSS.  Returns itself or Blueprint's default
+    def column_count
+      (@column_count || Blueprint::COLUMN_COUNT).to_i
+    end
+    
+    # Column width (in pixels) of generated CSS.  Returns itself or Blueprint's default
+    def column_width
+      (@column_width || Blueprint::COLUMN_WIDTH).to_i
+    end
+
+    # Gutter width (in pixels) of generated CSS.  Returns itself or Blueprint's default
+    def gutter_width
+      (@gutter_width || Blueprint::GUTTER_WIDTH).to_i
+    end
+    
+    def input_padding
+      (@input_padding || Blueprint::INPUT_PADDING).to_i
+    end
+    
+    def input_border
+      (@input_border || Blueprint::INPUT_BORDER).to_i
+    end
+
+    # Returns page width (in pixels)
+    def page_width
+      column_count * (column_width + gutter_width) - gutter_width
+    end
+  
+    # ==== Options
+    # * <tt>options</tt>
+    #   * <tt>:column_count</tt> -- Sets the column count of generated CSS
+    #   * <tt>:column_width</tt> -- Sets the column width (in pixels) of generated CSS
+    #   * <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
+    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]
+    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.input_padding == Blueprint::INPUT_PADDING && 
+      self.input_border == Blueprint::INPUT_BORDER
+    end
+    
+    # Loads grid.css.erb file, binds it to current instance, and returns output
+    def generate_grid_css
+      # loads up erb template to evaluate custom widths
+      css = ERB::new(File.path_to_string(CustomLayout::CSS_ERB_FILE))
+    
+      # bind it to this instance
+      css.result(binding)
+    end
+  end
+end

data/lib/blueprint-css/lib/blueprint/grid.css.erb

@@ -0,0 +1,146 @@
+/* --------------------------------------------------------------
+
+   grid.css
+   * Sets up an easy-to-use grid of 24 columns.
+
+   By default, the grid is 950px wide, with 24 columns
+   spanning 30px, and a 10px margin between columns.
+
+   If you need fewer or more columns, namespaces or semantic
+   element names, use the compressor script (lib/compress.rb)
+
+-------------------------------------------------------------- */
+
+/* A container should group all your columns. */
+.container {
+  width: <%= page_width %>px;
+  margin: 0 auto;
+}
+
+/* Use this class on any .span-# / .container to see the grid. */
+.showgrid {
+  background: url(src/grid.png);
+}
+
+
+/* Columns
+-------------------------------------------------------------- */
+
+/* Sets up basic grid floating and margin. */
+.column, <%= (1..column_count).map {|c| ".span-#{c}" }.join(", ") %> {
+  float: left;
+  margin-right: <%= gutter_width %>px;
+}
+
+/* The last column in a row needs this class. */
+.last { margin-right: 0; }
+
+/* Use these classes to set the width of a column. */
+.span-1 {width: <%= column_width %>px;}
+<% (2..column_count-1).each do |column| %>
+.span-<%= column %> {width: <%= (column_width + ((column - 1) * (column_width + gutter_width))).to_i %>px;<%= "margin-right: 0;" if column == column_count %>}<% end %>
+.span-<%= column_count %> {width:<%= page_width %>px; margin-right:0;}
+
+/* Use these classes to set the width of an input. */
+<%= (1..column_count).map {|column| "input.span-#{column}, textarea.span-#{column}"}.join(", ") %> {
+  border-left-width: <%= input_border %>px;
+  border-right-width: <%= input_border %>px;
+  padding-left: <%= input_padding %>px;
+  padding-right: <%= input_padding %>px;
+}
+<% (1..column_count).each do |column| %>
+input.span-<%= column %>, textarea.span-<%= column %> { width: <%= ((column_width + gutter_width) * (column - 1) + column_width - 2*(input_padding + input_border))%>px; }<% end %>
+
+/* Add these to a column to append empty cols. */
+<% (1..(column_count-1)).each do |column| %>
+.append-<%= column %> { padding-right: <%= (column * (column_width + gutter_width)).to_i %>px;}<% end %>
+
+/* Add these to a column to prepend empty cols. */
+<% (1..(column_count-1)).each do |column| %>
+.prepend-<%= column %> { padding-left: <%= (column * (column_width + gutter_width)).to_i %>px;}<% end %>
+
+
+/* Border on right hand side of a column. */
+.border {
+  padding-right: <%= (gutter_width * 0.5 - 1).to_i %>px;
+  margin-right: <%= (gutter_width * 0.5).to_i %>px;
+  border-right: 1px solid #eee;
+}
+
+/* Border with more whitespace, spans one column. */
+.colborder {
+  padding-right: <%= (column_width + 2*gutter_width - 1)/2.to_i %>px;
+  margin-right: <%= (column_width + 2 * gutter_width)/2.to_i %>px;
+  border-right: 1px solid #eee;
+}
+
+
+/* Use these classes on an element to push it into the
+next column, or to pull it into the previous column.  */
+
+<% (1..column_count).each do |column| %>
+.pull-<%= column %> { margin-left: -<%= (column * (column_width + gutter_width)).to_i %>px; }<% end %>
+
+<%= (1..column_count).map {|c| ".pull-#{c}" }.join(", ") %> {float: left; position:relative;}
+
+<% (1..(column_count)).each do |column| %>
+.push-<%= column %> { margin: 0 -<%= (column * (column_width + gutter_width)).to_i %>px 1.5em <%= (column * (column_width + gutter_width)).to_i %>px; }<% end %>
+
+<%= (1..column_count).map {|c| ".push-#{c}" }.join(", ") %> {float: right; position:relative;}
+
+
+/* Misc classes and elements
+-------------------------------------------------------------- */
+
+/* In case you need to add a gutter above/below an element */
+.prepend-top {
+  margin-top:1.5em;
+}
+.append-bottom {
+  margin-bottom:1.5em;
+}
+
+/* Use a .box to create a padded box inside a column.  */
+.box {
+  padding: 1.5em;
+  margin-bottom: 1.5em;
+  background: #E5ECF9;
+}
+
+/* Use this to create a horizontal ruler across a column. */
+hr {
+  background: #ddd;
+  color: #ddd;
+  clear: both;
+  float: none;
+  width: 100%;
+  height: .1em;
+  margin: 0 0 1.45em;
+  border: none;
+}
+
+hr.space {
+  background: #fff;
+  color: #fff;
+  visibility: hidden;
+}
+
+
+/* Clearing floats without extra markup
+   Based on How To Clear Floats Without Structural Markup by PiE
+   [http://www.positioniseverything.net/easyclearing.html] */
+
+.clearfix:after, .container:after {
+  content: "\0020";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+  overflow:hidden;
+}
+.clearfix, .container {display: block;}
+
+/* Regular clearing
+   apply to column that should drop below previous ones. */
+
+.clear { clear:both; }

data/lib/blueprint-css/lib/blueprint/grid_builder.rb

@@ -0,0 +1,54 @@
+begin
+  require 'rubygems'
+  gem 'rmagick'
+  require 'rvg/rvg'
+rescue Exception => e
+end
+
+module Blueprint
+  # Uses ImageMagick and RMagick to generate grid.png file
+  class GridBuilder
+    begin
+      include Magick
+    rescue Exception => e
+    end
+
+    attr_reader :column_width, :gutter_width, :output_path, :able_to_generate
+
+    # ==== Options
+    # * <tt>options</tt>
+    #   * <tt>:column_width</tt> -- Width (in pixels) of current grid column
+    #   * <tt>:gutter_width</tt> -- Width (in pixels) of current grid gutter
+    #   * <tt>:output_path</tt> -- Output path of grid.png file
+    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
+    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
+      RVG::dpi = 100
+
+      rvg = RVG.new((total_width.to_f/RVG::dpi).in, (height.to_f/RVG::dpi).in).viewbox(0, 0, total_width, height) do |canvas|
+        canvas.background_fill = 'white'
+
+        canvas.g do |column|
+          column.rect(self.column_width - 1, height).styles(:fill => "#e8effb")
+        end
+
+        canvas.g do |baseline|
+          baseline.line(0, (height - 1), total_width, (height- 1)).styles(:fill => "#e9e9e9")
+        end
+      end
+      
+      FileUtils.mkdir self.output_path unless File.exists? self.output_path
+      rvg.draw.write(File.join(self.output_path, "grid.png"))
+    end
+  end
+end

data/lib/blueprint-css/lib/blueprint/namespace.rb

@@ -0,0 +1,38 @@
+module Blueprint
+  class Namespace
+  
+    # Read html to string, remove namespace if any,
+    # set the new namespace, and update the test file.
+    def initialize(path, namespace)
+      html = File.path_to_string(path)
+      remove_current_namespace(html)
+      add_namespace(html, namespace)
+      File.string_to_file(html, path)
+    end
+  
+    # adds namespace to BP classes in a html file
+    def add_namespace(html, namespace)    
+      html.gsub!(/(class=")([a-zA-Z0-9\-_ ]*)(")/) do |m|
+        classes = m.to_s.split('"')[1].split(' ')
+        classes.map! { |c| c = namespace + c }
+        'class="' + classes.join(' ') + '"'
+      end
+      html
+    end
+  
+    # removes a namespace from a string of html
+    def remove_current_namespace(html)
+      current = current_namespace(html)
+      html.gsub!(current, '')
+      html
+    end
+  
+    # returns current namespace in test files
+    # based on container class
+    def current_namespace(html)
+      html =~ /class="([\S]+)container/
+      current_namespace = $1 if $1
+      current_namespace || ''
+    end
+  end
+end

data/lib/blueprint-css/lib/blueprint/semantic_class_names.rb

@@ -0,0 +1,57 @@
+module Blueprint
+  # parses a hash of key/value pairs, key being output CSS selectors, value being a list of CSS selectors to draw from
+  class SemanticClassNames
+    attr_accessor :class_assignments
+    attr_reader   :namespace, :source_file
+  
+    # ==== Options
+    # * <tt>options</tt>
+    #   * <tt>:namespace</tt> -- Namespace to be used when matching CSS selectors to draw from
+    #   * <tt>:source_file</tt> -- Source file to use as reference of CSS selectors.  Defaults to Blueprint's generated screen.css
+    #   * <tt>:class_assignments</tt> -- Hash of key/value pairs, key being output CSS selectors, value being a list of CSS selectors to draw from
+    def initialize(options = {})
+      @namespace = options[:namespace] || ""
+      @source_file = options[:source_file] || File.join(Blueprint::BLUEPRINT_ROOT_PATH, 'screen.css')
+      self.class_assignments = options[:class_assignments] || {}
+    end
+  
+    # Returns a CSS string of semantic selectors and associated styles
+    # ==== Options
+    # * <tt>assignments</tt> -- Hash of key/value pairs, key being output CSS selectors, value being a list of CSS selectors to draw from; defaults to what was passed in constructor or empty hash
+    def css_from_assignments(assignments = {})
+      assignments ||= self.class_assignments
+    
+      # define a wrapper hash to hold all the new CSS assignments
+      output_css = {}
+    
+      #loads full stylesheet into an array of hashes
+      blueprint_assignments = CSSParser.new(File.path_to_string(self.source_file)).parse
+    
+      # iterates through each class assignment ('#footer' => '.span-24', '#header' => '.span-24')
+      assignments.each do |semantic_class, blueprint_classes|
+        # gathers all BP classes we're going to be mimicing
+        blueprint_classes = blueprint_classes.split(/,|\s/).find_all {|c| !c.blank? }.flatten.map {|c| c.strip }
+        classes = []
+        # loop through each BP class, grabbing the full hash (containing tags, index, and CSS rules)
+        blueprint_classes.each do |bp_class|
+          match = bp_class.include?('.') ? bp_class.gsub(".", ".#{self.namespace}") : ".#{self.namespace}#{bp_class}"
+          classes << blueprint_assignments.find_all {|line| line[:tags] =~ Regexp.new(/^([\w\.\-\:]+, ?)*#{match}(, ?[\w\.\-\:]+)*$/) }.uniq
+        end
+      
+        # clean up the array
+        classes = classes.flatten.uniq
+      
+        # set the semantic class to the rules gathered in classes, sorted by index
+        # this way, the styles will be applied in the correct order from top of file to bottom
+        output_css[semantic_class] = "#{classes.sort_by {|i| i[:idx]}.map {|i| i[:rules]}}"
+      end
+    
+      # return the css in proper format
+      css = ""
+      output_css.each do |tags, rules|
+        css += "#{tags} {#{rules}}\n"
+      end
+      css
+    end
+  end
+end