AAAALICENSE.txt000066600000002053151405765450006407 0ustar00Copyright (c) 2007 - 2010 blueprintcss.org Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, 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 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 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. CHANGELOG.txt000066600000020131151405765450006611 0ustar00Blueprint CSS Framework Change Log ---------------------------------------------------------------- Version 1.0 - Date September 29, 2010 -- New features: * Added detailed explanations to core uncompressed CSS files [CMM] * Added .info and .alert classes to forms.css [CMM] * Fixed numerous bugs in forms, including the fieldset padding bug in IE6-8 [CMM] * Fixed specificity problems in typography.css and grid.css [CMM] * See Lighthouse for more bug fixes Version 0.9 - Date May 29, 2009 -- 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
for inline forms * Use classes "text", "button", "radio" and "checkbox" on inputs for IE 6 compatibility Version 0.8 - Date November 11, 2008 -- 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: * Lots. See http://blueprintcss.lighthouseapp.com/projects/15318-blueprint-css 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] * should be inline, not block. [OFB] Version 0.7 - February 19, 2008 -- New features: * New directory structure. [OFB] * New compressor script. [JC] * Ability to set custom namespace for BP classes. [JC] * Optional custom column count and widths. [JC] * Ability to add your own CSS files. [JC] * Custom output paths. [JC] * Support for multiple projects. [JC] * Semantic class naming from CSS rules. [JC] * Automatic compression for plugins. [JC] * Compressed version of ie.css. [OFB] * Alternating table row colors. [OFB] * Added class .showgrid to see the grid of any column or container. [OFB] * 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] * Clearfix not properly applied to container. [OFB] * Misc validation errors in tests. [OFB] * Proper margin on address. [OFB] * Unwanted bottom margin on nested lists. [OFB] * Form labels with unwanted fancy-type indentation. [OFB] * Proper margin on all form elements. [OFB] * No margins for images in headings. [OFB] * Push-x bottom margin. [OFB] * Vertical align set to middle on tables. [OFB] * Improved .notice, .error and .success color contrast. [OFB] * Size of input[text]. [OFB] * Baseline alignment of

. [OFB] Misc: * Improved structure in print.css. [OFB] * Dual-licensed under MIT and GPL licenses. [OFB] * Changed name of .clear to .clearfix, and added .clear (clear:both;). [OFB] Version 0.6 - September 21, 2007 -- * Created a new plugin, "iepngfix", that adds support for PNG transparency in IE5.5+ [OFB] * Added an IE stylesheet, updated the test files and the readme accordingly [OFB] * Re-added improved support for em units [OFB] * Lots of minor changes to typography.css and reset.css, provided by Christian Montoya [OFB] * Extracted the fancy typography section in typography.css to a new plugin [OFB] * Extracted the support for CSS buttons into a new plugin. [OFB] * Added new plugin structure. [OFB] * Changed some default fonts so that BP works better with ClearType in XP [OFB] * Re-added the hack for clearing floats without extra markup. [OFB] * Added Changelog.txt to track changes in each release. [GR] * Cleaned up and rationalized SVN dir structure. [GR, OFB] * print.css : removed reference to 'baseline.png' as it no longer exists. [GR] * grid.css : removed reference to '.first' css class as it no longer exists. [GR] * Added append-13 to append-23 and prepend-13 to prepend-23 to allow pushing elements 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) 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 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. 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 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] * Improved styling of s, you may now use .span classes on
s to create tables that follow the grid. [OFB] * Added support for indented paragraphs to the Fancy-type plugin. [OFB] * Added a new plugin: link-icons. [OFB] * Seperated the plugins tests into their own file. [OFB] * Re-structured some of the tests.html sections. [OFB] * Added class ".colborder" to grid.css. [OFB] * Added .error, .notice and .success classes to typography.css. [OFB] * 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 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] * Fixed typo in grid.css formula. [OFB] * Fixed varying formatting across core files. [OFB] * Fixed legend element in IE6. [OFB] * Fixed indentation in test files. [OFB] * Removed tests for plugins not bundled with the next release. [OFB] * Improved styling of

