@@ -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 @@ -1,9 +1,9 @@ Blueprint CSS Framework License ---------------------------------------------------------------- -Copyright (c) 2007-2008 blueprintcss.org +Copyright (c) 2007-2009 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,18 +19,18 @@ 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><code> <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"> </code></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 @@ -1,13 +1,13 @@ -/* -------------------------------------------------------------- +/* -------------------------------------------------------------- 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) - + -------------------------------------------------------------- */ label { font-weight: bold; } @@ -19,15 +19,15 @@ legend { font-weight: bold; font-size:1.2em; } -------------------------------------------------------------- */ input[type=text], input[type=password], -input.text, input.title, -textarea, select { - background-color:#fff; - border:1px solid #bbb; +input.text, input.title, +textarea, select { + background-color:#fff; + border:1px solid #bbb; } -input[type=text]:focus, input[type=password]:focus, -input.text:focus, input.title:focus, -textarea:focus, select:focus { - border-color:#666; +input[type=text]:focus, input[type=password]:focus, +input.text:focus, input.title:focus, +textarea:focus, select:focus { + border-color:#666; } input[type=text], input[type=password], @@ -36,14 +36,14 @@ textarea, select { margin:0.5em 0; } -input.text, +input.text, input.title { width: 300px; padding:5px; } input.title { font-size:1.5em; } textarea { width: 390px; height: 250px; padding:5px; } -input[type=checkbox], input[type=radio], -input.checkbox, input.radio { - position:relative; top:.25em; +input[type=checkbox], input[type=radio], +input.checkbox, input.radio { + position:relative; top:.25em; } form.inline { line-height:3; } @@ -54,7 +54,7 @@ form.inline p { margin-bottom:0; } -------------------------------------------------------------- */ .error, -.notice, +.notice, .success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; } .error { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; } blueprint/src/forms.css @@ -1,17 +1,15 @@ /* -------------------------------------------------------------- + grid.css + * Sets up an easy-to-use grid of 24 columns. - 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) - - Note: Changes made in this file will not be applied when - using the compressor: make changes in lib/blueprint/grid.css.rb - + 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) + + Note: Changes made in this file will not be applied when + using the compressor: make changes in lib/blueprint/grid.css.rb -------------------------------------------------------------- */ /* A container should group all your columns. */ @@ -21,8 +19,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); } @@ -63,7 +61,7 @@ .span-21 {width: 830px;} .span-22 {width: 870px;} .span-23 {width: 910px;} -.span-24, div.span-24 { width: 950px; margin-right: 0; } +.span-24, div.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 { @@ -166,7 +164,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. */ @@ -230,34 +228,36 @@ 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 { background: #fff; color: #fff; + visibility: hidden; } @@ -266,12 +266,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;} blueprint/src/grid.css @@ -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 { @@ -122,12 +122,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 @@ -2,82 +2,82 @@ "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title>Blueprint test pages</title> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Blueprint test pages</title> -  - <link rel="stylesheet" href="../blueprint/screen.css" type="text/css" media="screen, projection"> - <link rel="stylesheet" href="../blueprint/print.css" type="text/css" media="print"> -  - <style type="text/css" media="screen"> - p, table, hr, .box { margin-bottom:25px; } - .box p { margin-bottom:10px; } - </style> -</head> -<body> +  + <link rel="stylesheet" href="../blueprint/screen.css" type="text/css" media="screen, projection"> + <link rel="stylesheet" href="../blueprint/print.css" type="text/css" media="print"> +  + <style type="text/css" media="screen"> + p, table, hr, .box { margin-bottom:25px; } + .box p { margin-bottom:10px; } + </style> + </head> + <body> - <div class="container"> - <h1>Blueprint test pages</h1> - <hr> - - <p>Welcome to the Blueprint test pages. The HTML files below tests most HTML elements, and especially classes provided + <div class="container"> + <h1>Blueprint test pages</h1> + <hr> + + <p>Welcome to the Blueprint test pages. The HTML files below tests most HTML elements, and especially classes provided by Blueprint.</p> - - <table border="0" cellspacing="0" cellpadding="0"> - <tr> - <th class="span-6">Test page</th> - <th class="span-8">Main files tested</th> - <th class="span-10">Description</th> - </tr> - <tr> - <td><a href="parts/sample.html">Sample page</a></td> - <td> - <a href="../blueprint/src/grid.css">grid.css</a>, - <a href="../blueprint/src/typography.css">typography.css</a> - </td> - <td>A simple sample page, with common elements.</td> - </tr> - <tr class="even"> - <td><a href="parts/grid.html">Grid</a></td> - <td> - <a href="../blueprint/src/grid.css">grid.css</a> - </td> - <td>Tests classes provided by grid.css.</td> - </tr> - <tr> - <td><a href="parts/elements.html">Typography</a></td> - <td> - <a href="../blueprint/src/typography.css">typography.css</a> - </td> - <td>Tests HTML elements which gets set in typography.css.</td> - </tr> - <tr class="even"> - <td><a href="parts/forms.html">Forms</a></td> - <td> - <a href="../blueprint/src/forms.css">forms.css</a> - </td> - <td>Tests classes and default look provided by forms.css.</td> - </tr> - </table> - - <p><em><strong>Note about the compressed versions:</strong></em> - These test files utilize the compressed files. In other words, if you change any of the source files, - you'll have to re-compress them with the ruby script in the scripts folder to see any changes.</p> - - <div class="box"> - <p>For more information and help, try these resources:</p> - <ul class="bottom"> - <li><a href="http://blueprintcss.org">The Blueprint home page</a></li> - <li><a href="http://github.com/joshuaclayton/blueprint-css/wikis/home">The Blueprint Wiki</a></li> - <li><a href="http://groups.google.com/group/blueprintcss">The Blueprint mailing list</a></li> - <li><a href="http://christianmontoya.com">The blog for news about Blueprint</a></li> - </ul> - </div> - <p><a href="http://validator.w3.org/check?uri=referer"> - <img src="parts/valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a></p> - - </div> -</body> -</html> \ No newline at end of file + <table border="0" cellspacing="0" cellpadding="0"> + <tr> + <th class="span-6">Test page</th> + <th class="span-8">Main files tested</th> + <th class="span-10">Description</th> + </tr> + <tr> + <td><a href="parts/sample.html">Sample page</a></td> + <td> + <a href="../blueprint/src/grid.css">grid.css</a>, + <a href="../blueprint/src/typography.css">typography.css</a> + </td> + <td>A simple sample page, with common elements.</td> + </tr> + <tr class="even"> + <td><a href="parts/grid.html">Grid</a></td> + <td> + <a href="../blueprint/src/grid.css">grid.css</a> + </td> + <td>Tests classes provided by grid.css.</td> + </tr> + <tr> + <td><a href="parts/elements.html">Typography</a></td> + <td> + <a href="../blueprint/src/typography.css">typography.css</a> + </td> + <td>Tests HTML elements which gets set in typography.css.</td> + </tr> + <tr class="even"> + <td><a href="parts/forms.html">Forms</a></td> + <td> + <a href="../blueprint/src/forms.css">forms.css</a> + </td> + <td>Tests classes and default look provided by forms.css.</td> + </tr> + </table> + + <p><em><strong>Note about the compressed versions:</strong></em> + These test files utilize the compressed files. In other words, if you change any of the source files, + you'll have to re-compress them with the ruby script in the scripts folder to see any changes.</p> + + <div class="box"> + <p>For more information and help, try these resources:</p> + <ul class="bottom"> + <li><a href="http://blueprintcss.org">The Blueprint home page</a></li> + <li><a href="http://github.com/joshuaclayton/blueprint-css/wikis/home">The Blueprint Wiki</a></li> + <li><a href="http://groups.google.com/group/blueprintcss">The Blueprint mailing list</a></li> + <li><a href="http://christianmontoya.com">The blog for news about Blueprint</a></li> + </ul> + </div> + + <p><a href="http://validator.w3.org/check?uri=referer"> + <img src="parts/valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a></p> + + </div> + </body> +</html> tests/index.html @@ -2,245 +2,246 @@ "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title>Blueprint HTML Elements Tests</title> - -  - <link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection"> - <link rel="stylesheet" href="../../blueprint/print.css" type="text/css" media="print"> -  - -</head> -<body> - - <div class="container showgrid"> - <h2>Tests for common HTML elements</h2> - <hr> - - <h5>PARAGRAPHS <span class="alt">&</span> BOXES</h5> - - <div class="span-8"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <sub>sub text</sub> ut labore et <sup>sup text</sup> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - - <div class="span-8"> - <p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> - <p class="large">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> - </div> - - <div class="span-8 last"> - - <div class="box"> - <p class="last">Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> - </blockquote> - - </div> - <hr> - - <h5>LISTS</h5> - - <div class="span-8"> - <ul> - <li>Unordered list test</li> - <li>Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> - <li>Yet another element in the list</li> - <li>Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> - </ul> - <ol> - <li>Ordered list test</li> - <li>Another list element</li> - <li>Yet another element in the list</li> - </ol> - </div> - - <div class="span-8"> - <ol> - <li>Ordered list</li> - <li>Here's a nested unordered list - <ul> - <li>Nested Unordered list</li> - <li>Nested ordered list - <ol> - <li>The first</li> - <li>And the second</li> - </ol> - </li> - </ul> - </li> - <li>Ordered List item</li> - <li>Nested Ordered list - <ol> - <li>Some point</li> - <li>Nested Unordered list - <ul> - <li>The first</li> - <li>And the second</li> - </ul> - </li> - </ol> - </li> - </ol> - </div> - - <div class="span-8 last"> - <dl> - <dt>definition list dt</dt> - <dd>definition list dd</dd> - <dt>definition list dt</dt> - <dd>definition list dd</dd> - <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dt> - <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dd> - <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dt> - <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dd> - </dl> - </div> - <hr> - - <h5>HEADINGS</h5> - - <div class="span-8"> - <h1>H1: Lorem ipsum dolor sit amet</h1> - <h2>H2: Lorem ipsum dolor sit amet, consectetur elit</h2> - <h3>H3: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3> - <h4>H4: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipis</h4> - <h5>H5: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h5> - <h6>H6: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h6> - </div> - - <div class="span-8"> - <h1>Heading 1</h1><hr> - <h2>Heading 2</h2><hr> - <h3>Heading 3</h3><hr> - <h4>Heading 4</h4><hr> - <h5>Heading 5</h5><hr> - <h6>Heading 6</h6> - </div> - - <div class="span-8 last"> - <h1>Heading 1</h1> - <h2>Heading 2</h2> - <h3>Heading 3</h3> - <h4>Heading 4</h4> - <h5>Heading 5</h5> - <h6>Heading 6</h6> - </div> - <hr> - - <h5>MISC ELEMENTS</h5> - - <div class="span-8"> - <p> - <strong><strong></strong><br> - <del><del> deleted</del><br> - <dfn><dfn> dfn</dfn><br> - <em><em> emphasis</em> - </p> - <p> - <a><a> anchor</a><br> - <a href="http://www.google.com"><a> a + href</a> - </p> - <p> - <abbr title="extended abbr text should show when mouse over"><abbr> abbr - extended text when mouseover.</abbr><br> - <acronym title="extended acronym text should show when mouse over"><acronym> acronym - extended text when mouseover.</acronym> - </p> - <address> - <address><br> - Donald Duck<br> - Box 555<br> - Disneyland - </address> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore.</p> - </div> - - <div class="span-8"> - <table summary="This is the summary text for this table." border="0" cellspacing="0" cellpadding="0"> - <caption><em>A standard test table with a caption, tr, td elements</em></caption> - <tr> - <th class="span-4">Table Header One</th> - <th class="span-4 last">Table Header Two</th> - </tr> - <tr> - <td>TD One</td> - <td>TD Two</td> - </tr> - <tr> - <td colspan="2">TD colspan 2</td> - </tr> - </table> - - <table summary="This is the summary text for this table." border="0" cellspacing="0" cellpadding="0"> - <caption><em>A test table with a thead, tfoot, and tbody elements</em></caption> - <thead> - <tr> - <th class="span-4">Table Header One</th> - <th class="span-4 last">Table Header Two</th> - </tr> - </thead> - <tfoot> - <tr> - <td colspan="2">tfoot footer</td> - </tr> - </tfoot> - <tbody> - <tr> - <td>TD One</td> - <td>TD Two</td> - </tr> - <tr> - <td>TD One</td> - <td>TD Two</td> - </tr> - </tbody> - <tbody> - <tr> - <td>TD One</td> - <td>TD Two</td> - </tr> - <tr> - <td>TD One</td> - <td>TD Two</td> - </tr> - </tbody> - </table> - </div> - - <div class="span-8 last"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Blueprint HTML Elements Tests</title> + +  + <link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection"> + <link rel="stylesheet" href="../../blueprint/print.css" type="text/css" media="print"> +  + + </head> + <body> + + <div class="container showgrid"> + <h2>Tests for common HTML elements</h2> + <hr> + <h5>PARAGRAPHS <span class="alt">&</span> BOXES</h5> + <div class="span-8"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <sub>sub text</sub> ut labore et <sup>sup text</sup> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + </div> + + <div class="span-8"> + <p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> + <p class="large">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> + </div> + + <div class="span-8 last"> + + <div class="box"> + <p class="last">Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + </div> + <blockquote> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + </blockquote> + + </div> + <hr> + + <h5>LISTS</h5> + + <div class="span-8"> + <ul> + <li>Unordered list test</li> + <li>Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> + <li>Yet another element in the list</li> + <li>Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> + </ul> + <ol> + <li>Ordered list test</li> + <li>Another list element</li> + <li>Yet another element in the list</li> + </ol> + </div> + + <div class="span-8"> + <ol> + <li>Ordered list</li> + <li>Here's a nested unordered list + <ul> + <li>Nested Unordered list</li> + <li>Nested ordered list + <ol> + <li>The first</li> + <li>And the second</li> + </ol> + </li> + </ul> + </li> + <li>Ordered List item</li> + <li>Nested Ordered list + <ol> + <li>Some point</li> + <li>Nested Unordered list + <ul> + <li>The first</li> + <li>And the second</li> + </ul> + </li> + </ol> + </li> + </ol> + </div> + + <div class="span-8 last"> + <dl> + <dt>definition list dt</dt> + <dd>definition list dd</dd> + <dt>definition list dt</dt> + <dd>definition list dd</dd> + <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dt> + <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dd> + <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dt> + <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dd> + </dl> + </div> + <hr> + + <h5>HEADINGS</h5> + + <div class="span-8"> + <h1>H1: Lorem ipsum dolor sit amet</h1> + <h2>H2: Lorem ipsum dolor sit amet, consectetur elit</h2> + <h3>H3: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3> + <h4>H4: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipis</h4> + <h5>H5: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h5> + <h6>H6: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h6> + </div> + + <div class="span-8"> + <h1>Heading 1</h1><hr> + <h2>Heading 2</h2><hr> + <h3>Heading 3</h3><hr> + <h4>Heading 4</h4><hr> + <h5>Heading 5</h5><hr> + <h6>Heading 6</h6> + </div> + + <div class="span-8 last"> + <h1>Heading 1</h1> + <h2>Heading 2</h2> + <h3>Heading 3</h3> + <h4>Heading 4</h4> + <h5>Heading 5</h5> + <h6>Heading 6</h6> + </div> + <hr> + + <h5>MISC ELEMENTS</h5> + + <div class="span-8"> + <p> + <strong><strong></strong><br> + <del><del> deleted</del><br> + <dfn><dfn> dfn</dfn><br> + <em><em> emphasis</em> + </p> + <p> + <a><a> anchor</a><br> + <a href="http://www.google.com"><a> a + href</a> + </p> + <p> + <abbr title="extended abbr text should show when mouse over"><abbr> abbr - extended text when mouseover.</abbr><br> + <acronym title="extended acronym text should show when mouse over"><acronym> acronym - extended text when mouseover.</acronym> + </p> + <address> + <address><br> + Donald Duck<br> + Box 555<br> + Disneyland + </address> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore.</p> + </div> + + <div class="span-8"> + <table summary="This is the summary text for this table." border="0" cellspacing="0" cellpadding="0"> + <caption><em>A standard test table with a caption, tr, td elements</em></caption> + <tr> + <th class="span-4">Table Header One</th> + <th class="span-4 last">Table Header Two</th> + </tr> + <tr> + <td>TD One</td> + <td>TD Two</td> + </tr> + <tr> + <td colspan="2">TD colspan 2</td> + </tr> + </table> + + <table summary="This is the summary text for this table." border="0" cellspacing="0" cellpadding="0"> + <caption><em>A test table with a thead, tfoot, and tbody elements</em></caption> + <thead> + <tr> + <th class="span-4">Table Header One</th> + <th class="span-4 last">Table Header Two</th> + </tr> + </thead> + <tfoot> + <tr> + <td colspan="2">tfoot footer</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>TD One</td> + <td>TD Two</td> + </tr> + <tr> + <td>TD One</td> + <td>TD Two</td> + </tr> + </tbody> + <tbody> + <tr> + <td>TD One</td> + <td>TD Two</td> + </tr> + <tr> + <td>TD One</td> + <td>TD Two</td> + </tr> + </tbody> + </table> + </div> + + <div class="span-8 last"> <pre><pre> pre space1 pre space1 pre space2 pre space2 -pre tab -pre tab</pre> - -<code><code> -Not indented - indent1 - indent1 - indent2 - indent3</code> - - <tt><tt> - This tt text should be monospaced - and - wrap as if +pre tab +pre tab</pre> + + <code><code> + Not indented + indent1 + indent1 + indent2 + indent3</code> + + <tt><tt> + This tt text should be monospaced + and + wrap as if one line of text - even though the code has newlines, spaces, and tabs. - It should be the same size as <p> text. - </tt> + even though the code has newlines, spaces, and tabs. + It should be the same size as <p> text. + </tt> + </div> + <hr> + + <p> + <a href="http://validator.w3.org/check?uri=referer"> + <img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"> + </a> + </p> + </div> - <hr> - - <p><a href="http://validator.w3.org/check?uri=referer"> - <img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a></p> - - </div> -</body> + </body> </html> tests/parts/elements.html @@ -1,11 +1,11 @@ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - + <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Blueprint Forms Tests</title> - +  <link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="../../blueprint/print.css" type="text/css" media="print"> @@ -15,44 +15,44 @@ <div class="container showgrid"> <h1>Forms</h1> <hr> - + <div class="span-12"> - + <form id="dummy" action="" method="post"> - + <fieldset> <legend>Simple sample form</legend> <p> <label for="dummy0">Text input (title)</label><br> <input type="text" class="title" name="dummy0" id="dummy0" value="Field with class .title"> </p> - + <p> <label for="dummy1">Another field</label><br> <input type="text" class="text" id="dummy1" name="dummy1" value="Field with class .text"> </p> - + <p> <label for="dummy2">Textarea</label><br> <textarea name="dummy2" id="dummy2" rows="5" cols="20"></textarea> </p> - + <p> <label for="dummy3">A password field</label><br> <input type="password" class="text" id="dummy3" name="dummy3" value="Password field with class .text"> </p> - + <p> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </p> - + </fieldset> </form> - + </div> <div class="span-12 last"> - + <div class="error"> This is a <div> with the class <strong>.error</strong>. <a href="#">Link</a>. </div> @@ -62,10 +62,10 @@ <div class="success"> This is a <div> with the class <strong>.success</strong>. <a href="#">Link</a>. </div> - + <fieldset> <legend>Select, checkboxes, lists</legend> - + <p> <label for="dummy3">Select field</label><br> <select id="dummy3" name="dummy3"> @@ -74,7 +74,7 @@ <option value="3">Moosejaw</option> </select> </p> - + <p> <label for="dummy4">Select with groups</label><br> <select id="dummy4" name="dummy4"> @@ -91,28 +91,28 @@ </optgroup> </select> </p> - + <p><label>Radio buttons</label><br> <input type="radio" name="example"> Radio one<br> <input type="radio" name="example"> Radio two<br> <input type="radio" name="example"> Radio three<br> </p> - + <p><label>Checkboxes</label><br> <input type="checkbox"> Check one<br> <input type="checkbox"> Check two<br> <input type="checkbox"> Check three<br> </p> - + </fieldset> - + </div> - + <div class="span-24 last"> - + <fieldset> <legend>Alignment</legend> - + <p> <label for="dummy5">Select field</label> <select id="dummy5" name="dummy5"> @@ -121,12 +121,12 @@ <option value="3">Moosejaw</option> </select> </p> - + <p> <label for="dummy6">Text input (title)</label> <input type="text" class="title" name="dummy6" id="dummy6" value="Field with class .title"> </p> - + <p> <label for="dummy7">Select field</label> <select id="dummy7" name="dummy7"> @@ -137,11 +137,11 @@ <label for="dummy8">Another field</label> <input type="text" class="text" id="dummy8" name="dummy8" value="Field with class .text"> </p> - + </fieldset> - + </div> - + <div class="span-24 last"> <form action="" method="post" class="inline"> <fieldset> @@ -174,18 +174,18 @@ <input type="submit" value="submit" class="button"> </div> </fieldset> - + </form> - + </div> - + <hr> - + <p> <a href="http://validator.w3.org/check?uri=referer"> <img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a> </p> - + </div> </body> -</html> \ No newline at end of file +</html> tests/parts/forms.html @@ -2,205 +2,162 @@ "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title>Blueprint Grid Tests</title> - -  - <link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection"> - <link rel="stylesheet" href="../../blueprint/print.css" type="text/css" media="print"> -  -</head> -<body> - - <div class="container showgrid"> - <h1>Blueprint Tests: grid.css</h1> - - - <div class="span-8"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> - </div> - <div class="span-8"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> - </div> - <div class="span-8 last"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> - </div> - - - <div class="span-6 append-1"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> - </div> - <div class="span-6 append-2"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> - </div> - <div class="span-6 append-3 last"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> - </div> - - - <div class="span-6 prepend-1"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> - </div> - <div class="span-6 prepend-2"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> - </div> - <div class="span-6 prepend-3 last"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> - </div> - <hr> - - <div class="span-12 border"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div class="span-12 last"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <hr> - - <div class="span-1 prepend-1"><p>1</p></div> - <div class="span-1 prepend-2"><p>2</p></div> - <div class="span-1 prepend-3"><p>3</p></div> - <div class="span-1 prepend-4"><p>4</p></div> - <div class="span-1 prepend-5"><p>5</p></div> - <div class="span-1 prepend-3 last"><p>3</p></div> - - <div class="span-1 append-1"><p>1</p></div> - <div class="span-1 append-2"><p>2</p></div> - <div class="span-1 append-3"><p>3</p></div> - <div class="span-1 append-4"><p>4</p></div> - <div class="span-1 append-5"><p>5</p></div> - <div class="span-1 append-3 last"><p>3</p></div> - - <div class="span-1 border"><p>1</p></div> - <div class="span-1 border"><p>2</p></div> - <div class="span-1 border"><p>3</p></div> - <div class="span-1 border"><p>4</p></div> - <div class="span-1 border"><p>5</p></div> - <div class="span-1 border"><p>6</p></div> - <div class="span-1 border"><p>7</p></div> - <div class="span-1 border"><p>8</p></div> - <div class="span-1 border"><p>9</p></div> - <div class="span-1 border"><p>10</p></div> - <div class="span-1 border"><p>11</p></div> - <div class="span-1 border"><p>12</p></div> - <div class="span-1 border"><p>13</p></div> - <div class="span-1 border"><p>14</p></div> - <div class="span-1 border"><p>15</p></div> - <div class="span-1 border"><p>16</p></div> - <div class="span-1 border"><p>17</p></div> - <div class="span-1 border"><p>18</p></div> - <div class="span-1 border"><p>19</p></div> - <div class="span-1 border"><p>20</p></div> - <div class="span-1 border"><p>21</p></div> - <div class="span-1 border"><p>22</p></div> - <div class="span-1 border"><p>23</p></div> - <div class="span-1 last"><p>24</p></div> - - - <div class="span-4"><p>1</p></div> - <div class="span-4"><p>2</p></div> - <div class="span-4"><p>3</p></div> - <div class="span-4"><p>4</p></div> - <div class="span-4"><p>5</p></div> - <div class="span-4 last"><p>6</p></div> - - - <div class="prepend-23 span-1 last"><p>24</p></div> - - - <div class="prepend-1 span-1"><p>2</p></div> - <div class="prepend-20 span-1 append-1 last"><p>23</p></div> - <hr> - - <div class="span-24"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - - - <div class="span-12"> - <div class="span-6"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> - </div> - - <div class="span-6 last"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> - </div> - - <div class="span-12 last"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> - </div> - </div> - - <div class="span-12 last"> - <div class="span-6"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> - </div> - - <div class="span-6 last"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> - </div> - - <div class="span-12 last"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> - </div> - </div> - - - <div class="span-14 prepend-5 append-5 last"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> - </div> - <hr> - - <div class="span-12"> - <h5>TESTING .PUSH-1 TO .PUSH-5</h5> - - <div class="span-2"><img src="test-small.jpg" class="push-1"></div> - <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> - - <div class="span-2"><img src="test-small.jpg" class="push-2"></div> - <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> - - <div class="span-2"><img src="test-small.jpg" class="push-3"></div> - <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> - - <div class="span-2"><img src="test-small.jpg" class="push-4"></div> - <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> - - <div class="span-2"><img src="test-small.jpg" class="push-5"></div> - <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> - - </div> - - <div class="span-12 last"> - <h5>TESTING .PULL-1 TO .PULL-5</h5> - - <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> - <div class="span-2 last"><img src="test-small.jpg" class="top pull-1"></div> - - <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> - <div class="span-2 last"><img src="test-small.jpg" class="top pull-2"></div> - - <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> - <div class="span-2 last"><img src="test-small.jpg" class="top pull-3"></div> - - <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> - <div class="span-2 last"><img src="test-small.jpg" class="top pull-4"></div> - - <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> - <div class="span-2 last"><img src="test-small.jpg" class="top pull-5"></div> - - </div> - - - - - - <div class="span-24"> - <p><a href="http://validator.w3.org/check?uri=referer"> - <img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="bottom"></a></p> - </div> - - </div> -</body> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Blueprint Grid Tests</title> + +  + <link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection"> + <link rel="stylesheet" href="../../blueprint/print.css" type="text/css" media="print"> +  + </head> + <body> + + <div class="container showgrid"> + <h1>Blueprint Tests: grid.css</h1> + <div class="span-8"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <div class="span-8"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <div class="span-8 last"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <div class="span-6 append-1"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <div class="span-6 append-2"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <div class="span-6 append-3 last"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <div class="span-6 prepend-1"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <div class="span-6 prepend-2"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <div class="span-6 prepend-3 last"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <hr> + <div class="span-12 border"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + </div> + <div class="span-12 last"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + </div> + <hr> + <div class="span-1 prepend-1"><p>1</p></div> + <div class="span-1 prepend-2"><p>2</p></div> + <div class="span-1 prepend-3"><p>3</p></div> + <div class="span-1 prepend-4"><p>4</p></div> + <div class="span-1 prepend-5"><p>5</p></div> + <div class="span-1 prepend-3 last"><p>3</p></div> + <div class="span-1 append-1"><p>1</p></div> + <div class="span-1 append-2"><p>2</p></div> + <div class="span-1 append-3"><p>3</p></div> + <div class="span-1 append-4"><p>4</p></div> + <div class="span-1 append-5"><p>5</p></div> + <div class="span-1 append-3 last"><p>3</p></div> + <div class="span-1 border"><p>1</p></div> + <div class="span-1 border"><p>2</p></div> + <div class="span-1 border"><p>3</p></div> + <div class="span-1 border"><p>4</p></div> + <div class="span-1 border"><p>5</p></div> + <div class="span-1 border"><p>6</p></div> + <div class="span-1 border"><p>7</p></div> + <div class="span-1 border"><p>8</p></div> + <div class="span-1 border"><p>9</p></div> + <div class="span-1 border"><p>10</p></div> + <div class="span-1 border"><p>11</p></div> + <div class="span-1 border"><p>12</p></div> + <div class="span-1 border"><p>13</p></div> + <div class="span-1 border"><p>14</p></div> + <div class="span-1 border"><p>15</p></div> + <div class="span-1 border"><p>16</p></div> + <div class="span-1 border"><p>17</p></div> + <div class="span-1 border"><p>18</p></div> + <div class="span-1 border"><p>19</p></div> + <div class="span-1 border"><p>20</p></div> + <div class="span-1 border"><p>21</p></div> + <div class="span-1 border"><p>22</p></div> + <div class="span-1 border"><p>23</p></div> + <div class="span-1 last"><p>24</p></div> + <div class="span-4"><p>1</p></div> + <div class="span-4"><p>2</p></div> + <div class="span-4"><p>3</p></div> + <div class="span-4"><p>4</p></div> + <div class="span-4"><p>5</p></div> + <div class="span-4 last"><p>6</p></div> + <div class="prepend-23 span-1 last"><p>24</p></div> + <div class="prepend-1 span-1"><p>2</p></div> + <div class="prepend-20 span-1 append-1 last"><p>23</p></div> + <hr> + <div class="span-24"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + </div> + <div class="span-12"> + <div class="span-6"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> + </div> + <div class="span-6 last"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> + </div> + <div class="span-12 last"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> + </div> + </div> + <div class="span-12 last"> + <div class="span-6"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> + </div> + <div class="span-6 last"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> + </div> + <div class="span-12 last"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> + </div> + </div> + <div class="span-14 prepend-5 append-5 last"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> + </div> + <hr> + <div class="span-12"> + <h5>TESTING .PUSH-1 TO .PUSH-5</h5> + <div class="span-2"><img src="test-small.jpg" class="push-1"></div> + <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> + <div class="span-2"><img src="test-small.jpg" class="push-2"></div> + <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> + <div class="span-2"><img src="test-small.jpg" class="push-3"></div> + <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> + <div class="span-2"><img src="test-small.jpg" class="push-4"></div> + <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> + <div class="span-2"><img src="test-small.jpg" class="push-5"></div> + <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> + </div> + <div class="span-12 last"> + <h5>TESTING .PULL-1 TO .PULL-5</h5> + <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> + <div class="span-2 last"><img src="test-small.jpg" class="top pull-1"></div> + <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> + <div class="span-2 last"><img src="test-small.jpg" class="top pull-2"></div> + <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> + <div class="span-2 last"><img src="test-small.jpg" class="top pull-3"></div> + <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> + <div class="span-2 last"><img src="test-small.jpg" class="top pull-4"></div> + <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> + <div class="span-2 last"><img src="test-small.jpg" class="top pull-5"></div> + </div> + <div class="span-24"> + <p> + <a href="http://validator.w3.org/check?uri=referer"> + <img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="bottom"> + </a> + </p> + </div> + </div> + </body> </html> tests/parts/grid.html @@ -2,86 +2,74 @@ "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title>Blueprint Sample Page</title> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Blueprint Sample Page</title> -  - <link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection"> - <link rel="stylesheet" href="../../blueprint/print.css" type="text/css" media="print"> -  - -  - <link rel="stylesheet" href="../../blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection"> -</head> +  + <link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection"> + <link rel="stylesheet" href="../../blueprint/print.css" type="text/css" media="print"> +  -<body> - - <div class="container"> - <h1>A simple sample page</h1> - <hr> - <h2 class="alt">This sample page demonstrates a tiny fraction of what you get with Blueprint.</h2> - <hr> - - <div class="span-7 colborder"> - <h6>Here's a box</h6> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> - </div> - - <div class="span-8 colborder"> - <h6>And another box</h6> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.</p> - </div> - - <div class="span-7 last"> - <h6>This box is aligned with the sidebar</h6> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> - </div> - <hr> - <hr class="space"> - - <div class="span-15 prepend-1 colborder"> - <p><img src="test.jpg" class="top pull-1 left" alt="test">Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent <span class="caps">SMALL CAPS</span> tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula. Nulla id augue.</p> - <p>Nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus, auctor consectetuer felis ligula nec mauris. Vestibulum odio erat, fermentum at, commodo vitae, ultrices et, urna. Mauris vulputate, mi pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet mi purus eu magna. Nulla varius metus ut eros. Aenean aliquet magna eget orci. Class aptent taciti sociosqu ad litora.</p> - <p>Vivamus euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel nibh ut turpis dictum sagittis. Aliquam vel velit a elit auctor sollicitudin. Nam vel dui vel neque lacinia pretium. Quisque nunc erat, venenatis id, volutpat ut, scelerisque sed, diam. Mauris ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec mattis. Morbi dignissim sollicitudin libero. Nulla lorem.</p> - <blockquote> - <p>Integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu, ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat enim faucibus felis, quis rutrum mauris lorem quis sem. Vestibulum ligula nisi, mattis nec, posuere et, blandit eu, ligula. Nam suscipit placerat odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque tortor libero, venenatis vitae, rhoncus eu, placerat ut, mi. Nulla nulla.</p> - </blockquote> - <p>Maecenas vel metus quis magna pharetra fermentum. <em>Integer sit amet tortor</em>. Maecenas porttitor, pede sed gravida auctor, nulla augue aliquet elit, at pretium urna orci ut metus. Aliquam in dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl. Phasellus congue neque a lorem.</p> - - <hr> - <div class="span-7 colborder"> - <h6>This is a nested column</h6> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> - </div> - <div class="span-7 last"> - <h6>This is another nested column</h6> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> - </div> - - </div> - <div class="span-7 last"> - - <h3>A <span class="alt">Simple</span> Sidebar</h3> - - <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p> - <p>Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida. Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida.</p> - <p class="quiet">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p> - - <h5>Incremental leading</h5> - <p class="incr">Vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus.</p> - <p class="incr">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p> - - </div> - - <hr> - <h2 class="alt">You may pick and choose amongst these and many more features, so be bold.</h2> - <hr> - - <p><a href="http://validator.w3.org/check?uri=referer"> - <img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a></p> - </div> - -</body> -</html> \ No newline at end of file +  + <link rel="stylesheet" href="../../blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection"> + </head> + <body> + <div class="container"> + <h1>A simple sample page</h1> + <hr> + <h2 class="alt">This sample page demonstrates a tiny fraction of what you get with Blueprint.</h2> + <hr> + <div class="span-7 colborder"> + <h6>Here's a box</h6> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> + </div> + <div class="span-8 colborder"> + <h6>And another box</h6> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.</p> + </div> + <div class="span-7 last"> + <h6>This box is aligned with the sidebar</h6> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> + </div> + <hr> + <hr class="space"> + <div class="span-15 prepend-1 colborder"> + <p><img src="test.jpg" class="top pull-1 left" alt="test">Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent <span class="caps">SMALL CAPS</span> tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula. Nulla id augue.</p> + <p>Nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus, auctor consectetuer felis ligula nec mauris. Vestibulum odio erat, fermentum at, commodo vitae, ultrices et, urna. Mauris vulputate, mi pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet mi purus eu magna. Nulla varius metus ut eros. Aenean aliquet magna eget orci. Class aptent taciti sociosqu ad litora.</p> + <p>Vivamus euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel nibh ut turpis dictum sagittis. Aliquam vel velit a elit auctor sollicitudin. Nam vel dui vel neque lacinia pretium. Quisque nunc erat, venenatis id, volutpat ut, scelerisque sed, diam. Mauris ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec mattis. Morbi dignissim sollicitudin libero. Nulla lorem.</p> + <blockquote> + <p>Integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu, ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat enim faucibus felis, quis rutrum mauris lorem quis sem. Vestibulum ligula nisi, mattis nec, posuere et, blandit eu, ligula. Nam suscipit placerat odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque tortor libero, venenatis vitae, rhoncus eu, placerat ut, mi. Nulla nulla.</p> + </blockquote> + <p>Maecenas vel metus quis magna pharetra fermentum. <em>Integer sit amet tortor</em>. Maecenas porttitor, pede sed gravida auctor, nulla augue aliquet elit, at pretium urna orci ut metus. Aliquam in dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl. Phasellus congue neque a lorem.</p> + <hr> + <div class="span-7 colborder"> + <h6>This is a nested column</h6> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> + </div> + <div class="span-7 last"> + <h6>This is another nested column</h6> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> + </div> + </div> + <div class="span-7 last"> + <h3>A <span class="alt">Simple</span> Sidebar</h3> + <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p> + <p>Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida. Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida.</p> + <p class="quiet">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p> + <h5>Incremental leading</h5> + <p class="incr">Vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus.</p> + <p class="incr">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p> + </div> + <hr> + <h2 class="alt">You may pick and choose amongst these and many more features, so be bold.</h2> + <hr> + <p> + <a href="http://validator.w3.org/check?uri=referer"> + <img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"> + </a> + </p> + </div> + </body> +</html> tests/parts/sample.html doc/classes/Blueprint.html doc/classes/Blueprint/CSSParser.html doc/classes/Blueprint/CSSParser.src/M000011.html doc/classes/Blueprint/CSSParser.src/M000012.html doc/classes/Blueprint/CSSParser.src/M000013.html doc/classes/Blueprint/Compressor.html doc/classes/Blueprint/Compressor.src/M000027.html doc/classes/Blueprint/Compressor.src/M000028.html doc/classes/Blueprint/Compressor.src/M000029.html doc/classes/Blueprint/CustomLayout.html doc/classes/Blueprint/CustomLayout.src/M000020.html doc/classes/Blueprint/CustomLayout.src/M000021.html doc/classes/Blueprint/CustomLayout.src/M000022.html doc/classes/Blueprint/CustomLayout.src/M000023.html doc/classes/Blueprint/CustomLayout.src/M000024.html doc/classes/Blueprint/CustomLayout.src/M000025.html doc/classes/Blueprint/CustomLayout.src/M000026.html doc/classes/Blueprint/GridBuilder.html doc/classes/Blueprint/GridBuilder.src/M000014.html doc/classes/Blueprint/GridBuilder.src/M000015.html doc/classes/Blueprint/Namespace.html doc/classes/Blueprint/Namespace.src/M000016.html doc/classes/Blueprint/Namespace.src/M000017.html doc/classes/Blueprint/Namespace.src/M000018.html doc/classes/Blueprint/Namespace.src/M000019.html doc/classes/Blueprint/SemanticClassNames.html doc/classes/Blueprint/SemanticClassNames.src/M000009.html doc/classes/Blueprint/SemanticClassNames.src/M000010.html doc/classes/Blueprint/Validator.html doc/classes/Blueprint/Validator.src/M000007.html doc/classes/Blueprint/Validator.src/M000008.html doc/classes/File.html doc/classes/File.src/M000001.html doc/classes/File.src/M000002.html doc/classes/String.html doc/classes/String.src/M000003.html doc/classes/String.src/M000004.html doc/classes/String.src/M000005.html doc/classes/String.src/M000006.html doc/created.rid doc/files/lib/blueprint/blueprint_rb.html doc/files/lib/blueprint/compressor_rb.html doc/files/lib/blueprint/core_ext_rb.html doc/files/lib/blueprint/css_parser_rb.html doc/files/lib/blueprint/custom_layout_rb.html doc/files/lib/blueprint/grid_builder_rb.html doc/files/lib/blueprint/namespace_rb.html doc/files/lib/blueprint/semantic_class_names_rb.html doc/files/lib/blueprint/validator_rb.html doc/files/lib/compress_rb.html doc/files/lib/validate_rb.html doc/fr_class_index.html doc/fr_file_index.html doc/fr_method_index.html doc/index.html doc/rdoc-style.css 9be685760014b3258dcd83913b9b19f130551b2f Joshua Clayton jclayton@fusionary.com http://github.com/joshuaclayton/blueprint-css/commit/63795c8bfe31cbbfad726f714bf8d22770adc7ad 63795c8bfe31cbbfad726f714bf8d22770adc7ad

2009-08-22T19:58:54-07:00

Whitespace 94a3ca5747e0d5bb13dfe970e1379399046d7a1a Joshua Clayton jclayton@fusionary.com