Converted html to haml in the examples for consistency.
This commit is contained in:
Chris Eppstein
parent
7a34f14018
commit
6ab6707001
1
.gitignore
vendored
1
.gitignore
vendored
@ -2,6 +2,7 @@
|
|||||||
tmp/*
|
tmp/*
|
||||||
examples/*/stylesheets/*
|
examples/*/stylesheets/*
|
||||||
examples/*/*.html
|
examples/*/*.html
|
||||||
|
examples/*/*/*.html
|
||||||
examples/*/src/.sass-cache
|
examples/*/src/.sass-cache
|
||||||
test/tmp
|
test/tmp
|
||||||
test/fixtures/stylesheets/*/tmp
|
test/fixtures/stylesheets/*/tmp
|
||||||
|
|||||||
@ -1,73 +0,0 @@
|
|||||||
<!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 test pages</title>
|
|
||||||
|
|
||||||
<!-- Framework CSS -->
|
|
||||||
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen, projection">
|
|
||||||
<link rel="stylesheet" href="stylesheets/index.css" type="text/css" media="screen, projection">
|
|
||||||
<link rel="stylesheet" href="stylesheets/print.css" type="text/css" media="print">
|
|
||||||
<!--[if IE]><link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
|
||||||
</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
|
|
||||||
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/grid.html">Grid</a></td>
|
|
||||||
<td>
|
|
||||||
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass">grid.sass</a>
|
|
||||||
</td>
|
|
||||||
<td>Tests classes provided by the grid module.</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="even">
|
|
||||||
<td><a href="parts/elements.html">Typography</a></td>
|
|
||||||
<td>
|
|
||||||
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass">typography.sass</a>
|
|
||||||
</td>
|
|
||||||
<td>Tests HTML elements which gets set in the typography module.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="parts/forms.html">Forms</a></td>
|
|
||||||
<td>
|
|
||||||
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_form.sass">form.sass</a>
|
|
||||||
</td>
|
|
||||||
<td>Tests classes and default look provided by the form module.</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<p><em><strong>Note about the css files:</strong></em>
|
|
||||||
These test files utilize the css files that are generated from
|
|
||||||
<a href="http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html">Sass templates</a>.
|
|
||||||
In other words, if you change any of the source files,
|
|
||||||
you'll have to re-build them with <code>rake examples</code> 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://code.google.com/p/blueprintcss">The Blueprint home page.</a></li>
|
|
||||||
<li><a href="http://groups.google.com/group/blueprintcss">Our anything-goes mailing list.</a></li>
|
|
||||||
<li><a href="http://bjorkoy.com">The blog where news about Blueprint gets posted.</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>
|
|
||||||
85
examples/blueprint_default/index.html.haml
Normal file
85
examples/blueprint_default/index.html.haml
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
!!!
|
||||||
|
%html{ :lang => "en" }
|
||||||
|
%head
|
||||||
|
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
||||||
|
%title
|
||||||
|
Blueprint test pages
|
||||||
|
/
|
||||||
|
Framework CSS
|
||||||
|
%link{ :href => "stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%link{ :href => "stylesheets/index.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%link{ :href => "stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
|
||||||
|
/
|
||||||
|
[if IE]><link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
|
||||||
|
%body
|
||||||
|
.container
|
||||||
|
%h1
|
||||||
|
Blueprint test pages
|
||||||
|
%hr
|
||||||
|
%p
|
||||||
|
Welcome to the Blueprint test pages. The HTML files below tests most HTML elements, and especially classes provided
|
||||||
|
by Blueprint.
|
||||||
|
%table{ :cellspacing => "0", :border => "0", :cellpadding => "0" }
|
||||||
|
%tr
|
||||||
|
%th.span-6
|
||||||
|
Test page
|
||||||
|
%th.span-8
|
||||||
|
Main files tested
|
||||||
|
%th.span-10
|
||||||
|
Description
|
||||||
|
%tr
|
||||||
|
%td
|
||||||
|
%a{ :href => "parts/grid.html" }
|
||||||
|
Grid
|
||||||
|
%td
|
||||||
|
%a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass" }
|
||||||
|
grid.sass
|
||||||
|
%td
|
||||||
|
Tests classes provided by the grid module.
|
||||||
|
%tr.even
|
||||||
|
%td
|
||||||
|
%a{ :href => "parts/elements.html" }
|
||||||
|
Typography
|
||||||
|
%td
|
||||||
|
%a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass" }
|
||||||
|
typography.sass
|
||||||
|
%td
|
||||||
|
Tests HTML elements which gets set in the typography module.
|
||||||
|
%tr
|
||||||
|
%td
|
||||||
|
%a{ :href => "parts/forms.html" }
|
||||||
|
Forms
|
||||||
|
%td
|
||||||
|
%a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/modules/_form.sass" }
|
||||||
|
form.sass
|
||||||
|
%td
|
||||||
|
Tests classes and default look provided by the form module.
|
||||||
|
%p
|
||||||
|
%em
|
||||||
|
%strong
|
||||||
|
Note about the css files:
|
||||||
|
These test files utilize the css files that are generated from
|
||||||
|
%a{ :href => "http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html" }
|
||||||
|
Sass templates
|
||||||
|
\.
|
||||||
|
In other words, if you change any of the source files,
|
||||||
|
you'll have to re-build them with
|
||||||
|
%code
|
||||||
|
rake examples
|
||||||
|
to see any changes.
|
||||||
|
.box
|
||||||
|
%p
|
||||||
|
For more information and help, try these resources:
|
||||||
|
%ul.bottom
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://code.google.com/p/blueprintcss" }
|
||||||
|
The Blueprint home page.
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://groups.google.com/group/blueprintcss" }
|
||||||
|
Our anything-goes mailing list.
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://bjorkoy.com" }
|
||||||
|
The blog where news about Blueprint gets posted.
|
||||||
|
%p
|
||||||
|
%a{ :href => "http://validator.w3.org/check?uri=referer" }
|
||||||
|
%img.top{ :src => "parts/valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }
|
||||||
@ -1,246 +0,0 @@
|
|||||||
<!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 HTML Elements Tests</title>
|
|
||||||
|
|
||||||
<!-- Framework CSS -->
|
|
||||||
<link rel="stylesheet" href="../stylesheets/screen.css" type="text/css" media="screen, projection">
|
|
||||||
<link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
|
|
||||||
<!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
|
||||||
|
|
||||||
</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
|
|
||||||
one line of text
|
|
||||||
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>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
282
examples/blueprint_default/parts/elements.html.haml
Normal file
282
examples/blueprint_default/parts/elements.html.haml
Normal file
@ -0,0 +1,282 @@
|
|||||||
|
!!!
|
||||||
|
%html{ :lang => "en" }
|
||||||
|
%head
|
||||||
|
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
||||||
|
%title
|
||||||
|
Blueprint HTML Elements Tests
|
||||||
|
/
|
||||||
|
Framework CSS
|
||||||
|
%link{ :href => "../stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%link{ :href => "../stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
|
||||||
|
/
|
||||||
|
[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
|
||||||
|
%body
|
||||||
|
.container.showgrid
|
||||||
|
%h2
|
||||||
|
Tests for common HTML elements
|
||||||
|
%hr
|
||||||
|
%h5
|
||||||
|
PARAGRAPHS
|
||||||
|
%span.alt
|
||||||
|
\&
|
||||||
|
BOXES
|
||||||
|
.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
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||||||
|
%sub
|
||||||
|
sub text
|
||||||
|
ut labore et
|
||||||
|
%sup
|
||||||
|
sup text
|
||||||
|
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.
|
||||||
|
.span-8
|
||||||
|
%p.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
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
%p.large
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.span-8.last
|
||||||
|
.box
|
||||||
|
%p.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.
|
||||||
|
%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.
|
||||||
|
%hr
|
||||||
|
%h5
|
||||||
|
LISTS
|
||||||
|
.span-8
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
Unordered list test
|
||||||
|
%li
|
||||||
|
Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
|
%li
|
||||||
|
Yet another element in the list
|
||||||
|
%li
|
||||||
|
Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
|
%ol
|
||||||
|
%li
|
||||||
|
Ordered list test
|
||||||
|
%li
|
||||||
|
Another list element
|
||||||
|
%li
|
||||||
|
Yet another element in the list
|
||||||
|
.span-8
|
||||||
|
%ol
|
||||||
|
%li
|
||||||
|
Ordered list
|
||||||
|
%li
|
||||||
|
Here's a nested unordered list
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
Nested Unordered list
|
||||||
|
%li
|
||||||
|
Nested ordered list
|
||||||
|
%ol
|
||||||
|
%li
|
||||||
|
The first
|
||||||
|
%li
|
||||||
|
And the second
|
||||||
|
%li
|
||||||
|
Ordered List item
|
||||||
|
%li
|
||||||
|
Nested Ordered list
|
||||||
|
%ol
|
||||||
|
%li
|
||||||
|
Some point
|
||||||
|
%li
|
||||||
|
Nested Unordered list
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
The first
|
||||||
|
%li
|
||||||
|
And the second
|
||||||
|
.span-8.last
|
||||||
|
%dl
|
||||||
|
%dt
|
||||||
|
definition list dt
|
||||||
|
%dd
|
||||||
|
definition list dd
|
||||||
|
%dt
|
||||||
|
definition list dt
|
||||||
|
%dd
|
||||||
|
definition list dd
|
||||||
|
%dt
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
|
||||||
|
%dd
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
|
||||||
|
%dt
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
|
||||||
|
%dd
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
|
||||||
|
%hr
|
||||||
|
%h5
|
||||||
|
HEADINGS
|
||||||
|
.span-8
|
||||||
|
%h1
|
||||||
|
H1: Lorem ipsum dolor sit amet
|
||||||
|
%h2
|
||||||
|
H2: Lorem ipsum dolor sit amet, consectetur elit
|
||||||
|
%h3
|
||||||
|
H3: Lorem ipsum dolor sit amet, consectetur adipisicing elit
|
||||||
|
%h4
|
||||||
|
H4: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipis
|
||||||
|
%h5
|
||||||
|
H5: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
|
||||||
|
%h6
|
||||||
|
H6: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
|
||||||
|
.span-8
|
||||||
|
%h1
|
||||||
|
Heading 1
|
||||||
|
%hr
|
||||||
|
%h2
|
||||||
|
Heading 2
|
||||||
|
%hr
|
||||||
|
%h3
|
||||||
|
Heading 3
|
||||||
|
%hr
|
||||||
|
%h4
|
||||||
|
Heading 4
|
||||||
|
%hr
|
||||||
|
%h5
|
||||||
|
Heading 5
|
||||||
|
%hr
|
||||||
|
%h6
|
||||||
|
Heading 6
|
||||||
|
.span-8.last
|
||||||
|
%h1
|
||||||
|
Heading 1
|
||||||
|
%h2
|
||||||
|
Heading 2
|
||||||
|
%h3
|
||||||
|
Heading 3
|
||||||
|
%h4
|
||||||
|
Heading 4
|
||||||
|
%h5
|
||||||
|
Heading 5
|
||||||
|
%h6
|
||||||
|
Heading 6
|
||||||
|
%hr
|
||||||
|
%h5
|
||||||
|
MISC ELEMENTS
|
||||||
|
.span-8
|
||||||
|
%p
|
||||||
|
%strong
|
||||||
|
\<strong>
|
||||||
|
%br
|
||||||
|
%del
|
||||||
|
\<del> deleted
|
||||||
|
%br
|
||||||
|
%dfn
|
||||||
|
\<dfn> dfn
|
||||||
|
%br
|
||||||
|
%em
|
||||||
|
\<em> emphasis
|
||||||
|
%p
|
||||||
|
%a
|
||||||
|
\<a> anchor
|
||||||
|
%br
|
||||||
|
%a{ :href => "http://www.google.com" }
|
||||||
|
\<a> a + href
|
||||||
|
%p
|
||||||
|
%abbr{ :title => "extended abbr text should show when mouse over" }
|
||||||
|
\<abbr> abbr - extended text when mouseover.
|
||||||
|
%br
|
||||||
|
%acronym{ :title => "extended acronym text should show when mouse over" }
|
||||||
|
\<acronym> acronym - extended text when mouseover.
|
||||||
|
%address
|
||||||
|
\<address>
|
||||||
|
%br
|
||||||
|
Donald Duck
|
||||||
|
%br
|
||||||
|
Box 555
|
||||||
|
%br
|
||||||
|
Disneyland
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore.
|
||||||
|
.span-8
|
||||||
|
%table{ :cellspacing => "0", :border => "0", :summary => "This is the summary text for this table.", :cellpadding => "0" }
|
||||||
|
%caption
|
||||||
|
%em
|
||||||
|
A standard test table with a caption, tr, td elements
|
||||||
|
%tr
|
||||||
|
%th.span-4
|
||||||
|
Table Header One
|
||||||
|
%th.span-4.last
|
||||||
|
Table Header Two
|
||||||
|
%tr
|
||||||
|
%td
|
||||||
|
TD One
|
||||||
|
%td
|
||||||
|
TD Two
|
||||||
|
%tr
|
||||||
|
%td{ :colspan => "2" }
|
||||||
|
TD colspan 2
|
||||||
|
%table{ :cellspacing => "0", :border => "0", :summary => "This is the summary text for this table.", :cellpadding => "0" }
|
||||||
|
%caption
|
||||||
|
%em
|
||||||
|
A test table with a thead, tfoot, and tbody elements
|
||||||
|
%thead
|
||||||
|
%tr
|
||||||
|
%th.span-4
|
||||||
|
Table Header One
|
||||||
|
%th.span-4.last
|
||||||
|
Table Header Two
|
||||||
|
%tfoot
|
||||||
|
%tr
|
||||||
|
%td{ :colspan => "2" }
|
||||||
|
tfoot footer
|
||||||
|
%tbody
|
||||||
|
%tr
|
||||||
|
%td
|
||||||
|
TD One
|
||||||
|
%td
|
||||||
|
TD Two
|
||||||
|
%tr
|
||||||
|
%td
|
||||||
|
TD One
|
||||||
|
%td
|
||||||
|
TD Two
|
||||||
|
%tbody
|
||||||
|
%tr
|
||||||
|
%td
|
||||||
|
TD One
|
||||||
|
%td
|
||||||
|
TD Two
|
||||||
|
%tr
|
||||||
|
%td
|
||||||
|
TD One
|
||||||
|
%td
|
||||||
|
TD Two
|
||||||
|
.span-8.last
|
||||||
|
%pre
|
||||||
|
\<pre>
|
||||||
|
pre space1
|
||||||
|
pre space1
|
||||||
|
pre space2
|
||||||
|
pre space2
|
||||||
|
pre tab
|
||||||
|
pre tab
|
||||||
|
%code
|
||||||
|
\<code>
|
||||||
|
Not indented
|
||||||
|
indent1
|
||||||
|
indent1
|
||||||
|
indent2
|
||||||
|
indent3
|
||||||
|
%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.
|
||||||
|
%hr
|
||||||
|
%p
|
||||||
|
%a{ :href => "http://validator.w3.org/check?uri=referer" }
|
||||||
|
%img.top{ :src => "valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }
|
||||||
@ -1,100 +0,0 @@
|
|||||||
<!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>
|
|
||||||
|
|
||||||
<!-- Framework CSS -->
|
|
||||||
<link rel="stylesheet" href="../stylesheets/screen.css" type="text/css" media="screen, projection">
|
|
||||||
<link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
|
|
||||||
<!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<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><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>
|
|
||||||
<div class="notice">
|
|
||||||
This is a <div> with the class <strong>.notice</strong>. <a href="#">Link</a>.
|
|
||||||
</div>
|
|
||||||
<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">
|
|
||||||
<option value="1">Ottawa</option>
|
|
||||||
<option value="2">Calgary</option>
|
|
||||||
<option value="3">Moosejaw</option>
|
|
||||||
</select></p>
|
|
||||||
|
|
||||||
<p><label for="dummy4">Select with groups</label><br>
|
|
||||||
<select id="dummy4" name="dummy4">
|
|
||||||
<option>Favorite pet</option>
|
|
||||||
<optgroup label="mammals">
|
|
||||||
<option>dog</option>
|
|
||||||
<option>cat</option>
|
|
||||||
<option>rabbit</option>
|
|
||||||
<option>horse</option>
|
|
||||||
</optgroup>
|
|
||||||
<optgroup label="reptiles">
|
|
||||||
<option>iguana</option>
|
|
||||||
<option>snake</option>
|
|
||||||
</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>
|
|
||||||
<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>
|
|
||||||
130
examples/blueprint_default/parts/forms.html.haml
Normal file
130
examples/blueprint_default/parts/forms.html.haml
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
!!!
|
||||||
|
%html{ :lang => "en" }
|
||||||
|
%head
|
||||||
|
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
||||||
|
%title
|
||||||
|
Blueprint Forms Tests
|
||||||
|
/
|
||||||
|
Framework CSS
|
||||||
|
%link{ :href => "../stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%link{ :href => "../stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
|
||||||
|
/
|
||||||
|
[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
|
||||||
|
%body
|
||||||
|
.container.showgrid
|
||||||
|
%h1
|
||||||
|
Forms
|
||||||
|
%hr
|
||||||
|
.span-12
|
||||||
|
%form#dummy{ :action => "", :method => "post" }
|
||||||
|
%fieldset
|
||||||
|
%legend
|
||||||
|
Simple sample form
|
||||||
|
%p
|
||||||
|
%label{ :for => "dummy0" }
|
||||||
|
Text input (title)
|
||||||
|
%br
|
||||||
|
%input#dummy0.title{ :name => "dummy0", :type => "text", :value => "Field with class .title" }
|
||||||
|
%p
|
||||||
|
%label{ :for => "dummy1" }
|
||||||
|
Another field
|
||||||
|
%br
|
||||||
|
%input#dummy1.text{ :name => "dummy1", :type => "text", :value => "Field with class .text" }
|
||||||
|
%p
|
||||||
|
%label{ :for => "dummy2" }
|
||||||
|
Textarea
|
||||||
|
%br
|
||||||
|
%textarea#dummy2{ :name => "dummy2", :rows => "5", :cols => "20" }
|
||||||
|
%p
|
||||||
|
%input{ :type => "submit", :value => "Submit" }
|
||||||
|
%input{ :type => "reset", :value => "Reset" }
|
||||||
|
.span-12.last
|
||||||
|
.error
|
||||||
|
This is a <div> with the class
|
||||||
|
%strong
|
||||||
|
\.error
|
||||||
|
\.
|
||||||
|
%a{ :href => "#" }
|
||||||
|
Link
|
||||||
|
\.
|
||||||
|
.notice
|
||||||
|
This is a <div> with the class
|
||||||
|
%strong
|
||||||
|
\.notice
|
||||||
|
\.
|
||||||
|
%a{ :href => "#" }
|
||||||
|
Link
|
||||||
|
\.
|
||||||
|
.success
|
||||||
|
This is a <div> with the class
|
||||||
|
%strong
|
||||||
|
\.success
|
||||||
|
\.
|
||||||
|
%a{ :href => "#" }
|
||||||
|
Link
|
||||||
|
\.
|
||||||
|
%fieldset
|
||||||
|
%legend
|
||||||
|
Select, checkboxes, lists
|
||||||
|
%p
|
||||||
|
%label{ :for => "dummy3" }
|
||||||
|
Select field
|
||||||
|
%br
|
||||||
|
%select#dummy3{ :name => "dummy3" }
|
||||||
|
%option{ :value => "1" }
|
||||||
|
Ottawa
|
||||||
|
%option{ :value => "2" }
|
||||||
|
Calgary
|
||||||
|
%option{ :value => "3" }
|
||||||
|
Moosejaw
|
||||||
|
%p
|
||||||
|
%label{ :for => "dummy4" }
|
||||||
|
Select with groups
|
||||||
|
%br
|
||||||
|
%select#dummy4{ :name => "dummy4" }
|
||||||
|
%option
|
||||||
|
Favorite pet
|
||||||
|
%optgroup{ :label => "mammals" }
|
||||||
|
%option
|
||||||
|
dog
|
||||||
|
%option
|
||||||
|
cat
|
||||||
|
%option
|
||||||
|
rabbit
|
||||||
|
%option
|
||||||
|
horse
|
||||||
|
%optgroup{ :label => "reptiles" }
|
||||||
|
%option
|
||||||
|
iguana
|
||||||
|
%option
|
||||||
|
snake
|
||||||
|
%p
|
||||||
|
%label
|
||||||
|
Radio buttons
|
||||||
|
%br
|
||||||
|
%input{ :name => "example", :type => "radio" }
|
||||||
|
Radio one
|
||||||
|
%br
|
||||||
|
%input{ :name => "example", :type => "radio" }
|
||||||
|
Radio two
|
||||||
|
%br
|
||||||
|
%input{ :name => "example", :type => "radio" }
|
||||||
|
Radio three
|
||||||
|
%br
|
||||||
|
%p
|
||||||
|
%label
|
||||||
|
Checkboxes
|
||||||
|
%br
|
||||||
|
%input{ :type => "checkbox" }
|
||||||
|
Check one
|
||||||
|
%br
|
||||||
|
%input{ :type => "checkbox" }
|
||||||
|
Check two
|
||||||
|
%br
|
||||||
|
%input{ :type => "checkbox" }
|
||||||
|
Check three
|
||||||
|
%br
|
||||||
|
%hr
|
||||||
|
%p
|
||||||
|
%a{ :href => "http://validator.w3.org/check?uri=referer" }
|
||||||
|
%img.top{ :src => "valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }
|
||||||
@ -1,206 +0,0 @@
|
|||||||
<!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 Grid Tests</title>
|
|
||||||
|
|
||||||
<!-- Framework CSS -->
|
|
||||||
<link rel="stylesheet" href="../stylesheets/screen.css" type="text/css" media="screen, projection">
|
|
||||||
<link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
|
|
||||||
<!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
|
||||||
</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>
|
|
||||||
274
examples/blueprint_default/parts/grid.html.haml
Normal file
274
examples/blueprint_default/parts/grid.html.haml
Normal file
@ -0,0 +1,274 @@
|
|||||||
|
!!!
|
||||||
|
%html{ :lang => "en" }
|
||||||
|
%head
|
||||||
|
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
||||||
|
%title
|
||||||
|
Blueprint Grid Tests
|
||||||
|
/
|
||||||
|
Framework CSS
|
||||||
|
%link{ :href => "../stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%link{ :href => "../stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
|
||||||
|
/
|
||||||
|
[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
|
||||||
|
%body
|
||||||
|
.container.showgrid
|
||||||
|
%h1
|
||||||
|
Blueprint Tests: grid.css
|
||||||
|
.span-8
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
|
.span-8
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
|
.span-8.last
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
|
.span-6.append-1
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
|
.span-6.append-2
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
|
.span-6.append-3.last
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
|
.span-6.prepend-1
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
|
.span-6.prepend-2
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
|
.span-6.prepend-3.last
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
|
%hr
|
||||||
|
.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.
|
||||||
|
.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.
|
||||||
|
%hr
|
||||||
|
.span-1.prepend-1
|
||||||
|
%p
|
||||||
|
1
|
||||||
|
.span-1.prepend-2
|
||||||
|
%p
|
||||||
|
2
|
||||||
|
.span-1.prepend-3
|
||||||
|
%p
|
||||||
|
3
|
||||||
|
.span-1.prepend-4
|
||||||
|
%p
|
||||||
|
4
|
||||||
|
.span-1.prepend-5
|
||||||
|
%p
|
||||||
|
5
|
||||||
|
.span-1.prepend-3.last
|
||||||
|
%p
|
||||||
|
3
|
||||||
|
.span-1.append-1
|
||||||
|
%p
|
||||||
|
1
|
||||||
|
.span-1.append-2
|
||||||
|
%p
|
||||||
|
2
|
||||||
|
.span-1.append-3
|
||||||
|
%p
|
||||||
|
3
|
||||||
|
.span-1.append-4
|
||||||
|
%p
|
||||||
|
4
|
||||||
|
.span-1.append-5
|
||||||
|
%p
|
||||||
|
5
|
||||||
|
.span-1.append-3.last
|
||||||
|
%p
|
||||||
|
3
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
1
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
2
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
3
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
4
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
5
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
6
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
7
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
8
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
9
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
10
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
11
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
12
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
13
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
14
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
15
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
16
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
17
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
18
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
19
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
20
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
21
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
22
|
||||||
|
.span-1.border
|
||||||
|
%p
|
||||||
|
23
|
||||||
|
.span-1.last
|
||||||
|
%p
|
||||||
|
24
|
||||||
|
.span-4
|
||||||
|
%p
|
||||||
|
1
|
||||||
|
.span-4
|
||||||
|
%p
|
||||||
|
2
|
||||||
|
.span-4
|
||||||
|
%p
|
||||||
|
3
|
||||||
|
.span-4
|
||||||
|
%p
|
||||||
|
4
|
||||||
|
.span-4
|
||||||
|
%p
|
||||||
|
5
|
||||||
|
.span-4.last
|
||||||
|
%p
|
||||||
|
6
|
||||||
|
.prepend-23.span-1.last
|
||||||
|
%p
|
||||||
|
24
|
||||||
|
.prepend-1.span-1
|
||||||
|
%p
|
||||||
|
2
|
||||||
|
.prepend-20.span-1.append-1.last
|
||||||
|
%p
|
||||||
|
23
|
||||||
|
%hr
|
||||||
|
.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.
|
||||||
|
.span-12
|
||||||
|
.span-6
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
|
||||||
|
.span-6.last
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.span-12.last
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.span-12.last
|
||||||
|
.span-6
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
|
||||||
|
.span-6.last
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.span-12.last
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.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.
|
||||||
|
%hr
|
||||||
|
.span-12
|
||||||
|
%h5
|
||||||
|
TESTING .PUSH-1 TO .PUSH-5
|
||||||
|
.span-2
|
||||||
|
%img.push-1{ :src => "test-small.jpg" }
|
||||||
|
.span-10.last
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.span-2
|
||||||
|
%img.push-2{ :src => "test-small.jpg" }
|
||||||
|
.span-10.last
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.span-2
|
||||||
|
%img.push-3{ :src => "test-small.jpg" }
|
||||||
|
.span-10.last
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.span-2
|
||||||
|
%img.push-4{ :src => "test-small.jpg" }
|
||||||
|
.span-10.last
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.span-2
|
||||||
|
%img.push-5{ :src => "test-small.jpg" }
|
||||||
|
.span-10.last
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.span-12.last
|
||||||
|
%h5
|
||||||
|
TESTING .PULL-1 TO .PULL-5
|
||||||
|
.span-10
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.span-2.last
|
||||||
|
%img.top.pull-1{ :src => "test-small.jpg" }
|
||||||
|
.span-10
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.span-2.last
|
||||||
|
%img.top.pull-2{ :src => "test-small.jpg" }
|
||||||
|
.span-10
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.span-2.last
|
||||||
|
%img.top.pull-3{ :src => "test-small.jpg" }
|
||||||
|
.span-10
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.span-2.last
|
||||||
|
%img.top.pull-4{ :src => "test-small.jpg" }
|
||||||
|
.span-10
|
||||||
|
%p
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
.span-2.last
|
||||||
|
%img.top.pull-5{ :src => "test-small.jpg" }
|
||||||
|
.span-24
|
||||||
|
%p
|
||||||
|
%a{ :href => "http://validator.w3.org/check?uri=referer" }
|
||||||
|
%img.bottom{ :src => "valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }
|
||||||
@ -1,80 +0,0 @@
|
|||||||
<!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 test pages</title>
|
|
||||||
|
|
||||||
<!-- Framework CSS -->
|
|
||||||
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen, projection">
|
|
||||||
<link rel="stylesheet" href="stylesheets/print.css" type="text/css" media="print">
|
|
||||||
<!--[if IE]><link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<h1>Blueprint test pages</h1>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<p>Welcome to the Blueprint Plugin 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="plugins/fancy_type.html">Fancy Type</a></td>
|
|
||||||
<td>
|
|
||||||
<a href="http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass">grid.sass</a>,
|
|
||||||
<a href="http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass">typography.sass</a>,
|
|
||||||
<a href="http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass">fancy_type.sass</a>
|
|
||||||
</td>
|
|
||||||
<td>A simple sample page, with common elements and fancy type.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="plugins/buttons.html">Buttons</a></td>
|
|
||||||
<td>
|
|
||||||
<a href="http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass">buttons.sass</a>
|
|
||||||
</td>
|
|
||||||
<td>A simple page, showing links and buttons styled using the button plugin.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="plugins/link_icons.html">Link Icons</a></td>
|
|
||||||
<td>
|
|
||||||
<a href="http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_link_icons.sass">link_icons.sass</a>
|
|
||||||
</td>
|
|
||||||
<td>A simple page, showing links icons.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="plugins/rtl.html">RTL</a></td>
|
|
||||||
<td>
|
|
||||||
<a href="http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass">rtl.sass</a>
|
|
||||||
</td>
|
|
||||||
<td>A simple page, showing a right-to-left grid layout.</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<p><em><strong>Note about the css files:</strong></em>
|
|
||||||
These test files utilize the css files that are generated from
|
|
||||||
<a href="http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html">Sass templates</a>.
|
|
||||||
In other words, if you change any of the source files,
|
|
||||||
you'll have to re-build them with <code>rake examples</code> 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://www.blueprintcss.org/">The Blueprint home page.</a></li>
|
|
||||||
<li><a href="http://groups.google.com/group/blueprintcss">Our anything-goes mailing list.</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p><a href="http://validator.w3.org/check?uri=referer">
|
|
||||||
<img src="images/valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a></p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
96
examples/blueprint_plugins/index.html.haml
Normal file
96
examples/blueprint_plugins/index.html.haml
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
!!!
|
||||||
|
%html{ :lang => "en" }
|
||||||
|
%head
|
||||||
|
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
||||||
|
%title
|
||||||
|
Blueprint test pages
|
||||||
|
/
|
||||||
|
Framework CSS
|
||||||
|
%link{ :href => "stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%link{ :href => "stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
|
||||||
|
/
|
||||||
|
[if IE]><link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
|
||||||
|
%body
|
||||||
|
.container
|
||||||
|
%h1
|
||||||
|
Blueprint test pages
|
||||||
|
%hr
|
||||||
|
%p
|
||||||
|
Welcome to the Blueprint Plugin test pages. The HTML files below tests most HTML elements, and especially classes provided
|
||||||
|
by Blueprint.
|
||||||
|
%table{ :cellspacing => "0", :border => "0", :cellpadding => "0" }
|
||||||
|
%tr
|
||||||
|
%th.span-6
|
||||||
|
Test page
|
||||||
|
%th.span-8
|
||||||
|
Main files tested
|
||||||
|
%th.span-10
|
||||||
|
Description
|
||||||
|
%tr
|
||||||
|
%td
|
||||||
|
%a{ :href => "plugins/fancy_type.html" }
|
||||||
|
Fancy Type
|
||||||
|
%td
|
||||||
|
%a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass" }
|
||||||
|
grid.sass
|
||||||
|
,
|
||||||
|
%a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass" }
|
||||||
|
typography.sass
|
||||||
|
,
|
||||||
|
%a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass" }
|
||||||
|
fancy_type.sass
|
||||||
|
%td
|
||||||
|
A simple sample page, with common elements and fancy type.
|
||||||
|
%tr
|
||||||
|
%td
|
||||||
|
%a{ :href => "plugins/buttons.html" }
|
||||||
|
Buttons
|
||||||
|
%td
|
||||||
|
%a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass" }
|
||||||
|
buttons.sass
|
||||||
|
%td
|
||||||
|
A simple page, showing links and buttons styled using the button plugin.
|
||||||
|
%tr
|
||||||
|
%td
|
||||||
|
%a{ :href => "plugins/link_icons.html" }
|
||||||
|
Link Icons
|
||||||
|
%td
|
||||||
|
%a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_link_icons.sass" }
|
||||||
|
link_icons.sass
|
||||||
|
%td
|
||||||
|
A simple page, showing links icons.
|
||||||
|
%tr
|
||||||
|
%td
|
||||||
|
%a{ :href => "plugins/rtl.html" }
|
||||||
|
RTL
|
||||||
|
%td
|
||||||
|
%a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass" }
|
||||||
|
rtl.sass
|
||||||
|
%td
|
||||||
|
A simple page, showing a right-to-left grid layout.
|
||||||
|
%p
|
||||||
|
%em
|
||||||
|
%strong
|
||||||
|
Note about the css files:
|
||||||
|
These test files utilize the css files that are generated from
|
||||||
|
%a{ :href => "http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html" }
|
||||||
|
Sass templates
|
||||||
|
\.
|
||||||
|
In other words, if you change any of the source files,
|
||||||
|
you'll have to re-build them with
|
||||||
|
%code
|
||||||
|
rake examples
|
||||||
|
to see any changes.
|
||||||
|
.box
|
||||||
|
%p
|
||||||
|
For more information and help, try these resources:
|
||||||
|
%ul.bottom
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://www.blueprintcss.org/" }
|
||||||
|
The Blueprint home page.
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://groups.google.com/group/blueprintcss" }
|
||||||
|
Our anything-goes mailing list.
|
||||||
|
%p
|
||||||
|
%a{ :href => "http://validator.w3.org/check?uri=referer" }
|
||||||
|
%img.top{ :src => "images/valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }
|
||||||
@ -1,59 +0,0 @@
|
|||||||
<!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 Buttons Sample Page</title>
|
|
||||||
|
|
||||||
<!-- Framework CSS -->
|
|
||||||
<link rel="stylesheet" href="../stylesheets/screen.css" type="text/css" media="screen, projection">
|
|
||||||
<link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
|
|
||||||
<!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
|
||||||
<link rel="stylesheet" href="../stylesheets/buttons.css" type="text/css" media="screen, projection">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<h1>A Button Example Page</h1>
|
|
||||||
<hr>
|
|
||||||
<h2 class="alt">This sample page demonstrates what you can do with the Buttons plugin.</h2>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div class="span-12">
|
|
||||||
<h3>Link Buttons</h3>
|
|
||||||
<a class="button">Link Button</a>
|
|
||||||
<a class="button positive">Positive Button</a>
|
|
||||||
<a class="button negative">Negative Button</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="span-12 last">
|
|
||||||
<h3>Real Buttons</h3>
|
|
||||||
<button>Normal Button</button>
|
|
||||||
<button class="positive">Positive Button</button>
|
|
||||||
<button class="negative">Negative Button</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="span-12">
|
|
||||||
<h3>Link Buttons with Images</h3>
|
|
||||||
<a class="button"><img src="../images/buttons/tick.png" alt=""/> Save</a>
|
|
||||||
<a class="button positive"><img src="../images/buttons/key.png" alt=""/> Change Password</a>
|
|
||||||
<a class="button negative"><img src="../images/buttons/cross.png" alt=""/> Cancel</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="span-12 last">
|
|
||||||
<h3>Real Buttons with Images</h3>
|
|
||||||
<button><img src="../images/buttons/tick.png" alt=""/> Save</button>
|
|
||||||
<button class="positive"><img src="../images/buttons/key.png" alt=""/> Change Password</button>
|
|
||||||
<button class="negative"><img src="../images/buttons/cross.png" alt=""/> Cancel</button>
|
|
||||||
</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="top"></a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
67
examples/blueprint_plugins/plugins/buttons.html.haml
Normal file
67
examples/blueprint_plugins/plugins/buttons.html.haml
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
!!!
|
||||||
|
%html{ :lang => "en" }
|
||||||
|
%head
|
||||||
|
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
||||||
|
%title
|
||||||
|
Blueprint Buttons Sample Page
|
||||||
|
/
|
||||||
|
Framework CSS
|
||||||
|
%link{ :href => "../stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%link{ :href => "../stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
|
||||||
|
/
|
||||||
|
[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
|
||||||
|
%link{ :href => "../stylesheets/buttons.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%body
|
||||||
|
.container
|
||||||
|
%h1
|
||||||
|
A Button Example Page
|
||||||
|
%hr
|
||||||
|
%h2.alt
|
||||||
|
This sample page demonstrates what you can do with the Buttons plugin.
|
||||||
|
%hr
|
||||||
|
.span-12
|
||||||
|
%h3
|
||||||
|
Link Buttons
|
||||||
|
%a.button
|
||||||
|
Link Button
|
||||||
|
%a.button.positive
|
||||||
|
Positive Button
|
||||||
|
%a.button.negative
|
||||||
|
Negative Button
|
||||||
|
.span-12.last
|
||||||
|
%h3
|
||||||
|
Real Buttons
|
||||||
|
%button
|
||||||
|
Normal Button
|
||||||
|
%button.positive
|
||||||
|
Positive Button
|
||||||
|
%button.negative
|
||||||
|
Negative Button
|
||||||
|
.span-12
|
||||||
|
%h3
|
||||||
|
Link Buttons with Images
|
||||||
|
%a.button
|
||||||
|
%img{ :src => "../images/buttons/tick.png", :alt => "" }
|
||||||
|
Save
|
||||||
|
%a.button.positive
|
||||||
|
%img{ :src => "../images/buttons/key.png", :alt => "" }
|
||||||
|
Change Password
|
||||||
|
%a.button.negative
|
||||||
|
%img{ :src => "../images/buttons/cross.png", :alt => "" }
|
||||||
|
Cancel
|
||||||
|
.span-12.last
|
||||||
|
%h3
|
||||||
|
Real Buttons with Images
|
||||||
|
%button
|
||||||
|
%img{ :src => "../images/buttons/tick.png", :alt => "" }
|
||||||
|
Save
|
||||||
|
%button.positive
|
||||||
|
%img{ :src => "../images/buttons/key.png", :alt => "" }
|
||||||
|
Change Password
|
||||||
|
%button.negative
|
||||||
|
%img{ :src => "../images/buttons/cross.png", :alt => "" }
|
||||||
|
Cancel
|
||||||
|
.span-24
|
||||||
|
%p
|
||||||
|
%a{ :href => "http://validator.w3.org/check?uri=referer" }
|
||||||
|
%img.top{ :src => "valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }
|
||||||
@ -1,84 +0,0 @@
|
|||||||
<!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 Sample Page</title>
|
|
||||||
|
|
||||||
<!-- Framework CSS -->
|
|
||||||
<link rel="stylesheet" href="../stylesheets/screen.css" type="text/css" media="screen, projection">
|
|
||||||
<link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
|
|
||||||
<!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
|
||||||
</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="../images/test.jpg" class="left top pull-1" 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>
|
|
||||||
100
examples/blueprint_plugins/plugins/fancy_type.html.haml
Normal file
100
examples/blueprint_plugins/plugins/fancy_type.html.haml
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
!!!
|
||||||
|
%html{ :lang => "en" }
|
||||||
|
%head
|
||||||
|
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
||||||
|
%title
|
||||||
|
Blueprint Sample Page
|
||||||
|
/
|
||||||
|
Framework CSS
|
||||||
|
%link{ :href => "../stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%link{ :href => "../stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
|
||||||
|
/
|
||||||
|
[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
|
||||||
|
%body
|
||||||
|
.container
|
||||||
|
%h1
|
||||||
|
A simple sample page
|
||||||
|
%hr
|
||||||
|
%h2.alt
|
||||||
|
This sample page demonstrates a tiny fraction of what you get with Blueprint.
|
||||||
|
%hr
|
||||||
|
.span-7.colborder
|
||||||
|
%h6
|
||||||
|
Here's a box
|
||||||
|
%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.
|
||||||
|
.span-8.colborder
|
||||||
|
%h6
|
||||||
|
And another box
|
||||||
|
%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.
|
||||||
|
.span-7.last
|
||||||
|
%h6
|
||||||
|
This box is aligned with the sidebar
|
||||||
|
%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.
|
||||||
|
%hr
|
||||||
|
%hr.space
|
||||||
|
.span-15.prepend-1.colborder
|
||||||
|
%p
|
||||||
|
%img.left.top.pull-1{ :src => "../images/test.jpg", :alt => "test" }
|
||||||
|
Lorem ipsum dolor sit amet,
|
||||||
|
%em
|
||||||
|
consectetuer adipiscing elit
|
||||||
|
\. 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
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||||
|
%a{ :href => "#" }
|
||||||
|
Morbi et risus
|
||||||
|
\. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent
|
||||||
|
%span.caps
|
||||||
|
SMALL CAPS
|
||||||
|
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
|
||||||
|
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
|
||||||
|
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.
|
||||||
|
%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
|
||||||
|
Maecenas vel metus quis magna pharetra fermentum.
|
||||||
|
%em
|
||||||
|
Integer sit amet tortor
|
||||||
|
\. 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.
|
||||||
|
%hr
|
||||||
|
.span-7.colborder
|
||||||
|
%h6
|
||||||
|
This is a nested column
|
||||||
|
%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.
|
||||||
|
.span-7.last
|
||||||
|
%h6
|
||||||
|
This is another nested column
|
||||||
|
%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.
|
||||||
|
.span-7.last
|
||||||
|
%h3
|
||||||
|
A
|
||||||
|
%span.alt
|
||||||
|
Simple
|
||||||
|
Sidebar
|
||||||
|
%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
|
||||||
|
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.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.
|
||||||
|
%h5
|
||||||
|
Incremental leading
|
||||||
|
%p.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.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.
|
||||||
|
%hr
|
||||||
|
%h2.alt
|
||||||
|
You may pick and choose amongst these and many more features, so be bold.
|
||||||
|
%hr
|
||||||
|
%p
|
||||||
|
%a{ :href => "http://validator.w3.org/check?uri=referer" }
|
||||||
|
%img.top{ :src => "valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }
|
||||||
@ -1,59 +0,0 @@
|
|||||||
<!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 Link Icons Sample Page</title>
|
|
||||||
|
|
||||||
<!-- Framework CSS -->
|
|
||||||
<link rel="stylesheet" href="../stylesheets/screen.css" type="text/css" media="screen, projection">
|
|
||||||
<link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
|
|
||||||
<!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
|
||||||
<link rel="stylesheet" href="../stylesheets/link_icons.css" type="text/css" media="screen, projection">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<h1>A Link Icons Example Page</h1>
|
|
||||||
<hr>
|
|
||||||
<h2 class="alt">This sample page demonstrates what you can do with the Link Icons plugin.</h2>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div class="span-12">
|
|
||||||
<h3>External Links</h3>
|
|
||||||
<a href="http://www.no-such-website.com/">A Normal External Link</a>
|
|
||||||
<a href="http://www.google.com">A Visited External Link</a>
|
|
||||||
<a href="mailto:donald@duck.com">An Email Link</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="span-12 last">
|
|
||||||
<h3>Document Links</h3>
|
|
||||||
<a href="http://www.no-such-website.com/sample.pdf">A .pdf Link</a>
|
|
||||||
<a href="http://www.no-such-website.com/sample.doc">A .doc Link</a>
|
|
||||||
<a href="http://www.no-such-website.com/sample.xls">A .xls Link</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="span-12">
|
|
||||||
<h3>Misc Links</h3>
|
|
||||||
<a href="http://www.no-such-website.com/sample.rss">An RSS Link</a>
|
|
||||||
<a href="http://www.no-such-website.com/sample.rdf">An Atom Link</a>
|
|
||||||
<a href="aim:chatmeup">A Instant Messenger Link</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="span-12 last">
|
|
||||||
<h3>Turning Icons Off</h3>
|
|
||||||
<a href="http://www.no-such-website.com/" class="noicon">A Normal External Link</a>
|
|
||||||
<a href="http://www.google.com" class="noicon">A Visited External Link</a>
|
|
||||||
<a href="mailto:donald@duck.com" class="noicon">An Email Link</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="span-24">
|
|
||||||
<p><a href="http://validator.w3.org/check?uri=referer" class="noicon">
|
|
||||||
<img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
61
examples/blueprint_plugins/plugins/link_icons.html.haml
Normal file
61
examples/blueprint_plugins/plugins/link_icons.html.haml
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
!!!
|
||||||
|
%html{ :lang => "en" }
|
||||||
|
%head
|
||||||
|
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
||||||
|
%title
|
||||||
|
Blueprint Link Icons Sample Page
|
||||||
|
/
|
||||||
|
Framework CSS
|
||||||
|
%link{ :href => "../stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%link{ :href => "../stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
|
||||||
|
/
|
||||||
|
[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
|
||||||
|
%link{ :href => "../stylesheets/link_icons.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%body
|
||||||
|
.container
|
||||||
|
%h1
|
||||||
|
A Link Icons Example Page
|
||||||
|
%hr
|
||||||
|
%h2.alt
|
||||||
|
This sample page demonstrates what you can do with the Link Icons plugin.
|
||||||
|
%hr
|
||||||
|
.span-12
|
||||||
|
%h3
|
||||||
|
External Links
|
||||||
|
%a{ :href => "http://www.no-such-website.com/" }
|
||||||
|
A Normal External Link
|
||||||
|
%a{ :href => "http://www.google.com" }
|
||||||
|
A Visited External Link
|
||||||
|
%a{ :href => "mailto:donald@duck.com" }
|
||||||
|
An Email Link
|
||||||
|
.span-12.last
|
||||||
|
%h3
|
||||||
|
Document Links
|
||||||
|
%a{ :href => "http://www.no-such-website.com/sample.pdf" }
|
||||||
|
A .pdf Link
|
||||||
|
%a{ :href => "http://www.no-such-website.com/sample.doc" }
|
||||||
|
A .doc Link
|
||||||
|
%a{ :href => "http://www.no-such-website.com/sample.xls" }
|
||||||
|
A .xls Link
|
||||||
|
.span-12
|
||||||
|
%h3
|
||||||
|
Misc Links
|
||||||
|
%a{ :href => "http://www.no-such-website.com/sample.rss" }
|
||||||
|
An RSS Link
|
||||||
|
%a{ :href => "http://www.no-such-website.com/sample.rdf" }
|
||||||
|
An Atom Link
|
||||||
|
%a{ :href => "aim:chatmeup" }
|
||||||
|
A Instant Messenger Link
|
||||||
|
.span-12.last
|
||||||
|
%h3
|
||||||
|
Turning Icons Off
|
||||||
|
%a.noicon{ :href => "http://www.no-such-website.com/" }
|
||||||
|
A Normal External Link
|
||||||
|
%a.noicon{ :href => "http://www.google.com" }
|
||||||
|
A Visited External Link
|
||||||
|
%a.noicon{ :href => "mailto:donald@duck.com" }
|
||||||
|
An Email Link
|
||||||
|
.span-24
|
||||||
|
%p
|
||||||
|
%a.noicon{ :href => "http://validator.w3.org/check?uri=referer" }
|
||||||
|
%img.top{ :src => "valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }
|
||||||
@ -1,84 +0,0 @@
|
|||||||
<!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 Sample Page</title>
|
|
||||||
|
|
||||||
<!-- Framework CSS -->
|
|
||||||
<link rel="stylesheet" href="../stylesheets/rtl_screen.css" type="text/css" media="screen, projection">
|
|
||||||
<link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
|
|
||||||
<!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
|
||||||
</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="../images/test.jpg" class="left top pull-1" 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>
|
|
||||||
100
examples/blueprint_plugins/plugins/rtl.html.haml
Normal file
100
examples/blueprint_plugins/plugins/rtl.html.haml
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
!!!
|
||||||
|
%html{ :lang => "en" }
|
||||||
|
%head
|
||||||
|
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
||||||
|
%title
|
||||||
|
Blueprint Sample Page
|
||||||
|
/
|
||||||
|
Framework CSS
|
||||||
|
%link{ :href => "../stylesheets/rtl_screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%link{ :href => "../stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
|
||||||
|
/
|
||||||
|
[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
|
||||||
|
%body
|
||||||
|
.container
|
||||||
|
%h1
|
||||||
|
A simple sample page
|
||||||
|
%hr
|
||||||
|
%h2.alt
|
||||||
|
This sample page demonstrates a tiny fraction of what you get with Blueprint.
|
||||||
|
%hr
|
||||||
|
.span-7.colborder
|
||||||
|
%h6
|
||||||
|
Here's a box
|
||||||
|
%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.
|
||||||
|
.span-8.colborder
|
||||||
|
%h6
|
||||||
|
And another box
|
||||||
|
%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.
|
||||||
|
.span-7.last
|
||||||
|
%h6
|
||||||
|
This box is aligned with the sidebar
|
||||||
|
%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.
|
||||||
|
%hr
|
||||||
|
%hr.space
|
||||||
|
.span-15.prepend-1.colborder
|
||||||
|
%p
|
||||||
|
%img.left.top.pull-1{ :src => "../images/test.jpg", :alt => "test" }
|
||||||
|
Lorem ipsum dolor sit amet,
|
||||||
|
%em
|
||||||
|
consectetuer adipiscing elit
|
||||||
|
\. 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
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||||
|
%a{ :href => "#" }
|
||||||
|
Morbi et risus
|
||||||
|
\. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent
|
||||||
|
%span.caps
|
||||||
|
SMALL CAPS
|
||||||
|
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
|
||||||
|
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
|
||||||
|
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.
|
||||||
|
%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
|
||||||
|
Maecenas vel metus quis magna pharetra fermentum.
|
||||||
|
%em
|
||||||
|
Integer sit amet tortor
|
||||||
|
\. 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.
|
||||||
|
%hr
|
||||||
|
.span-7.colborder
|
||||||
|
%h6
|
||||||
|
This is a nested column
|
||||||
|
%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.
|
||||||
|
.span-7.last
|
||||||
|
%h6
|
||||||
|
This is another nested column
|
||||||
|
%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.
|
||||||
|
.span-7.last
|
||||||
|
%h3
|
||||||
|
A
|
||||||
|
%span.alt
|
||||||
|
Simple
|
||||||
|
Sidebar
|
||||||
|
%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
|
||||||
|
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.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.
|
||||||
|
%h5
|
||||||
|
Incremental leading
|
||||||
|
%p.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.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.
|
||||||
|
%hr
|
||||||
|
%h2.alt
|
||||||
|
You may pick and choose amongst these and many more features, so be bold.
|
||||||
|
%hr
|
||||||
|
%p
|
||||||
|
%a{ :href => "http://validator.w3.org/check?uri=referer" }
|
||||||
|
%img.top{ :src => "valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }
|
||||||
@ -1,68 +0,0 @@
|
|||||||
<!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 test pages</title>
|
|
||||||
|
|
||||||
<!-- Framework CSS -->
|
|
||||||
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen, projection">
|
|
||||||
<link rel="stylesheet" href="stylesheets/print.css" type="text/css" media="print">
|
|
||||||
<!--[if IE]><link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
|
||||||
</head>
|
|
||||||
<body id="index" class="blueprint">
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<h1>Blueprint Semantic Test Pages</h1>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<p>Welcome to the Blueprint Semantic test pages. The HTML files below test the assignment of styles to semantic classes and ids using Sass mixins.</p>
|
|
||||||
|
|
||||||
<table border="0" cellspacing="0" cellpadding="0">
|
|
||||||
<tr>
|
|
||||||
<th id="page-header">Test page</th>
|
|
||||||
<th id="files-header">Main files tested</th>
|
|
||||||
<th id="description-header">Description</th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="parts/fancy_type.html">Fancy Type</a></td>
|
|
||||||
<td>
|
|
||||||
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass">grid.sass</a>,
|
|
||||||
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass">typography.sass</a>,
|
|
||||||
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass">fancy_type.sass</a>
|
|
||||||
</td>
|
|
||||||
<td>A simple sample page, with common elements and fancy type.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="parts/liquid.html">Liquid Grid</a></td>
|
|
||||||
<td>
|
|
||||||
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass">liquid.sass</a>,
|
|
||||||
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass">typography.sass</a>,
|
|
||||||
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass">fancy_type.sass</a>
|
|
||||||
</td>
|
|
||||||
<td>Like Fancy Type, but using a liquid percent based grid.</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<p><em><strong>Note about the css files:</strong></em>
|
|
||||||
These test files utilize the css files that are generated from
|
|
||||||
<a href="http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html">Sass templates</a>.
|
|
||||||
In other words, if you change any of the source files,
|
|
||||||
you'll have to re-build them with <code>rake examples</code> to see any changes.</p>
|
|
||||||
|
|
||||||
<div id="info">
|
|
||||||
<p>For more information and help, try these resources:</p>
|
|
||||||
<ul>
|
|
||||||
<li><a href="http://code.google.com/p/blueprintcss">The Blueprint home page.</a></li>
|
|
||||||
<li><a href="http://groups.google.com/group/blueprintcss">Our anything-goes mailing list.</a></li>
|
|
||||||
<li><a href="http://bjorkoy.com">The blog where news about Blueprint gets posted.</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" id="w3c"></a></p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
86
examples/blueprint_semantic/index.html.haml
Normal file
86
examples/blueprint_semantic/index.html.haml
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
!!!
|
||||||
|
%html{ :lang => "en" }
|
||||||
|
%head
|
||||||
|
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
||||||
|
%title
|
||||||
|
Blueprint test pages
|
||||||
|
/
|
||||||
|
Framework CSS
|
||||||
|
%link{ :href => "stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%link{ :href => "stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
|
||||||
|
/
|
||||||
|
[if IE]><link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
|
||||||
|
%body#index.blueprint
|
||||||
|
.container
|
||||||
|
%h1
|
||||||
|
Blueprint Semantic Test Pages
|
||||||
|
%hr
|
||||||
|
%p
|
||||||
|
Welcome to the Blueprint Semantic test pages. The HTML files below test the assignment of styles to semantic classes and ids using Sass mixins.
|
||||||
|
%table{ :cellspacing => "0", :border => "0", :cellpadding => "0" }
|
||||||
|
%tr
|
||||||
|
%th#page-header
|
||||||
|
Test page
|
||||||
|
%th#files-header
|
||||||
|
Main files tested
|
||||||
|
%th#description-header
|
||||||
|
Description
|
||||||
|
%tr
|
||||||
|
%td
|
||||||
|
%a{ :href => "parts/fancy_type.html" }
|
||||||
|
Fancy Type
|
||||||
|
%td
|
||||||
|
%a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass" }
|
||||||
|
grid.sass
|
||||||
|
,
|
||||||
|
%a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass" }
|
||||||
|
typography.sass
|
||||||
|
,
|
||||||
|
%a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass" }
|
||||||
|
fancy_type.sass
|
||||||
|
%td
|
||||||
|
A simple sample page, with common elements and fancy type.
|
||||||
|
%tr
|
||||||
|
%td
|
||||||
|
%a{ :href => "parts/liquid.html" }
|
||||||
|
Liquid Grid
|
||||||
|
%td
|
||||||
|
%a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass" }
|
||||||
|
liquid.sass
|
||||||
|
,
|
||||||
|
%a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass" }
|
||||||
|
typography.sass
|
||||||
|
,
|
||||||
|
%a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass" }
|
||||||
|
fancy_type.sass
|
||||||
|
%td
|
||||||
|
Like Fancy Type, but using a liquid percent based grid.
|
||||||
|
%p
|
||||||
|
%em
|
||||||
|
%strong
|
||||||
|
Note about the css files:
|
||||||
|
These test files utilize the css files that are generated from
|
||||||
|
%a{ :href => "http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html" }
|
||||||
|
Sass templates
|
||||||
|
\.
|
||||||
|
In other words, if you change any of the source files,
|
||||||
|
you'll have to re-build them with
|
||||||
|
%code
|
||||||
|
rake examples
|
||||||
|
to see any changes.
|
||||||
|
#info
|
||||||
|
%p
|
||||||
|
For more information and help, try these resources:
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://code.google.com/p/blueprintcss" }
|
||||||
|
The Blueprint home page.
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://groups.google.com/group/blueprintcss" }
|
||||||
|
Our anything-goes mailing list.
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://bjorkoy.com" }
|
||||||
|
The blog where news about Blueprint gets posted.
|
||||||
|
%p
|
||||||
|
%a{ :href => "http://validator.w3.org/check?uri=referer" }
|
||||||
|
%img#w3c{ :src => "parts/valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }
|
||||||
@ -1,84 +0,0 @@
|
|||||||
<!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 Semantic Sample Page</title>
|
|
||||||
|
|
||||||
<!-- Framework CSS -->
|
|
||||||
<link rel="stylesheet" href="../stylesheets/screen.css" type="text/css" media="screen, projection">
|
|
||||||
<link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
|
|
||||||
<!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body id="sample" class="blueprint">
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<h1>A simple sample page</h1>
|
|
||||||
<hr>
|
|
||||||
<h2>This sample page demonstrates a tiny fraction of what you get with Blueprint.</h2>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div id="first-box">
|
|
||||||
<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 id="another-box">
|
|
||||||
<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 id="aligned-box">
|
|
||||||
<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 id="main">
|
|
||||||
<p><img src="test.jpg" id="test" 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 <em class="caps">small caps</em> 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 id="nested-1">
|
|
||||||
<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 id="nested-2">
|
|
||||||
<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 id="sidebar">
|
|
||||||
|
|
||||||
<h3>A <em>Simple</em> 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 id="parting-thought">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" id="w3c"></a></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
100
examples/blueprint_semantic/parts/fancy_type.html.haml
Normal file
100
examples/blueprint_semantic/parts/fancy_type.html.haml
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
!!!
|
||||||
|
%html{ :lang => "en" }
|
||||||
|
%head
|
||||||
|
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
||||||
|
%title
|
||||||
|
Blueprint Semantic Sample Page
|
||||||
|
/
|
||||||
|
Framework CSS
|
||||||
|
%link{ :href => "../stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%link{ :href => "../stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
|
||||||
|
/
|
||||||
|
[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
|
||||||
|
%body#sample.blueprint
|
||||||
|
.container
|
||||||
|
%h1
|
||||||
|
A simple sample page
|
||||||
|
%hr
|
||||||
|
%h2
|
||||||
|
This sample page demonstrates a tiny fraction of what you get with Blueprint.
|
||||||
|
%hr
|
||||||
|
#first-box
|
||||||
|
%h6
|
||||||
|
Here's a box
|
||||||
|
%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.
|
||||||
|
#another-box
|
||||||
|
%h6
|
||||||
|
And another box
|
||||||
|
%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.
|
||||||
|
#aligned-box
|
||||||
|
%h6
|
||||||
|
This box is aligned with the sidebar
|
||||||
|
%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.
|
||||||
|
%hr
|
||||||
|
%hr.space
|
||||||
|
#main
|
||||||
|
%p
|
||||||
|
%img#test{ :src => "test.jpg", :alt => "test" }
|
||||||
|
Lorem ipsum dolor sit amet,
|
||||||
|
%em
|
||||||
|
consectetuer adipiscing elit
|
||||||
|
\. 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
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||||
|
%a{ :href => "#" }
|
||||||
|
Morbi et risus
|
||||||
|
\. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent
|
||||||
|
%em.caps
|
||||||
|
small caps
|
||||||
|
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
|
||||||
|
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
|
||||||
|
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.
|
||||||
|
%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
|
||||||
|
Maecenas vel metus quis magna pharetra fermentum.
|
||||||
|
%em
|
||||||
|
Integer sit amet tortor
|
||||||
|
\. 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.
|
||||||
|
%hr
|
||||||
|
#nested-1
|
||||||
|
%h6
|
||||||
|
This is a nested column
|
||||||
|
%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.
|
||||||
|
#nested-2
|
||||||
|
%h6
|
||||||
|
This is another nested column
|
||||||
|
%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.
|
||||||
|
#sidebar
|
||||||
|
%h3
|
||||||
|
A
|
||||||
|
%em
|
||||||
|
Simple
|
||||||
|
Sidebar
|
||||||
|
%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
|
||||||
|
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.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.
|
||||||
|
%h5
|
||||||
|
Incremental leading
|
||||||
|
%p.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.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.
|
||||||
|
%hr
|
||||||
|
%h2#parting-thought
|
||||||
|
You may pick and choose amongst these and many more features, so be bold.
|
||||||
|
%hr
|
||||||
|
%p
|
||||||
|
%a{ :href => "http://validator.w3.org/check?uri=referer" }
|
||||||
|
%img#w3c{ :src => "valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }
|
||||||
@ -1,84 +0,0 @@
|
|||||||
<!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 Liquid Grid Semantic Sample Page</title>
|
|
||||||
|
|
||||||
<!-- Framework CSS -->
|
|
||||||
<link rel="stylesheet" href="../stylesheets/liquid.css" type="text/css" media="screen, projection">
|
|
||||||
<link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
|
|
||||||
<!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body id="sample" class="blueprint">
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<h1>A simple sample page</h1>
|
|
||||||
<hr>
|
|
||||||
<h2>This sample page demonstrates a tiny fraction of what you get with Blueprint.</h2>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div id="first-box">
|
|
||||||
<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 id="another-box">
|
|
||||||
<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 id="aligned-box">
|
|
||||||
<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 id="main">
|
|
||||||
<p><img src="test.jpg" id="test" 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 <em class="caps">small caps</em> 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 id="nested-1">
|
|
||||||
<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 id="nested-2">
|
|
||||||
<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 id="sidebar">
|
|
||||||
|
|
||||||
<h3>A <em>Simple</em> 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 id="parting-thought">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" id="w3c"></a></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
100
examples/blueprint_semantic/parts/liquid.html.haml
Normal file
100
examples/blueprint_semantic/parts/liquid.html.haml
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
!!!
|
||||||
|
%html{ :lang => "en" }
|
||||||
|
%head
|
||||||
|
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
||||||
|
%title
|
||||||
|
Blueprint Liquid Grid Semantic Sample Page
|
||||||
|
/
|
||||||
|
Framework CSS
|
||||||
|
%link{ :href => "../stylesheets/liquid.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%link{ :href => "../stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
|
||||||
|
/
|
||||||
|
[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
|
||||||
|
%body#sample.blueprint
|
||||||
|
.container
|
||||||
|
%h1
|
||||||
|
A simple sample page
|
||||||
|
%hr
|
||||||
|
%h2
|
||||||
|
This sample page demonstrates a tiny fraction of what you get with Blueprint.
|
||||||
|
%hr
|
||||||
|
#first-box
|
||||||
|
%h6
|
||||||
|
Here's a box
|
||||||
|
%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.
|
||||||
|
#another-box
|
||||||
|
%h6
|
||||||
|
And another box
|
||||||
|
%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.
|
||||||
|
#aligned-box
|
||||||
|
%h6
|
||||||
|
This box is aligned with the sidebar
|
||||||
|
%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.
|
||||||
|
%hr
|
||||||
|
%hr.space
|
||||||
|
#main
|
||||||
|
%p
|
||||||
|
%img#test{ :src => "test.jpg", :alt => "test" }
|
||||||
|
Lorem ipsum dolor sit amet,
|
||||||
|
%em
|
||||||
|
consectetuer adipiscing elit
|
||||||
|
\. 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
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||||
|
%a{ :href => "#" }
|
||||||
|
Morbi et risus
|
||||||
|
\. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent
|
||||||
|
%em.caps
|
||||||
|
small caps
|
||||||
|
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
|
||||||
|
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
|
||||||
|
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.
|
||||||
|
%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
|
||||||
|
Maecenas vel metus quis magna pharetra fermentum.
|
||||||
|
%em
|
||||||
|
Integer sit amet tortor
|
||||||
|
\. 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.
|
||||||
|
%hr
|
||||||
|
#nested-1
|
||||||
|
%h6
|
||||||
|
This is a nested column
|
||||||
|
%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.
|
||||||
|
#nested-2
|
||||||
|
%h6
|
||||||
|
This is another nested column
|
||||||
|
%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.
|
||||||
|
#sidebar
|
||||||
|
%h3
|
||||||
|
A
|
||||||
|
%em
|
||||||
|
Simple
|
||||||
|
Sidebar
|
||||||
|
%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
|
||||||
|
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.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.
|
||||||
|
%h5
|
||||||
|
Incremental leading
|
||||||
|
%p.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.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.
|
||||||
|
%hr
|
||||||
|
%h2#parting-thought
|
||||||
|
You may pick and choose amongst these and many more features, so be bold.
|
||||||
|
%hr
|
||||||
|
%p
|
||||||
|
%a{ :href => "http://validator.w3.org/check?uri=referer" }
|
||||||
|
%img#w3c{ :src => "valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Compass Example</title>
|
|
||||||
<link rel="stylesheet" href="stylesheets/compass.css" type="text/css" media="screen, projection">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="compass">
|
|
||||||
<div class="n"><p>North</p></div>
|
|
||||||
<div class="n e"><p>North<br/>East</p></div>
|
|
||||||
<div class="e"><p>East</p></div>
|
|
||||||
<div class="s e"><p>South<br/>East</p></div>
|
|
||||||
<div class="s"><p>South</p></div>
|
|
||||||
<div class="s w"><p>South<br/>West</p></div>
|
|
||||||
<div class="w"><p>West</p></div>
|
|
||||||
<div class="n w"><p>North<br/>West</p></div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
39
examples/compass/compass.html.haml
Normal file
39
examples/compass/compass.html.haml
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
%html
|
||||||
|
%head
|
||||||
|
%title
|
||||||
|
Compass Example
|
||||||
|
%link{ :href => "stylesheets/compass.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
|
||||||
|
%body
|
||||||
|
.compass
|
||||||
|
.n
|
||||||
|
%p
|
||||||
|
North
|
||||||
|
.n.e
|
||||||
|
%p
|
||||||
|
North
|
||||||
|
%br
|
||||||
|
East
|
||||||
|
.e
|
||||||
|
%p
|
||||||
|
East
|
||||||
|
.s.e
|
||||||
|
%p
|
||||||
|
South
|
||||||
|
%br
|
||||||
|
East
|
||||||
|
.s
|
||||||
|
%p
|
||||||
|
South
|
||||||
|
.s.w
|
||||||
|
%p
|
||||||
|
South
|
||||||
|
%br
|
||||||
|
West
|
||||||
|
.w
|
||||||
|
%p
|
||||||
|
West
|
||||||
|
.n.w
|
||||||
|
%p
|
||||||
|
North
|
||||||
|
%br
|
||||||
|
West
|
||||||
Loading…
Reference in New Issue
Block a user