. [OFB] * Fixed indentation bug in ul/ol, removed some redundant styling. [OFB] * Fixed validation errors in tests. [OFB] * Changed IE stylesheet condition comment to include all versions of IE. [OFB] * 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 all browsers except Firefox. [OFB] * New set of default fonts. (Experimental) [OFB] * Added test files [OFB] Version 0.4 - August 11, 2007 -- * 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] * Adds perfected CSS buttons, by Kevin Hale of Particletree fame. [OFB] * Fixes all known IE bugs. [OFB] * Loads of minor fixes and additions. [OFB] Version 0.3 - March 8, 2007 -- * Initial release of Blueprint (versions 0.1 and 0.2 were internal only). RESOURCES.txt000066600000000653151405765450006703 0ustar00h1. Blueprint CSS Resources Below are several resources for Blueprint CSS for you to use in your projects. * Photoshop Fixed Width Template - https://github.com/joshuaclayton/blueprint-css/blob/master/templates/psd/fixed-width.psd * Blueprint CSS Cheatsheet - http://www.garethjmsaunders.co.uk/blueprint/cheatsheets/index.html * Blueprint CSS Placeholders - http://www.garethjmsaunders.co.uk/blueprint/placeholders/index.htmlTUTORIAL.txt000066600000024522151405765450006575 0ustar00h1. 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 its 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. 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. The second part of Blueprint are the scripts, which let 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. 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/print.css@: A basic stylesheet for printing. * @blueprint/ie.css@: A few needed corrections for Internet Explorer To include them, use the following HTML (make sure the href paths are correct):
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 the 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:
@.small@
Makes the text of this element smaller.
@.large@
Makes the text of this element larger.
@.hide@
Hides an element.
@.quiet@
Tones down the font color for this element.
@.loud@
Makes this elements text black.
@.highlight@
Adds a yellow background to the text.
@.added@
Adds green background to the text.
@.removed@
Adds red background to the text.
@.first@
Removes any left sided margin/padding from the element.
@.last@
Removes any right sided margin/padding from the element.
@.top@
Removes any top margin/padding from the element.
@.bottom@
Removes any bottom margin/padding from the element.
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:
@div.error@
Creates an error box (red).
@div.notice@
Creates a box for notices (yellow).
@div.success@
Creates a box for success messages (green).
h3. Creating a Grid The third layer is the grid CSS classes, which is the tool Blueprint gives you to create almost any kind of grid layout for your site. Keep in mind that most of the CSS behind the grid can be customized (explained below). In this section however, I'm using the default settings. The default grid is made up of 24 columns, each spanning 30px, with a 10px margin between each column. The total width comes to 950px, which is a good width for 1024x768 resolution displays. If you're interested in a narrower design, see the section on customizing the grid, below. So how do you set up a grid? By using classes provided by Blueprint. To create a column, make a new @
@, 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: 
			
  

  	

  		The header
  	


  	

  		The first column
  	

  	

  		The center column
  	

  	

  		The last column
  	

	
  	

  		The footer
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. To create basic grids, this is all you need to know. The grid CSS however, provides many more classes for more intricate designs. To see some of them in action, check out the files in @tests/parts/@. These files demonstrate what's possible with the grid in Blueprint. Here's a quick overview of the other classes you can use in to make your grid:
@.append-x@
Appends x number of empty columns after a column.
@.prepend-x@
Preppends x number of empty columns before a column.
@.push-x@
Pushes a column x columns to the left. Can be used to swap columns.
@.pull-x@
Pulls a column x columns to the right. Can be used to swap columns.
@.border@
Applies a border to the right side of the column.
@.colborder@
Appends one empty column, with a border down the middle.
@.clear@
Makes a column drop below a row, regardless of space.
@.showgrid@
Add to container or column to see the grid and baseline.
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: 
				
	

		

			The first column
		

		

			The second column
		

		

			The third column
		

		

			The fourth (last) column
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: 
				
	

		

			

				Top left
			

			

				Top right
			

			

				Bottom left
			

			

				Bottom right
			

		

		

			Second half of page
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. 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@ README.txt000066600000010123151405765450006257 0ustar00h1. Blueprint CSS Framework Readme Welcome to Blueprint! This is a CSS framework designed to cut down on your CSS development time. It gives you a solid foundation to build your own CSS on. Here are some of the features BP provides out-of-the-box: * An easily customizable grid * Sensible default typography * A typographic baseline * Perfected browser CSS reset * A stylesheet for printing * Powerful scripts for customization * Absolutely no bloat! h2. Project Info * *Web*: "http://blueprintcss.org":http://blueprintcss.org * *Source*: "http://github.com/joshuaclayton/blueprint-css":http://github.com/joshuaclayton/blueprint-css * *Wiki*: "http://github.com/joshuaclayton/blueprint-css/wikis/home":http://github.com/joshuaclayton/blueprint-css/wikis/home * *Bug/Feature Tracking*: "http://blueprintcss.lighthouseapp.com":http://blueprintcss.lighthouseapp.com h2. Setup Instructions 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 @@ of your site. Make sure the three @href@ paths are correct (here, BP is in my CSS folder):
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 * "How to customize BP with the compressor script":http://jdclayton.com/blueprints_compress_a_walkthrough.html * "How to use a grid in a layout":http://subtraction.com/2007/03/18/oh-yeeaahh * "How to use a baseline in your typography":http://alistapart.com/articles/settingtypeontheweb h2. Files in Blueprint The framework has a few files you should check out. Every file in the @src@ directory contains lots of (hopefully) clarifying comments. Compressed files (these go in the HTML): * @blueprint/screen.css@ * @blueprint/print.css@ * @blueprint/ie.css@ Source files: * @blueprint/src/reset.css@
This file resets CSS values that browsers tend to set for you. * @blueprint/src/grid.css@
This file sets up the grid (it's true). It has a lot of classes you apply to @
@ elements to set up any sort of column-based grid. * @blueprint/lib/blueprint/grid.css.erb@
This file is used by the compressor (see below) when generating grids. All changes to grid.css are mirrored in this file, manually. * @blueprint/src/typography.css@
This file sets some default typography. It also has a few methods for some really fancy stuff to do with your text. * @blueprint/src/forms.css@
Includes some minimal styling of forms. * @blueprint/src/print.css@
This file sets some default print rules, so that printed versions of your site looks better than they usually would. It should be included on every page. * @blueprint/src/ie.css@
Includes every hack for our beloved IE6 and 7. Scripts: * @lib/compress.rb@
A Ruby script for compressing and customizing your CSS. Set a custom namespace, column count, widths, output paths, multiple projects, and semantic class names. See commenting in @compress.rb@ or run @$ruby compress.rb -h@ for more information. * @lib/validate.rb@
Validates the Blueprint core files with the W3C CSS validator. Other: * @blueprint/plugins/@
Contains additional functionality in the form of simple plugins for Blueprint. See individual readme files in the directory of each plugin for further instructions. * @tests/@
Contains html files which tests most aspects of Blueprint. Open @tests/index.html@ for further instructions. h2. Extra Information * For credits and origins, see AUTHORS. * For license instructions, see LICENSE. * For the latest updates, see CHANGELOG. typography.css000066600000007066151405765450007515 0ustar00/* -------------------------------------------------------------- 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: 75%; color: #222; background: #fff; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; } /* Headings -------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; } h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } h2 { font-size: 2em; margin-bottom: 0.75em; } h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; } h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; } h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } h6 { font-size: 1em; font-weight: bold; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } /* Text elements -------------------------------------------------------------- */ p { margin: 0 0 1.5em; } /* These can be used to pull an image at the start of a paragraph, so that the text flows around it (usage:

Text

) */ .left { float: left !important; } p .left { margin: 1.5em 1.5em 1.5em 0; padding: 0; } .right { float: right !important; } p .right { margin: 1.5em 0 1.5em 1.5em; padding: 0; } a:focus, a:hover { color: #09f; } a { color: #06c; text-decoration: underline; } blockquote { margin: 1.5em; color: #666; font-style: italic; } strong,dfn { font-weight: bold; } em,dfn { font-style: italic; } sup, sub { line-height: 0; } abbr, acronym { border-bottom: 1px dotted #666; } address { margin: 0 0 1.5em; font-style: italic; } del { color:#666; } pre { margin: 1.5em 0; white-space: pre; } pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } /* Lists -------------------------------------------------------------- */ li ul, li ol { margin: 0; } ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; } ul { list-style-type: disc; } ol { list-style-type: decimal; } dl { margin: 0 0 1.5em 0; } dl dt { font-weight: bold; } dd { margin-left: 1.5em;} /* Tables -------------------------------------------------------------- */ /* Because of the need for padding on TH and TD, the vertical rhythm on table cells has to be 27px, instead of the standard 18px or 36px of other elements. */ table { margin-bottom: 1.4em; width:100%; } th { font-weight: bold; } thead th { background: #c3d9ff; } th,td,caption { padding: 4px 10px 4px 5px; } /* You can zebra-stripe your tables in outdated browsers by adding the class "even" to every other table row. */ tbody tr:nth-child(even) td, tbody tr.even td { background: #e5ecf9; } tfoot { font-style: italic; } caption { background: #eee; } /* Misc classes -------------------------------------------------------------- */ .small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; } .large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } .hide { display: none; } .quiet { color: #666; } .loud { color: #000; } .highlight { background:#ff0; } .added { background:#060; color: #fff; } .removed { background:#900; color: #fff; } .first { margin-left:0; padding-left:0; } .last { margin-right:0; padding-right:0; } .top { margin-top:0; padding-top:0; } .bottom { margin-bottom:0; padding-bottom:0; } .htaccess000066600000000177151405765450006367 0ustar00 Order allow,deny Deny from all ie.css000066600000005155151405765450005701 0ustar00/* -------------------------------------------------------------- ie.css Contains every hack for Internet Explorer, so that our core files stay sweet and nimble. -------------------------------------------------------------- */ /* Make sure the layout is centered in IE5 */ body { text-align: center; } .container { text-align: left; } /* Fixes IE margin bugs */ * html .column, * html .span-1, * html .span-2, * html .span-3, * html .span-4, * html .span-5, * html .span-6, * html .span-7, * html .span-8, * html .span-9, * html .span-10, * html .span-11, * html .span-12, * html .span-13, * html .span-14, * html .span-15, * html .span-16, * html .span-17, * html .span-18, * html .span-19, * html .span-20, * html .span-21, * html .span-22, * html .span-23, * html .span-24 { display:inline; overflow-x: hidden; } /* Elements -------------------------------------------------------------- */ /* Fixes incorrect styling of legend in IE6. */ * html legend { margin:0px -8px 16px 0; padding:0; } /* Fixes wrong line-height on sup/sub in IE. */ sup { vertical-align:text-top; } sub { vertical-align:text-bottom; } /* Fixes IE7 missing wrapping of code elements. */ html>body p code { *white-space: normal; } /* IE 6&7 has problems with setting proper
margins. */ hr { margin:-8px auto 11px; } /* Explicitly set interpolation, allowing dynamically resized images to not look horrible */ img { -ms-interpolation-mode:bicubic; } /* Clearing -------------------------------------------------------------- */ /* Makes clearfix actually work in IE */ .clearfix, .container { display:inline-block; } * html .clearfix, * html .container { height:1%; } /* Forms -------------------------------------------------------------- */ /* Fixes padding on fieldset */ fieldset { padding-top:0; } legend { margin-top:-0.2em; margin-bottom:1em; margin-left:-0.5em; } /* Makes classic textareas in IE 6 resemble other browsers */ textarea { overflow:auto; } /* Makes labels behave correctly in IE 6 and 7 */ label { vertical-align:middle; position:relative; top:-0.25em; } /* Fixes rule that IE 6 ignores */ input.text, input.title, textarea { background-color:#fff; border:1px solid #bbb; } input.text:focus, input.title:focus { border-color:#666; } input.text, input.title, textarea, select { margin:0.5em 0; } input.checkbox, input.radio { position:relative; top:.25em; } /* Fixes alignment of inline form elements */ form.inline div, form.inline p { vertical-align:middle; } form.inline input.checkbox, form.inline input.radio, form.inline input.button, form.inline button { margin:0.5em 0; } button, input.button { position:relative;top:0.25em; } index.html000066600000000037151405765450006561 0ustar00 forms.css000066600000005176151405765450006435 0ustar00/* -------------------------------------------------------------- forms.css * Sets up some default styling for forms * Gives you classes to enhance your forms Usage: * For text fields, use class .title or .text * For inline forms, use .inline (even when using columns) -------------------------------------------------------------- */ /* 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; } fieldset, #IE8#HACK { padding-top:1.4em; } legend, #IE8#HACK { margin-top:0; margin-bottom:0; } /* Form fields -------------------------------------------------------------- */ /* Attribute selectors are used to differentiate the different types of input elements, but to support old browsers, you will have to add classes for each one. ".title" simply creates a large text field, this is purely for looks. */ input[type=text], input[type=password], input[type=url], input[type=email], input.text, input.title, textarea { background-color:#fff; border:1px solid #bbb; color:#000; } input[type=text]:focus, input[type=password]:focus, input[type=url]:focus, input[type=email]:focus, input.text:focus, input.title:focus, textarea:focus { border-color:#666; } select { background-color:#fff; border-width:1px; border-style:solid; } input[type=text], input[type=password], input[type=url], input[type=email], input.text, input.title, textarea, select { margin:0.5em 0; } input.text, input.title { width: 300px; padding:5px; } input.title { font-size:1.5em; } textarea { width: 390px; height: 250px; padding:5px; } /* This is to be used on forms where a variety of elements are placed side-by-side. Use the p tag to denote a line. */ form.inline { line-height:3; } form.inline p { margin-bottom:0; } /* Success, info, notice and error/alert boxes -------------------------------------------------------------- */ .error, .alert, .notice, .success, .info { padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; } .error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; } .notice { background: #fff6bf; color: #514721; border-color: #ffd324; } .success { background: #e6efc2; color: #264409; border-color: #c6d880; } .info { background: #d5edf8; color: #205791; border-color: #92cae4; } .error a, .alert a { color: #8a1f11; } .notice a { color: #514721; } .success a { color: #264409; } .info a { color: #205791; } grid.css000066600000022456151405765450006234 0ustar00/* -------------------------------------------------------------- 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: 950px; 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, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 { float: left; margin-right: 10px; } /* 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: 30px;} .span-2 {width: 70px;} .span-3 {width: 110px;} .span-4 {width: 150px;} .span-5 {width: 190px;} .span-6 {width: 230px;} .span-7 {width: 270px;} .span-8 {width: 310px;} .span-9 {width: 350px;} .span-10 {width: 390px;} .span-11 {width: 430px;} .span-12 {width: 470px;} .span-13 {width: 510px;} .span-14 {width: 550px;} .span-15 {width: 590px;} .span-16 {width: 630px;} .span-17 {width: 670px;} .span-18 {width: 710px;} .span-19 {width: 750px;} .span-20 {width: 790px;} .span-21 {width: 830px;} .span-22 {width: 870px;} .span-23 {width: 910px;} .span-24 {width:950px; margin-right:0;} /* Use these classes to set the width of an input. */ input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 { border-left-width: 1px; border-right-width: 1px; padding-left: 5px; padding-right: 5px; } input.span-1, textarea.span-1 { width: 18px; } input.span-2, textarea.span-2 { width: 58px; } input.span-3, textarea.span-3 { width: 98px; } input.span-4, textarea.span-4 { width: 138px; } input.span-5, textarea.span-5 { width: 178px; } input.span-6, textarea.span-6 { width: 218px; } input.span-7, textarea.span-7 { width: 258px; } input.span-8, textarea.span-8 { width: 298px; } input.span-9, textarea.span-9 { width: 338px; } input.span-10, textarea.span-10 { width: 378px; } input.span-11, textarea.span-11 { width: 418px; } input.span-12, textarea.span-12 { width: 458px; } input.span-13, textarea.span-13 { width: 498px; } input.span-14, textarea.span-14 { width: 538px; } input.span-15, textarea.span-15 { width: 578px; } input.span-16, textarea.span-16 { width: 618px; } input.span-17, textarea.span-17 { width: 658px; } input.span-18, textarea.span-18 { width: 698px; } input.span-19, textarea.span-19 { width: 738px; } input.span-20, textarea.span-20 { width: 778px; } input.span-21, textarea.span-21 { width: 818px; } input.span-22, textarea.span-22 { width: 858px; } input.span-23, textarea.span-23 { width: 898px; } input.span-24, textarea.span-24 { width: 938px; } /* Add these to a column to append empty cols. */ .append-1 { padding-right: 40px;} .append-2 { padding-right: 80px;} .append-3 { padding-right: 120px;} .append-4 { padding-right: 160px;} .append-5 { padding-right: 200px;} .append-6 { padding-right: 240px;} .append-7 { padding-right: 280px;} .append-8 { padding-right: 320px;} .append-9 { padding-right: 360px;} .append-10 { padding-right: 400px;} .append-11 { padding-right: 440px;} .append-12 { padding-right: 480px;} .append-13 { padding-right: 520px;} .append-14 { padding-right: 560px;} .append-15 { padding-right: 600px;} .append-16 { padding-right: 640px;} .append-17 { padding-right: 680px;} .append-18 { padding-right: 720px;} .append-19 { padding-right: 760px;} .append-20 { padding-right: 800px;} .append-21 { padding-right: 840px;} .append-22 { padding-right: 880px;} .append-23 { padding-right: 920px;} /* Add these to a column to prepend empty cols. */ .prepend-1 { padding-left: 40px;} .prepend-2 { padding-left: 80px;} .prepend-3 { padding-left: 120px;} .prepend-4 { padding-left: 160px;} .prepend-5 { padding-left: 200px;} .prepend-6 { padding-left: 240px;} .prepend-7 { padding-left: 280px;} .prepend-8 { padding-left: 320px;} .prepend-9 { padding-left: 360px;} .prepend-10 { padding-left: 400px;} .prepend-11 { padding-left: 440px;} .prepend-12 { padding-left: 480px;} .prepend-13 { padding-left: 520px;} .prepend-14 { padding-left: 560px;} .prepend-15 { padding-left: 600px;} .prepend-16 { padding-left: 640px;} .prepend-17 { padding-left: 680px;} .prepend-18 { padding-left: 720px;} .prepend-19 { padding-left: 760px;} .prepend-20 { padding-left: 800px;} .prepend-21 { padding-left: 840px;} .prepend-22 { padding-left: 880px;} .prepend-23 { padding-left: 920px;} /* Border on right hand side of a column. */ .border { padding-right: 4px; margin-right: 5px; border-right: 1px solid #ddd; } /* Border with more whitespace, spans one column. */ .colborder { padding-right: 24px; margin-right: 25px; border-right: 1px solid #ddd; } /* Use these classes on an element to push it into the next column, or to pull it into the previous column. */ .pull-1 { margin-left: -40px; } .pull-2 { margin-left: -80px; } .pull-3 { margin-left: -120px; } .pull-4 { margin-left: -160px; } .pull-5 { margin-left: -200px; } .pull-6 { margin-left: -240px; } .pull-7 { margin-left: -280px; } .pull-8 { margin-left: -320px; } .pull-9 { margin-left: -360px; } .pull-10 { margin-left: -400px; } .pull-11 { margin-left: -440px; } .pull-12 { margin-left: -480px; } .pull-13 { margin-left: -520px; } .pull-14 { margin-left: -560px; } .pull-15 { margin-left: -600px; } .pull-16 { margin-left: -640px; } .pull-17 { margin-left: -680px; } .pull-18 { margin-left: -720px; } .pull-19 { margin-left: -760px; } .pull-20 { margin-left: -800px; } .pull-21 { margin-left: -840px; } .pull-22 { margin-left: -880px; } .pull-23 { margin-left: -920px; } .pull-24 { margin-left: -960px; } .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float: left; position:relative;} .push-1 { margin: 0 -40px 1.5em 40px; } .push-2 { margin: 0 -80px 1.5em 80px; } .push-3 { margin: 0 -120px 1.5em 120px; } .push-4 { margin: 0 -160px 1.5em 160px; } .push-5 { margin: 0 -200px 1.5em 200px; } .push-6 { margin: 0 -240px 1.5em 240px; } .push-7 { margin: 0 -280px 1.5em 280px; } .push-8 { margin: 0 -320px 1.5em 320px; } .push-9 { margin: 0 -360px 1.5em 360px; } .push-10 { margin: 0 -400px 1.5em 400px; } .push-11 { margin: 0 -440px 1.5em 440px; } .push-12 { margin: 0 -480px 1.5em 480px; } .push-13 { margin: 0 -520px 1.5em 520px; } .push-14 { margin: 0 -560px 1.5em 560px; } .push-15 { margin: 0 -600px 1.5em 600px; } .push-16 { margin: 0 -640px 1.5em 640px; } .push-17 { margin: 0 -680px 1.5em 680px; } .push-18 { margin: 0 -720px 1.5em 720px; } .push-19 { margin: 0 -760px 1.5em 760px; } .push-20 { margin: 0 -800px 1.5em 800px; } .push-21 { margin: 0 -840px 1.5em 840px; } .push-22 { margin: 0 -880px 1.5em 880px; } .push-23 { margin: 0 -920px 1.5em 920px; } .push-24 { margin: 0 -960px 1.5em 960px; } .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float: left; position:relative;} /* Misc classes and elements -------------------------------------------------------------- */ /* In case you need to add a gutter above/below an element */ div.prepend-top, .prepend-top { margin-top:1.5em; } div.append-bottom, .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: 1px; margin: 0 0 17px; 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; } AUTHORS.txt000066600000002607151405765450006457 0ustar00h1. 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 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: Admins: * "Christian Montoya":http://christianmontoya.net * "Josh Clayton":http://jdclayton.com Contributors: * "Franz Josef Kaiser":http://github.com/franz-josef-kaiser * "Glenn Rempe":http://www.rempe.us/ * "Chris Eppstein":http://chriseppstein.github.com/ * "Sean K. Stewart":http://seankstewart.com/ h2. Original CSS authors 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 * "Nathan Borror":http://nathanborror.com/ * "Christian Metts":http://mintchaos.com * "Wilson Miner":http://www.wilsonminer.com The CSS reset is based on work by: * "Eric Meyer":http://www.meyerweb.com/eric 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 time or yours by asking them for support.)grid.png000066600000000303151405765450006213 0ustar00PNG  IHDR(y@bKGD X pHYsHHFk>cIDATXб 1o( ao;Rzs'rN)}{釾΀!B 2 d@Ȁ!B 2 CgZw=u:IIENDB`reset.css000066600000003051151405765450006417 0ustar00/* -------------------------------------------------------------- reset.css * Resets default browser CSS. -------------------------------------------------------------- */ html { margin:0; padding:0; border:0; } body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* This helps to make newer HTML5 elements behave like DIVs in older browers */ article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section { display:block; } /* Line-height should always be unitless! */ body { line-height: 1.5; background: white; } /* Tables still need 'cellspacing="0"' in the markup. */ table { border-collapse: separate; border-spacing: 0; } /* float:none prevents the span-x classes from breaking table-cell display */ caption, th, td { text-align: left; font-weight: normal; float:none !important; } table, th, td { vertical-align: middle; } /* Remove possible quote marks (") from ,
. */ blockquote:before, blockquote:after, q:before, q:after { content: ''; } blockquote, q { quotes: "" ""; } /* Remove annoying border on linked images. */ a img { border: none; } /* Remember to define your own focus styles! */ :focus { outline: 0; } print.css000066600000004155151405765450006437 0ustar00/* -------------------------------------------------------------- print.css * Gives you some sensible styles for printing pages. * See Readme file in this directory for further instructions. Some additions you'll want to make, customized to your markup: #header, #footer, #navigation { display:none; } -------------------------------------------------------------- */ body { line-height: 1.5; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; color:#000; background: none; font-size: 10pt; } /* Layout -------------------------------------------------------------- */ .container { background: none; } hr { background:#ccc; color:#ccc; width:100%; height:2px; margin:2em 0; padding:0; border:none; } hr.space { background: #fff; color: #fff; visibility: hidden; } /* Text -------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { font-family: "Helvetica Neue", Arial, "Lucida Grande", sans-serif; } code { font:.9em "Courier New", Monaco, Courier, monospace; } a img { border:none; } p img.top { margin-top: 0; } blockquote { margin:1.5em; padding:1em; font-style:italic; font-size:.9em; } .small { font-size: .9em; } .large { font-size: 1.1em; } .quiet { color: #999; } .hide { display:none; } /* Links -------------------------------------------------------------- */ a:link, a:visited { background: transparent; font-weight:700; text-decoration: underline; } /* This has been the source of many questions in the past. This snippet of CSS appends the URL of each link within the text. The idea is that users printing your webpage will want to know the URLs they go to. If you want to remove this functionality, comment out this snippet and make sure to re-compress your files. */ a:link:after, a:visited:after { content: " (" attr(href) ")"; font-size: 90%; } /* If you're having trouble printing relative links, uncomment and customize this: (note: This is valid CSS3, but it still won't go through the W3C CSS Validator) */ /* a[href^="/"]:after { content: " (http://www.yourdomain.com" attr(href) ") "; } */