@@ -1,14 +1,14 @@ h1. Blueprint CSS Framework Authors and Contributors -Blueprint is based on the work of many talented people. It is -through their good intentions we are allowed to use many of the +Blueprint is based on the work of many talented people. It is +through their good intentions we are allowed to use many of the techniques found in the framework. h2. Current Team -Blueprint was realized and maintained through version 0.7.1 by -"Olav Bjorkoy":http://bjorkoy.com who has sinced passed the torch -to the current team. They are: +Blueprint was realized and maintained through version 0.7.1 by +"Olav Bjorkoy":http://bjorkoy.com who has sinced passed the torch +to the current team. They are: Admins: * "Christian Montoya":http://christianmontoya.net @@ -21,8 +21,8 @@ Contributors: h2. Original CSS authors -The first iteration of Blueprint was built upon many conventions -and ideas that were developed by true CSS experts. +The first iteration of Blueprint was built upon many conventions +and ideas that were developed by true CSS experts. The grid and typography is based on work by: * "Jeff Croft":http://jeffcroft.com @@ -33,10 +33,10 @@ The grid and typography is based on work by: The CSS reset is based on work by: * "Eric Meyer":http://www.meyerweb.com/eric -The Fancy Type plugin is based on work by: +The Fancy Type plugin is based on work by: * "Mark Boulton":http://www.markboulton.co.uk * "Typogrify":http://typogrify.googlecode.com -(However, remember that these people are not involved with the -framework, so please don't waste their or your time asking them +(However, remember that these people are not involved with the +framework, so please don't waste their or your time asking them for support.) AUTHORS.textile @@ -3,7 +3,7 @@ Blueprint CSS Framework Change Log Version 0.9 - Date May 29, 2009 -- - New features: + New features: * Changed all conditional comments to [if lt IE 8] for IE 8 compatibility [CMM] * Updated forms code to align inline form elements, with additions for IE 6 [CMM] * Use <form class="inline"> for inline forms @@ -12,11 +12,11 @@ Version 0.9 - Date May 29, 2009 Version 0.8 - Date November 11, 2008 -- - New features: + New features: * Much of the flexibility of 0.6 has been pushed back into the core [CMM] * Plugins from 0.6 are now back in the core [CMM] - - Bug fixes: + + Bug fixes: * Lots. See http://blueprintcss.lighthouseapp.com/projects/15318-blueprint-css @@ -24,9 +24,9 @@ Version 0.7.1 - Date February 21, 2008 -- New features: * Rubydoc for compressor [JC] - + Bug fixes: - * Fixed bug in the compressor related to Rubygems. [JC] + * Fixed bug in the compressor related to Rubygems. [JC] * <tt> should be inline, not block. [OFB] @@ -48,7 +48,7 @@ Version 0.7 - February 19, 2008 * No need for .column! You now have to use divs for columns, but you can still use span/prepend/append for other elements as well. In other words, div.span-x now implies that the element is a .column. [OFB] - + Bug fixes: * Sidebar alignment in tests/sample.html. [OFB] * Line-height on sub/sup. [OFB] @@ -64,7 +64,7 @@ Version 0.7 - February 19, 2008 * Improved .notice, .error and .success color contrast. [OFB] * Size of input[text]. [OFB] * Baseline alignment of <h4>. [OFB] - + Misc: * Improved structure in print.css. [OFB] * Dual-licensed under MIT and GPL licenses. [OFB] @@ -90,18 +90,18 @@ Version 0.6 - September 21, 2007 to both extreme sides of the grid. Added test cases to tests/grid.css [GR] * Moved test sample files to blueprint/tests sub-directory so tests stay with the code. [GR] * Consolidated all references to release version number to screen.css [OFB] - * Added ruby script (generate_compressed_css.rb) to scripts dir, and 'csstidy' binary (OS X Universal) + * Added ruby script (generate_compressed_css.rb) to scripts dir, and 'csstidy' binary (OS X Universal) for generating tidied version of Blueprint (lib/compressed.css). - * Consolidated test pages into one single page (test.html). Uses compressed stylesheet by default. This ensures test of - the chain of generation. (todo) Intention is to delete other test files if single file works well. (todo) ensure singular + * Consolidated test pages into one single page (test.html). Uses compressed stylesheet by default. This ensures test of + the chain of generation. (todo) Intention is to delete other test files if single file works well. (todo) ensure singular test file contains latest changes to other test files. [GR] * Moved the blueprint framework to its own folder in the package, so that the tests, script, license and readme don't clutter up our BP folder. [OFB] - * Re-saved grid.png with Photoshop to remove Fireworks data which was bloating it. + * Re-saved grid.png with Photoshop to remove Fireworks data which was bloating it. Now its about 3KB instead of 40+KB. Resolves Issue 22. [GR] * Moved compressed files to new compressed dir [OFB] * print.css is now also being generated by the compressor ruby script and is available for use. - * Added new script 'validate_css.rb' which will validate all css files and present a report with + * Added new script 'validate_css.rb' which will validate all css files and present a report with a local java binary of the W3C validator. * Created an experimental CSS classes plugin, by popular demand. [OFB] * Improved handling of multi-line headings. [OFB] @@ -115,7 +115,7 @@ Version 0.6 - September 21, 2007 * Added tests for more elements which gets reset in reset.css [OFB, GR] * Added forms.css, awaiting implementation. Moved form styling from typography.css [OFB] * Updated compressor script to include forms.css [OFB] - * Improved forms.html tests for upcoming forms.css implementation. This will change based on the + * Improved forms.html tests for upcoming forms.css implementation. This will change based on the markup that forms.css will use. [OFB] * Fixed clearing image in button element bug in buttons.css [OFB] * Fixed bug where IE6 clips pushed/pulled elements. [OFB] @@ -131,13 +131,13 @@ Version 0.6 - September 21, 2007 * Started on a new approach for the PNG plugin. Will not be included in this release. [OFB] * Fixed incorrect rendering of ol in IE6/7. [OFB] * Created a new, spiffier sample page. [OFB] - + Version 0.5 - August 28, 2007 -- * Changed grid width from 14 to 24 columns [OFB] * Removed 'first' CSS class and the need to apply it to the first column in a row of columns. [OFB] - * Reverted to using pixels instead of em units to specify vertical spacing due to baseline issues with + * Reverted to using pixels instead of em units to specify vertical spacing due to baseline issues with all browsers except Firefox. [OFB] * New set of default fonts. (Experimental) [OFB] * Added test files [OFB] @@ -145,7 +145,7 @@ Version 0.5 - August 28, 2007 Version 0.4 - August 11, 2007 -- - * All font sizes and vertical margins are now elastic, through the use of em units. + * All font sizes and vertical margins are now elastic, through the use of em units. Resizing works great in every tested browser. [OFB] * Comes with a new, compressed version of BP, which reduces the size of the core files by 60 percent. [OFB] * Support for incremental leading, contributed by Mark Boulton. [OFB] CHANGELOG @@ -3,7 +3,7 @@ Blueprint CSS Framework License Copyright (c) 2007-2008 blueprintcss.org -The Blueprint CSS Framework is available for use in all personal or +The Blueprint CSS Framework is available for use in all personal or commercial projects, under both the (modified) MIT and the GPL license. You may choose the one that fits your project. @@ -18,8 +18,8 @@ to use, copy, modify, merge, publish, distribute, sub-license, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: -The above copyright notice, and every other copyright notice found in this -software, and all the attributions in every file, and this permission notice +The above copyright notice, and every other copyright notice found in this +software, and all the attributions in every file, and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR @@ -311,4 +311,4 @@ OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE -POSSIBILITY OF SUCH DAMAGES. \ No newline at end of file +POSSIBILITY OF SUCH DAMAGES. LICENSE @@ -19,19 +19,19 @@ h2. Project Info h2. Setup Instructions -Here's how you set up Blueprint on your site. +Here's how you set up Blueprint on your site. # Upload the "blueprint" folder in this folder to your server, and place it in whatever folder you'd like. A good choice would be your CSS folder. # Add the following three lines to every @<head/>@ of your site. Make sure the three @href@ paths are correct (here, BP is in my CSS folder): <pre> <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> -<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> +<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]> <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"> <![endif]--> </pre> Remember to include trailing slashes (" />") in these lines if you're using XHTML. # For development, add the .showgrid class to any container or column to see the underlying grid. Check out the @plugins@ directory for more advanced functionality. - + h2. Tutorials README.textile @@ -3,56 +3,56 @@ h1. Blueprint CSS Framework Tutorial Welcome to this tutorial on Blueprint. It will give you a thorough intro to what you can do with the framework, and a few notes on what you shouldn't do with it. Let's get started. h2. About Blueprint - + Blueprint is a CSS framework, designed to cut down on your development time. It gives you a solid foundation to build your CSS on top of, including some sensible default typography, a customizable grid, a print stylesheet and much more. However, BP is not a silver bullet, and it's best suited for websites where each page may require it's own design. Take a look at existing BP pages before deciding if the framework is right for you. You may also check out the test files in the @tests@ directory, which demonstrates most of the features in Blueprint. -The word "framework" may be a bit misleading in this context, since BP does not make suggestions on how you should organize or write your CSS. It's more like a "css toolbox" with helpful bits and pieces, from which you may pick and choose based on your needs. +The word "framework" may be a bit misleading in this context, since BP does not make suggestions on how you should organize or write your CSS. It's more like a "css toolbox" with helpful bits and pieces, from which you may pick and choose based on your needs. h2. Structural Overview - + From the bottom up, here are the CSS layers in Blueprint: -# *CSS reset*: Removes any default CSS rules set by each browser. -# *Typography*: Gives you some nice default typography and colors. -# *Grid*: Provides a set of CSS classes for making grid layouts. +# *CSS reset*: Removes any default CSS rules set by each browser. +# *Typography*: Gives you some nice default typography and colors. +# *Grid*: Provides a set of CSS classes for making grid layouts. The second part of Blueprint are the scripts, which lets you customize most aspects of the framework, from column count and widths, to output paths and CSS class namespaces. We have two scripts: # *Compressor*: For compressing and customizing the source files. -# *Validator*: For validating the Blueprint core files. +# *Validator*: For validating the Blueprint core files. -That's the quick overview, so now we can finally get into the details. First, we'll take -a look at the CSS in Blueprint. We'll then move on to the scripts, where I'll show you +That's the quick overview, so now we can finally get into the details. First, we'll take +a look at the CSS in Blueprint. We'll then move on to the scripts, where I'll show you how to customize the framework. h2. Setting Up Blueprint To use Blueprint, you must include three files in your HTML: -* @blueprint/screen.css@: All CSS for screen, projection viewing. +* @blueprint/screen.css@: All CSS for screen, projection viewing. * @blueprint/print.css@: A basic stylesheet for printing. -* @blueprint/ie.css@: A few needed corrections for Internet Explorer +* @blueprint/ie.css@: A few needed corrections for Internet Explorer To include them, use the following HTML (make sure the href paths are correct): <pre> <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> - <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> + <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]> <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"> <![endif]--> </pre> -Remember to add trailing slashes if you're using XHTML (" />"). +Remember to add trailing slashes if you're using XHTML (" />"). h2. Using the CSS in Blueprint As mentioned before, there's basically three layers of CSS in Blueprint. The first two layers, the browser CSS reset and the default typography, apply themselves by changing CSS of standard HTML elements. In other words, you don't need to change anything in these files. If you for instance want to change the font size, do this in your own stylesheet, so that it's easy to upgrade Blueprint when new versions arrive. h3. Classes for Typography - + While the typography of Blueprint mainly applies itself, there's a few classes provided. Here's a list of their names and what they do: @@ -72,18 +72,18 @@ provided. Here's a list of their names and what they do: </dl> h3. Styling Forms - + To make Blueprint style your input elements, each text input element should have the class @.text@, or @.title@, where @.text@ is the normal size, and @.title@ gives you an input field with larger text. There's also a few classes you may use for success and error messages: - + <dl> - <dt>@div.error@</dt><dd>Creates an error box (red).</dd> - <dt>@div.notice@</dt><dd>Creates a box for notices (yellow).</dd> - <dt>@div.success@</dt><dd>Creates a box for success messages (green).</dd> -</dl> + <dt>@div.error@</dt><dd>Creates an error box (red).</dd> + <dt>@div.notice@</dt><dd>Creates a box for notices (yellow).</dd> + <dt>@div.success@</dt><dd>Creates a box for success messages (green).</dd> +</dl> h3. Creating a Grid @@ -93,29 +93,29 @@ The default grid is made up of 24 columns, each spanning 30px, with a 10px margi So how do you set up a grid? By using classes provided by Blueprint. To create a column, make a new @<div/>@, and apply one of the @.span-x@ classes to it. For instance, if you want a 3-column setup, with two narrow and one wide column, a header and a footer here's how you do it: -<pre> +<pre> <div class="container"> - <div class="span-24"> - The header - </div> - - <div class="span-4"> - The first column - </div> - <div class="span-16"> - The center column - </div> - <div class="span-4 last"> - The last column - </div> - - <div class="span-24"> - The footer - </div> + <div class="span-24"> + The header + </div> + + <div class="span-4"> + The first column + </div> + <div class="span-16"> + The center column + </div> + <div class="span-4 last"> + The last column + </div> + + <div class="span-24"> + The footer + </div> </div> </pre> - -In addition to the spans, there are two important classes you need to know about. First of all, every Blueprint site needs to be wrapped in a div with the class @.container@, which is usually placed right after the body tag. + +In addition to the spans, there are two important classes you need to know about. First of all, every Blueprint site needs to be wrapped in a div with the class @.container@, which is usually placed right after the body tag. Second, the last column in a row (which by default has 24 columns), needs the class @.last@ to remove its left hand margin. Note, however, that each @.span-24@ don't need the @.last@ class, since these always span the entire width of the page. @@ -131,68 +131,68 @@ Here's a quick overview of the other classes you can use in to make your grid: <dt>@.border@</dt><dd>Applies a border to the right side of the column.</dd> <dt>@.colborder@</dt><dd>Appends one empty column, with a border down the middle.</dd> <dt>@.clear@</dt><dd>Makes a column drop below a row, regardless of space.</dd> - <dt>@.showgrid@</dt><dd>Add to container or column to see the grid and baseline.</dd> + <dt>@.showgrid@</dt><dd>Add to container or column to see the grid and baseline.</dd> </dl> -In this list, @x@ is a number from 1 through 23 for append/prepend and 1 through 24 for push/pull. These numbers will of course change if you set a new number of columns in the settings file. +In this list, @x@ is a number from 1 through 23 for append/prepend and 1 through 24 for push/pull. These numbers will of course change if you set a new number of columns in the settings file. Here's another example where we have four columns of equal width, with a border between the two first and the two last columns, as well as a four column gap in the middle: -<pre> - <div class="container"> - <div class="span-5 border"> - The first column - </div> - <div class="span-5 append-4"> - The second column - </div> - <div class="span-5 border"> - The third column - </div> - <div class="span-5 last"> - The fourth (last) column - </div> - </div> -</pre> +<pre> + <div class="container"> + <div class="span-5 border"> + The first column + </div> + <div class="span-5 append-4"> + The second column + </div> + <div class="span-5 border"> + The third column + </div> + <div class="span-5 last"> + The fourth (last) column + </div> + </div> +</pre> You may also nest columns to achieve the desired layout. Here's a setup where we want four rectangles with two on top and two below on the first half of the page, and one single column spanning the second half of the page: -<pre> - <div class="container"> - <div class="span-12"> - <div class="span-6"> - Top left - </div> - <div class="span-6 last"> - Top right - </div> - <div class="span-6"> - Bottom left - </div> - <div class="span-6 last"> - Bottom right - </div> - </div> - <div class="span-12 last"> - Second half of page - </div> - </div> +<pre> + <div class="container"> + <div class="span-12"> + <div class="span-6"> + Top left + </div> + <div class="span-6 last"> + Top right + </div> + <div class="span-6"> + Bottom left + </div> + <div class="span-6 last"> + Bottom right + </div> + </div> + <div class="span-12 last"> + Second half of page + </div> + </div> </pre> Try this code in your browser it it's difficult to understand what it would look like. To see more examples on how to use these classes, check out @/tests/parts/grid.html@. h2. The Scripts - + Blueprint comes with two scripts: one for compressing and customizing the CSS, and one for validating the core CSS files, which is handy if you're making changes to these files. h3. The Validator - + The validator has a fairly simple job - validate the CSS in the core BP files. The script uses a bundled version of the W3C CSS validator to accomplish this. To run it, you'll need to have Ruby installed on your machine. You can then run the script like so: @$ ruby validate.rb@. Note that there are a few validation errors shipping with Blueprint. These are known, and comes from a few CSS hacks needed to ensure consistent rendering across the vast browser field. - + h3. The Compressor - + As the files you'll include in your HTML are the compressed versions of the core CSS files, you'll have to recompress the core if you've made any changes. This is what the compressor script is for. In addition this is where you customize the grid. To customize the grid, a special settings file is used, and the new CSS is generated once you run the compressor. The new compressed files will then reflect your settings file. @@ -200,7 +200,7 @@ In addition this is where you customize the grid. To customize the grid, a speci To recompress, you just have to run the script. This will parse the core CSS files and output new compressed files in the blueprint folder. As with the validator, Ruby has to be installed to use this script. In the @lib@ directory, run: @$ruby compress.rb@ Calling this file by itself will pull files from @blueprint/src@ and concatenate them into three files; @ie.css@, @print.css@, and @screen.css@. However, argument variables can be set to change how this works. Calling @$ruby compress.rb -h@ will reveal basic arguments you can pass to the script. - + h3. Custom Settings -To learn how to use custom settings, read through the documentation within @lib/compress.rb@ \ No newline at end of file +To learn how to use custom settings, read through the documentation within @lib/compress.rb@ TUTORIAL.textile @@ -3,24 +3,24 @@ module Blueprint # path to the root Blueprint directory ROOT_PATH = File.join(File.expand_path(File.dirname(__FILE__)), "../../") # path to where the Blueprint CSS files are stored - BLUEPRINT_ROOT_PATH = File.join(Blueprint::ROOT_PATH, 'blueprint') + BLUEPRINT_ROOT_PATH = File.join(Blueprint::ROOT_PATH, "blueprint") # path to where the Blueprint CSS raw CSS files are stored - SOURCE_PATH = File.join(Blueprint::BLUEPRINT_ROOT_PATH, 'src') + SOURCE_PATH = File.join(Blueprint::BLUEPRINT_ROOT_PATH, "src") # path to where the Blueprint CSS generated test files are stored - TEST_PATH = File.join(Blueprint::ROOT_PATH, 'tests') + TEST_PATH = File.join(Blueprint::ROOT_PATH, "tests") # path to the root of the Blueprint scripts - LIB_PATH = File.join(Blueprint::ROOT_PATH, 'lib', 'blueprint') + LIB_PATH = File.join(Blueprint::ROOT_PATH, "lib", "blueprint") # path to where Blueprint plugins are stored - PLUGINS_PATH = File.join(Blueprint::BLUEPRINT_ROOT_PATH, 'plugins') + PLUGINS_PATH = File.join(Blueprint::BLUEPRINT_ROOT_PATH, "plugins") # settings YAML file where custom user settings are saved - SETTINGS_FILE = File.join(Blueprint::ROOT_PATH, 'lib', 'settings.yml') + SETTINGS_FILE = File.join(Blueprint::ROOT_PATH, "lib", "settings.yml") # path to validator jar file to validate generated CSS files - VALIDATOR_FILE = File.join(Blueprint::LIB_PATH, 'validate', 'css-validator.jar') + VALIDATOR_FILE = File.join(Blueprint::LIB_PATH, "validate", "css-validator.jar") # hash of compressed and source CSS files CSS_FILES = { - 'screen.css' => ['reset.css', 'typography.css', 'forms.css', 'grid.css'], - 'print.css' => ['print.css'], - 'ie.css' => ['ie.css'] + "screen.css" => ["reset.css", "typography.css", "forms.css", "grid.css"], + "print.css" => ["print.css"], + "ie.css" => ["ie.css"] } # default number of columns for Blueprint layout @@ -29,11 +29,11 @@ module Blueprint COLUMN_WIDTH = 30 # default gutter width (in pixels) for Blueprint layout GUTTER_WIDTH = 10 - + INPUT_PADDING = 5 INPUT_BORDER = 1 end Dir["#{File.join(Blueprint::LIB_PATH)}/*"].each do |file| - require "#{file}" if file =~ /\.rb$/ && file !~ /blueprint.rb/ -end \ No newline at end of file + require file if file =~ /\.rb$/ && file !~ /blueprint.rb/ +end lib/blueprint/blueprint.rb @@ -2,26 +2,26 @@ require 'yaml' require 'optparse' module Blueprint class Compressor - TEST_FILES = ['index.html', - 'parts/elements.html', - 'parts/forms.html', - 'parts/grid.html', - 'parts/sample.html'] - + TEST_FILES = ["index.html", + "parts/elements.html", + "parts/forms.html", + "parts/grid.html", + "parts/sample.html"] + attr_accessor :namespace, :custom_css, :custom_layout, :semantic_classes, :project_name, :plugins attr_reader :custom_path, :loaded_from_settings, :destination_path, :script_name - + # overridden setter method for destination_path # also sets custom_path flag on Blueprint::Compressor instance def destination_path=(path) @destination_path = path @custom_path = @destination_path != Blueprint::BLUEPRINT_ROOT_PATH end - + # constructor def initialize # set up defaults - @script_name = File.basename($0) + @script_name = File.basename($0) @loaded_from_settings = false @settings_file = Blueprint::SETTINGS_FILE self.namespace = "" @@ -31,11 +31,11 @@ module Blueprint self.custom_css = {} self.semantic_classes = {} self.plugins = [] - + self.options.parse!(ARGV) initialize_project_from_yaml(self.project_name) end - + # generates output CSS based on any args passed in # overwrites any existing CSS, as well as grid.png and tests def generate! @@ -44,10 +44,10 @@ module Blueprint generate_tests # updates HTML with custom namespaces in order to test the generated library. TODO: have tests kick out to custom location output_footer # informs the user that the CSS generation process is complete end - + def options #:nodoc:# OptionParser.new do |o| - o.set_summary_indent(' ') + o.set_summary_indent(" ") o.banner = "Usage: #{@script_name} [options]" o.define_head "Blueprint Compressor" o.separator "" @@ -71,30 +71,30 @@ module Blueprint end end - private - + private + # attempts to load output settings from settings.yml def initialize_project_from_yaml(project_name = nil) # ensures project_name is set and settings.yml is present return unless (project_name && File.exist?(@settings_file)) - + # loads yaml into hash projects = YAML::load(File.path_to_string(@settings_file)) - + if (project = projects[project_name]) # checks to see if project info is present - self.namespace = project['namespace'] || "" - self.destination_path = (self.destination_path == Blueprint::BLUEPRINT_ROOT_PATH ? project['path'] : self.destination_path) || Blueprint::BLUEPRINT_ROOT_PATH - self.custom_css = project['custom_css'] || {} - self.semantic_classes = project['semantic_classes'] || {} - 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'], :input_padding => layout['input_padding'], :input_border => layout['input_border']) + self.namespace = project["namespace"] || "" + self.destination_path = (self.destination_path == Blueprint::BLUEPRINT_ROOT_PATH ? project["path"] : self.destination_path) || Blueprint::BLUEPRINT_ROOT_PATH + self.custom_css = project["custom_css"] || {} + self.semantic_classes = project["semantic_classes"] || {} + 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"], :input_padding => layout["input_padding"], :input_border => layout["input_border"]) end @loaded_from_settings = true end end - + def generate_css_files Blueprint::CSS_FILES.each do |output_file_name, css_source_file_names| css_output_path = File.join(destination_path, output_file_name) @@ -103,41 +103,41 @@ module Blueprint # CSS file generation css_output = css_file_header # header included on all three Blueprint-generated files css_output += "\n\n" - + # Iterate through src/ .css files and compile to individual core compressed file css_source_file_names.each do |css_source_file| puts " + src/#{css_source_file}" css_output += "/* #{css_source_file} */\n" if css_source_file_names.any? - - source_options = if self.custom_layout && css_source_file == 'grid.css' + + source_options = if self.custom_layout && css_source_file == "grid.css" self.custom_layout.generate_grid_css else File.path_to_string File.join(Blueprint::SOURCE_PATH, css_source_file) end - + css_output += Blueprint::CSSParser.new(source_options, :namespace => namespace).to_s css_output += "\n" end - + # append CSS from custom files css_output = append_custom_css(css_output, output_file_name) - + #append CSS from plugins css_output = append_plugin_css(css_output, output_file_name) - + #save CSS to correct path, stripping out any extra whitespace at the end of the file File.string_to_file(css_output.rstrip, css_output_path) end # append semantic class names if set append_semantic_classes - + #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'))) + 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"))) grid_builder.generate! end end - + def append_custom_css(css, current_file_name) # check to see if a custom (non-default) location was used for output files # if custom path is used, handle custom CSS, if any @@ -146,7 +146,7 @@ module Blueprint self.custom_css[current_file_name].each do |custom_css| overwrite_path = File.join(destination_path, (custom_css || "my-#{current_file_name}")) overwrite_css = File.exists?(overwrite_path) ? File.path_to_string(overwrite_path) : "" - + # if there's CSS present, add it to the CSS output unless overwrite_css.blank? puts " + custom styles (#{custom_css})\n" @@ -154,32 +154,32 @@ module Blueprint css += CSSParser.new(overwrite_css).to_s + "\n" end end - + css end def append_plugin_css(css, current_file_name) return css unless self.plugins.any? - + plugin_css = "" - + self.plugins.each do |plugin| plugin_file_specific = File.join(Blueprint::PLUGINS_PATH, plugin, current_file_name) plugin_file_generic = File.join(Blueprint::PLUGINS_PATH, plugin, "#{plugin}.css") - + file = if File.exists?(plugin_file_specific) plugin_file_specific elsif File.exists?(plugin_file_generic) && current_file_name =~ /^screen|print/ plugin_file_generic end - + if file puts " + #{plugin} plugin\n" plugin_css += "/* #{plugin} */\n" plugin_css += CSSParser.new(File.path_to_string(file)).to_s + "\n" Dir.glob(File.join(File.dirname(file), "**", "**")).each do |cp| - short_path = cp.gsub(/#{File.dirname(file)}./ , '') + short_path = cp.gsub(/#{File.dirname(file)}./ , "") # make directory if it doesn't exist directory = File.dirname(short_path) FileUtils.mkdir_p(File.join(destination_path, directory)) unless directory == "." @@ -187,10 +187,10 @@ module Blueprint end end end - + css += plugin_css end - + def append_semantic_classes screen_output_path = File.join(self.destination_path, "screen.css") semantic_styles = SemanticClassNames.new(:namespace => self.namespace, :source_file => screen_output_path).css_from_assignments(self.semantic_classes) @@ -201,11 +201,11 @@ module Blueprint css += semantic_styles File.string_to_file(css.rstrip, screen_output_path) end - + def generate_tests puts "\n Updating namespace to \"#{namespace}\" in test files:" test_files = Compressor::TEST_FILES.map {|f| File.join(Blueprint::TEST_PATH, *f.split(/\//))} - + test_files.each do |file| puts " + #{file}" Namespace.new(file, namespace) @@ -241,7 +241,7 @@ module Blueprint puts " **" puts " #{"*" * 100}\n\n" end - + def css_file_header %(/* ----------------------------------------------------------------------- @@ -256,7 +256,7 @@ module Blueprint ----------------------------------------------------------------------- */) end - + def putsv(str) puts str if $verbose end lib/blueprint/compressor.rb @@ -1,20 +1,20 @@ 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(/(\/\*).*?(\*\/)/, '') + 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(', ', ', ') + replace self.gsub(/(\n)/, "").gsub(",", ", ").gsub(", ", ", ") end - + # remove leading whitespace, remove end whitespace def strip_side_space! - replace self.gsub(/^\s+/, '').gsub(/\s+$/, $/) + replace self.gsub(/^\s+/, "").gsub(/\s+$/, $/) end end @@ -29,11 +29,11 @@ class 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 } + File.open(path, "w") {|file| file << string } end -end \ No newline at end of file +end lib/blueprint/core_ext.rb @@ -3,7 +3,7 @@ module Blueprint class CSSParser attr_accessor :namespace attr_reader :css_output, :raw_data - + # ==== Options # * <tt>css_string</tt> String of CSS data # * <tt>options</tt> @@ -13,39 +13,39 @@ module Blueprint @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!} + 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| + 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!} + property, value = key_val_pair.split(":", 2).map{|kv| kv.strip_side_space!} break unless property && value rules << "#{property}:#{value};" end @@ -56,9 +56,9 @@ module Blueprint end css_out end - + private - + def compress(data) @css_output = "" parse(data).flatten.sort_by {|i| i[:idx]}.each do |line| lib/blueprint/css_parser.rb @@ -1,17 +1,17 @@ -require 'erb' +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') - + 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 @@ -21,11 +21,11 @@ module Blueprint 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 @@ -34,7 +34,7 @@ module Blueprint 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 @@ -49,23 +49,23 @@ module Blueprint @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.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 \ No newline at end of file +end lib/blueprint/custom_layout.rb @@ -9,8 +9,8 @@ } /* Use this class on any div.span / container to see the grid. */ -.showgrid { - background: url(src/grid.png); +.showgrid { + background: url(src/grid.png); } @@ -66,7 +66,7 @@ div.colborder { } -/* Use these classes on an element to push it into the +/* 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| %> @@ -84,30 +84,30 @@ next column, or to pull it into the previous column. */ -------------------------------------------------------------- */ /* In case you need to add a gutter above/below an element */ -.prepend-top { - margin-top:1.5em; +.prepend-top { + margin-top:1.5em; } -.append-bottom { - margin-bottom: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 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; + background: #ddd; color: #ddd; - clear: both; - float: none; - width: 100%; + clear: both; + float: none; + width: 100%; height: .1em; margin: 0 0 1.45em; - border: none; + border: none; } hr.space { @@ -121,12 +121,12 @@ hr.space { [http://www.positioniseverything.net/easyclearing.html] */ .clearfix:after, .container:after { - content: "\0020"; - display: block; - height: 0; - clear: both; + content: "\0020"; + display: block; + height: 0; + clear: both; visibility: hidden; - overflow:hidden; + overflow:hidden; } .clearfix, .container {display: block;} lib/blueprint/grid.css.erb @@ -1,7 +1,7 @@ begin - require 'rubygems' - gem 'rmagick' - require 'rvg/rvg' + require "rubygems" + gem "rmagick" + require "rvg/rvg" rescue Exception => e end @@ -27,7 +27,7 @@ module Blueprint @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 @@ -36,7 +36,7 @@ module Blueprint 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.background_fill = "white" canvas.g do |column| column.rect(self.column_width - 1, height).styles(:fill => "#e8effb") @@ -46,7 +46,7 @@ module Blueprint 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 lib/blueprint/grid_builder.rb @@ -1,6 +1,6 @@ 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) @@ -9,30 +9,30 @@ module Blueprint 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) + def add_namespace(html, namespace) html.gsub!(/(class=")([a-zA-Z0-9\-_ ]*)(")/) do |m| - classes = m.to_s.split('"')[1].split(' ') + 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.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 || '' + current_namespace || "" end end -end \ No newline at end of file +end lib/blueprint/namespace.rb @@ -3,7 +3,7 @@ module Blueprint 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 @@ -11,22 +11,22 @@ module Blueprint # * <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') + @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 div.span-24', '#header' => '.span-24 div.span-24') assignments.each do |semantic_class, blueprint_classes| # gathers all BP classes we're going to be mimicing @@ -37,15 +37,15 @@ module Blueprint 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| @@ -54,4 +54,4 @@ module Blueprint css end end -end \ No newline at end of file +end lib/blueprint/semantic_class_names.rb @@ -2,7 +2,7 @@ module Blueprint # Validates generated CSS against the W3 using Java class Validator attr_reader :error_count - + def initialize @error_count = 0 end @@ -11,21 +11,21 @@ module Blueprint def validate java_path = `which java`.rstrip raise "You do not have a Java installed, but it is required." if java_path.blank? - + output_header - + Blueprint::CSS_FILES.keys.each do |file_name| css_output_path = File.join(Blueprint::BLUEPRINT_ROOT_PATH, file_name) puts "\n\n Testing #{css_output_path}" puts " Output ============================================================\n\n" @error_count += 1 if !system("#{java_path} -jar '#{Blueprint::VALIDATOR_FILE}' -e '#{css_output_path}'") end - + output_footer end - + private - + def output_header puts "\n\n" puts " ************************************************************" @@ -46,4 +46,4 @@ module Blueprint puts " ************************************************************" end end -end \ No newline at end of file +end lib/blueprint/validator.rb @@ -2,55 +2,55 @@ require File.join(File.dirname(__FILE__), "blueprint", "blueprint") # **Basic -# +# # Calling this file by itself will pull files from blueprint/src and concatenate them into three files; ie.css, print.css, and screen.css. -# +# # ruby compress.rb -# +# # However, argument variables can be set to change how this works. -# +# # Calling -# +# # ruby compress.rb -h -# +# # will reveal basic arguments you can pass to the compress.rb file. -# +# # **Custom Settings -# +# # To use custom settings, the file need to be stored in settings.yml within this directory. An example YAML file has been included. -# -# Another ability is to use YAML (spec is at http://www.yaml.org/spec/1.1/) for project settings in a predefined structure and -# store all pertinent information there. The YAML file has multiple keys (usually a named project) with a set of data that defines +# +# Another ability is to use YAML (spec is at http://www.yaml.org/spec/1.1/) for project settings in a predefined structure and +# store all pertinent information there. The YAML file has multiple keys (usually a named project) with a set of data that defines # that project. A sample structure can be found in settings.example.yml. -# +# # The basic structure is this: -# +# # Root nodes are project names. You use these when calling compress.rb as such: -# +# # ruby compress.rb -p PROJECTNAME -# +# # A sample YAML with only roots and output paths would look like this: -# +# # project1: # path: /path/to/my/project/stylesheets # project2: # path: /path/to/different/stylesheets # project3: # path: /path/to/another/projects/styles -# +# # You can then call -# +# # ruby compress.rb -p project1 -# -# or -# +# +# or +# # ruby compress.rb -p project3 -# -# This would compress and export Blueprints CSS to the respective directory, checking for my-(ie|print|screen).css and +# +# This would compress and export Blueprints CSS to the respective directory, checking for my-(ie|print|screen).css and # appending it if present -# +# # A more advanced structure would look like this: -# +# # project1: # path: /path/to/my/project/stylesheets # namespace: custom-namespace-1- @@ -84,33 +84,33 @@ require File.join(File.dirname(__FILE__), "blueprint", "blueprint") # - validations # project3: # path: /path/to/another/projects/styles -# -# In a structure like this, a lot more assignment is occurring. Custom namespaces are being set for two projects, while +# +# In a structure like this, a lot more assignment is occurring. Custom namespaces are being set for two projects, while # the third (project3) is just a simple path setting. -# -# Also, custom CSS is being used that is appended at the end of its respective file. So, in project1, print.css will have docs.css +# +# Also, custom CSS is being used that is appended at the end of its respective file. So, in project1, print.css will have docs.css # and my-print-styles.css instead of the default my-print.css. Note that these files are relative to the path that you defined above; # you can use subdirectories from the default path if you would like. -# -# Another thing to note here is the custom_layout; if not defined, your generated CSS will default to the 24 column, 950px wide grid that -# has been standard with Blueprint for quite some time. However, you can specify a custom grid setup if you would like. The three options -# are column_count (the number of columns you want your grid to have), column width (the width in pixels that you want your columns to be), and -# gutter_width (the width in pixels you want your gutters - space between columns - to be). To use the Blueprint default, do not define this +# +# Another thing to note here is the custom_layout; if not defined, your generated CSS will default to the 24 column, 950px wide grid that +# has been standard with Blueprint for quite some time. However, you can specify a custom grid setup if you would like. The three options +# are column_count (the number of columns you want your grid to have), column width (the width in pixels that you want your columns to be), and +# gutter_width (the width in pixels you want your gutters - space between columns - to be). To use the Blueprint default, do not define this # in your settings file. -# +# # Semantic classes are still in the works within Blueprint, but a simple implementation has been created. -# +# # Defining semantic_classes, with nodes underneath, will generate a class for each node which has rules of each class assigned to it. For example, -# in project2 above, for '#footer, #header', elements with id's of footer and header will be assigned all the rules from the -# classes 'span-24, column, and last', while divs with classes either entry or section, as well as any element with class of feed, is +# in project2 above, for '#footer, #header', elements with id's of footer and header will be assigned all the rules from the +# classes 'span-24, column, and last', while divs with classes either entry or section, as well as any element with class of feed, is # assigned all the rules from 'span-6 and column'. Although it is a crude way do accomplish this, it keeps the generated CSS separate from the core BP CSS. -# -# Also supported is plugins. The compressor looks within BLUEPRINT_DIR/blueprint/plugins to match against what's passed. If the plugin name +# +# Also supported is plugins. The compressor looks within BLUEPRINT_DIR/blueprint/plugins to match against what's passed. If the plugin name # matches, it will append PLUGIN/(screen|print|ie).css to the corresponding CSS file. It will append the plugin CSS to all three CSS files if # there is a CSS file present named as the plugin (e.g. the fancy-type plugin with a fancy-type.css file found within the plugin directory) -# +# # In Ruby, the structure would look like this: -# +# # { # 'project1' => { # 'path' => '/path/to/my/project/stylesheets', @@ -146,4 +146,4 @@ require File.join(File.dirname(__FILE__), "blueprint", "blueprint") # } # } -Blueprint::Compressor.new.generate! \ No newline at end of file +Blueprint::Compressor.new.generate! lib/compress.rb @@ -3,13 +3,13 @@ require 'blueprint/blueprint' require 'blueprint/validator' -# This script will validate the core Blueprint files. -# -# The files are not completely valid. This has to do -# with a small number of CSS hacks needed to ensure +# This script will validate the core Blueprint files. +# +# The files are not completely valid. This has to do +# with a small number of CSS hacks needed to ensure # consistent rendering across browsers. # # To add your own CSS files for validation, see # /lib/blueprint/validator.rb -Blueprint::Validator.new.validate \ No newline at end of file +Blueprint::Validator.new.validate lib/validate.rb e9e91bb94a0f498e63359556b2301cfd18400377 Joshua Clayton jclayton@fusionary.com http://github.com/joshuaclayton/blueprint-css/commit/862b37486efd4cf62d8f8dc4de682624525cbaeb 862b37486efd4cf62d8f8dc4de682624525cbaeb 2009-07-02T19:45:05-07:00 2009-07-02T19:45:05-07:00 Whitespace cleanup 549a351f531884fa0d5388ba6365e9494129fbff Joshua Clayton jclayton@fusionary.com