Initial Checkin of Compass. Used to be Blueprint-Sass.

This commit is contained in:
Chris Eppstein 2008-08-23 10:00:46 -07:00
commit 88ed4591cc
88 changed files with 3060 additions and 0 deletions

6
.gitignore vendored Normal file
View File

@ -0,0 +1,6 @@
*.DS_Store
tmp/*
built_examples/*
test/tmp
test/fixtures/*/saved
test/fixtures/*/tmp

80
Rakefile Normal file
View File

@ -0,0 +1,80 @@
require 'rubygems'
require 'rake'
require 'lib/compass'
# ----- Default: Testing ------
task :default => :tests
require 'rake/testtask'
require 'fileutils'
Rake::TestTask.new :test do |t|
t.libs << 'lib'
test_files = FileList['test/**/*_test.rb']
test_files.exclude('test/rails/*', 'test/haml/*')
t.test_files = test_files
t.verbose = true
end
Rake::Task[:test].send(:add_comment, <<END)
To run with an alternate version of Rails, make test/rails a symlink to that version.
To run with an alternate version of Haml & Sass, make test/haml a symlink to that version.
END
desc "Compile Examples into HTML and CSS"
task :examples do
linked_haml = "tests/haml"
if File.exists?(linked_haml) && !$:.include?(linked_haml + '/lib')
puts "[ using linked Haml ]"
$:.unshift linked_haml + '/lib'
end
require 'haml'
require 'sass'
require 'pathname'
FileList['examples/*'].each do |example|
puts "Compiling #{example} -> built_examples/#{example.sub(%r{.*/},'')}"
# compile any haml templates to html
FileList["#{example}/*.haml"].each do |haml_file|
basename = haml_file[9..-6]
engine = Haml::Engine.new(open(haml_file).read, :filename => haml_file)
target_dir = "built_examples/#{basename.sub(%r{/[^/]*$},'')}"
FileUtils.mkdir_p(target_dir)
output = open("built_examples/#{basename}",'w')
output.write(engine.render)
output.close
end
# compile any sass templates to css
FileList["#{example}/stylesheets/**/[^_]*.sass"].each do |sass_file|
basename = sass_file[9..-6]
css_filename = "built_examples/#{basename}.css"
compass_sass = File.dirname(__FILE__).sub(%r{.*/},'')
engine = Sass::Engine.new(open(sass_file).read,
:filename => sass_file,
:line_comments => true,
:css_filename => css_filename,
:load_paths => ["#{example}/stylesheets"] + Compass::Frameworks::ALL.map{|f| f.stylesheets_directory})
target_dir = "built_examples/#{basename.sub(%r{/[^/]*$},'')}"
FileUtils.mkdir_p(target_dir)
output = open(css_filename,'w')
output.write(engine.render)
output.close
end
# copy any other non-haml and non-sass files directly over
target_dir = "built_examples/#{example.sub(%r{.*/},'')}"
other_files = FileList["#{example}/**/*"]
other_files.exclude "**/*.sass", "*.haml"
other_files.each do |file|
if File.directory?(file)
FileUtils.mkdir_p(file)
elsif File.file?(file)
target_file = "#{target_dir}/#{file[(example.size+1)..-1]}"
# puts "mkdir -p #{File.dirname(target_file)}"
FileUtils.mkdir_p(File.dirname(target_file))
# puts "cp #{file} #{target_file}"
FileUtils.cp(file, target_file)
end
end
end
end

1
VERSION Normal file
View File

@ -0,0 +1 @@
0.1.0

8
bin/compass Executable file
View File

@ -0,0 +1,8 @@
#!/usr/bin/env ruby
# The compass command line utility
require File.expand_path(File.join(File.dirname(__FILE__), '..', 'lib', 'compass'))
require File.expand_path(File.join(File.dirname(__FILE__), '..', 'lib', 'compass', 'exec'))
command = Compass::Exec::Compass.new(ARGV)
command.run!

View File

@ -0,0 +1,73 @@
<!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&nbsp;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="../../src/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="../../src/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="../../src/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&nbsp;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>

View File

@ -0,0 +1,246 @@
<!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">&amp;</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>&lt;strong&gt;</strong><br>
<del>&lt;del&gt; deleted</del><br>
<dfn>&lt;dfn&gt; dfn</dfn><br>
<em>&lt;em&gt; emphasis</em>
</p>
<p>
<a>&lt;a&gt; anchor</a><br>
<a href="http://www.google.com">&lt;a&gt; a + href</a>
</p>
<p>
<abbr title="extended abbr text should show when mouse over">&lt;abbr&gt; abbr - extended text when mouseover.</abbr><br>
<acronym title="extended acronym text should show when mouse over">&lt;acronym&gt; acronym - extended text when mouseover.</acronym>
</p>
<address>
&lt;address&gt;<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>&lt;pre&gt;
pre space1
pre space1
pre space2
pre space2
pre tab
pre tab</pre>
<code>&lt;code&gt;
Not indented
indent1
indent1
indent2
indent3</code>
<tt>&lt;tt&gt;
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 &lt;p&gt; 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>

View File

@ -0,0 +1,100 @@
<!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 &lt;div&gt; with the class <strong>.error</strong>. <a href="#">Link</a>.
</div>
<div class="notice">
This is a &lt;div&gt; with the class <strong>.notice</strong>. <a href="#">Link</a>.
</div>
<div class="success">
This is a &lt;div&gt; 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>

View File

@ -0,0 +1,206 @@
<!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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,4 @@
@import blueprint/ie
body
+blueprint-ie

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 B

View File

@ -0,0 +1,4 @@
@import blueprint/print
body
+blueprint-print

View File

@ -0,0 +1,12 @@
@import blueprint/screen
@import modules/scaffolding
@import compass/reset
html
+reset-html
body
+blueprint
// Remove the scaffolding when you're ready to start doing visual design.
// Or leave it in if you're happy with how blueprint looks out-of-the-box
+blueprint-scaffolding

View File

@ -0,0 +1,60 @@
<!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&nbsp;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/fancy_type.html">Fancy Type</a></td>
<td>
<a href="../../src/modules/_grid.sass">grid.sass</a>,
<a href="../../src/modules/_typography.sass">typography.sass</a>,
<a href="../../src/modules/_fancy_type.sass">fancy_type.sass</a>
</td>
<td>A simple sample page, with common elements and fancy type.</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&nbsp;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>

View File

@ -0,0 +1,84 @@
<!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="test.jpg" class="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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,4 @@
@import blueprint/ie
body
+blueprint-ie

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 B

View File

@ -0,0 +1,4 @@
@import blueprint/print
body
+blueprint-print

View File

@ -0,0 +1,14 @@
@import blueprint/screen
@import modules/fancy_type
@import modules/scaffolding
@import compass/reset
html
+reset-html
body
+blueprint
+fancy-type
// Remove the scaffolding when you're ready to start doing visual design.
// Or leave it in if you're happy with how blueprint looks out-of-the-box
+blueprint-scaffolding

View File

@ -0,0 +1,4 @@
@import blueprint/ie
body
+blueprint-ie

View File

@ -0,0 +1,4 @@
@import blueprint/print
body
+blueprint-print

View File

@ -0,0 +1,8 @@
@import blueprint/screen
@import compass/reset
html
+reset-html
body.bp
+blueprint

View File

@ -0,0 +1,4 @@
@import blueprint/ie
body
+blueprint-ie

View File

@ -0,0 +1,4 @@
@import blueprint/print
body
+blueprint-print

View File

@ -0,0 +1,12 @@
@import blueprint/screen
@import compass/reset
html
+reset-html
body
+blueprint-grid
+blueprint-typography
+blueprint-utilities
form.blueprint
+blueprint-form

View File

@ -0,0 +1,59 @@
<!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="../../src/modules/_grid.sass">grid.sass</a>,
<a href="../../src/modules/_typography.sass">typography.sass</a>,
<a href="../../src/modules/_fancy_type.sass">fancy_type.sass</a>
</td>
<td>A simple sample page, with common elements and fancy type.</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&nbsp;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>

View File

@ -0,0 +1,84 @@
<!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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,4 @@
@import blueprint/ie
body
+blueprint-ie

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 B

View File

@ -0,0 +1,4 @@
@import blueprint/print
body
+blueprint-print

View File

@ -0,0 +1,72 @@
@import blueprint/screen
@import blueprint/modules/fancy_type
@import blueprint/modules/scaffolding
@import compass/reset
html
+reset-html
.container
+container
body.blueprint
+blueprint-typography
html &
+body-margins
hr
+colruler
hr.space
+colspacer
img#w3c
:margin-top 0
:padding-top 0
body#index
#page-header
+span(6)
#files-header
+span(8)
#description-header
+span(10)
#info
+box
ul
:margin-bottom 0
:padding-bottom 0
body#sample
+fancy-paragraphs
h2
+alt
#first-box
+column(7)
+colborder
#another-box
+column(8)
+colborder
#aligned-box
+column(7, last)
#main
+column(15)
+prepend(1)
+colborder
img#test
+pull(1)
:margin-top 0
:padding-top 0
em.caps
+reset
+caps
#nested-1
+column(7)
+colborder
#nested-2
+column(7, last)
#sidebar
+column(7, last)
h3
em
+reset
+alt
#parting-thought
+alt

View File

@ -0,0 +1,17 @@
require 'fileutils'
module Blueprint
module Constants
# path to the root Blueprint directory
ROOT_PATH = File.expand_path(File.join(File.dirname(__FILE__), "../../"))
# path to where the Blueprint CSS files are stored
BLUEPRINT_ROOT_PATH = File.join(ROOT_PATH, 'blueprint')
# path to where the Blueprint CSS raw Sass files are stored
SOURCE_PATH = File.join(ROOT_PATH, 'src')
# path to where the Blueprint CSS generated test files are stored
EXAMPLES_PATH = File.join(ROOT_PATH, 'examples')
# path to the root of the Blueprint scripts
LIB_PATH = File.join(ROOT_PATH, 'lib', 'blueprint')
# path to validator jar file to validate generated CSS files
VALIDATOR_FILE = File.join(LIB_PATH, 'validate', 'css-validator.jar')
end
end

View File

@ -0,0 +1,54 @@
begin
require 'rubygems'
gem 'rmagick'
require 'rvg/rvg'
rescue Exception => e
end
module Blueprint
# Uses ImageMagick and RMagick to generate grid.png file
class GridBuilder
begin
include Magick
rescue Exception => e
end
attr_reader :column_width, :gutter_width, :output_path, :able_to_generate
# ==== Options
# * <tt>options</tt>
# * <tt>:column_width</tt> -- Width (in pixels) of current grid column
# * <tt>:gutter_width</tt> -- Width (in pixels) of current grid gutter
# * <tt>:output_path</tt> -- Output path of grid.png file
def initialize(options={})
@able_to_generate = Magick::Long_version rescue false
return unless @able_to_generate
@column_width = options[:column_width] || Blueprint::COLUMN_WIDTH
@gutter_width = options[:gutter_width] || Blueprint::GUTTER_WIDTH
@output_path = options[:output_path] || Blueprint::SOURCE_PATH
end
# generates (overwriting if necessary) grid.png image to be tiled in background
def generate!
return false unless self.able_to_generate
total_width = self.column_width + self.gutter_width
height = 20
RVG::dpi = 100
rvg = RVG.new((total_width.to_f/RVG::dpi).in, (height.to_f/RVG::dpi).in).viewbox(0, 0, total_width, height) do |canvas|
canvas.background_fill = 'white'
canvas.g do |column|
column.rect(self.column_width, height).styles(:fill => "#e8effb")
end
canvas.g do |baseline|
baseline.line(0, (height - 1), total_width, (height- 1)).styles(:fill => "#e9e9e9")
end
end
FileUtils.mkdir self.output_path unless File.exists? self.output_path
rvg.draw.write(File.join(self.output_path, "grid.png"))
end
end
end

View File

@ -0,0 +1,19 @@
// mix this into a body element
=blueprint-ie
:text-align center
.container
:text-align left
* html &
legend
:margin -18px -8px 16px 0
:padding 0
ol
:margin-left 2em
sup
:vertical-align text-top
sub
:vertical-align text-bottom
html>& p code
:*white-space normal
hr
:margin -8px auto 11px

View File

@ -0,0 +1,69 @@
=blueprint-print
&
:line-height 1.5
:font-family "Helvetica Neue", Helvetica, Arial, sans-serif
:color #000
:background none
:font-size 10pt
.container
:background none
hr
:background #ccc
:color #ccc
:width 100%
:height 2px
:margin 2em 0
:padding 0
:border none
&.space
:background #fff
:color #fff
h1, h2, h3, h4, h5, h6
:font-family "Helvetica Neue", Arial, "Lucida Grande", sans-serif
code
:font .9em "Courier New", Monaco, Courier, monospace
img
:float left
:margin 1.5em 1.5em 1.5em 0
a
img
:border none
&:link
:background transparent
:font-weight 700
:text-decoration underline
/* This style is in blueprint, but I think it's annoying and it doesn't work in all browsers.
&:after
:content " (" attr(href) ") "
:font-size 90%
p img.top
:margin-top 0
blockquote
:margin 1.5em
:padding 1em
:font-style italic
:font-size .9em
.small
:font-size .9em
.large
:font-size 1.1em
.quiet
:color #999
.hide,
.noprint,
.no-print
:display none
address, blockquote, center, dir, div, dd, dl, dt, fieldset, form, frameset, h1, h2, h3, h4, h5, h6, hr, isindex, li, menu, noframes, noscript, ol, p, pre, table, tbody, td, tfoot, th, thead, tr, ul
&.print-only
:display block
a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var
&.print-only
:display inline
a:visited
:background transparent
:font-weight 700
:text-decoration underline
/*
a:visited:after
:content " (" attr(href) ") "
:font-size 90%

View File

@ -0,0 +1,16 @@
@import modules/colors
@import modules/reset
@import modules/grid
@import modules/typography
@import modules/utilities
@import modules/form
@import modules/interaction
@import modules/debug
=blueprint
+blueprint-grid
+blueprint-typography
+blueprint-utilities
+blueprint-debug
+blueprint-interaction
+blueprint-form

View File

@ -0,0 +1,37 @@
!font_color= #333
!font_background= transparent
!quiet_color= !font_color + #333
!loud_color= !font_color - #222
!header_color= !font_color - #111
// !link_color= #009
// !link_hover_color= !link_color
!link_color= #457ac9
!link_hover_color= #399999
!link_focus_color= !link_color
!link_active_color= !link_color + #c00
!link_visited_color= !link_color - #333
!success_color = #264409
!success_bg_color = #E6EFC2
!success_border_color = #C6D880
!notice_color = #514721
!notice_bg_color = #FFF6BF
!notice_border_color = #FFD324
!error_color = #8a1f11
!error_bg_color = #FBE3E4
!error_border_color = #FBC2C4
=link-colors(!normal = !link_color, !hover = !link_hover_color, !active = !link_active_color, !visited = !link_visited_color, !focus = !link_focus_color)
:color= !normal
&:hover
:color= !hover
&:active
:color= !active
&:visited
:color= !visited
&:focus
:color= !focus

View File

@ -0,0 +1,9 @@
=showgrid(!image = images/grid.png)
:background= url(!image)
=blueprint-debug(!grid_image = images/grid.png)
// Use this class on any div.span / container to see the grid.
// TODO: prefix this with the project path.
.showgrid
+showgrid(!grid_image)

View File

@ -0,0 +1,85 @@
/*
To install the fancy type plugin:
1. import the fancy_type module:
@import blueprint/modules/fancy_type
2. mixin +fancy-type to your project's body:
body
+fancy-type
/* Indentation instead of line shifts for sibling paragraphs. Mixin to a style like p + p
=sibling-indentation
:text-indent 2em
:margin-top -1.5em
/* Don't want this in forms.
form &
:text-indent 0
/*
For great looking type, use this code instead of asdf:
<span class="alt">asdf</span>
Best used on prepositions and ampersands.
=alt
:color #666
:font-family "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif
:font-style italic
:font-weight normal
/*
For great looking quote marks in titles, replace "asdf" with:
<span class="dquo">&#8220;</span>asdf&#8221;
(That is, when the title starts with a quote mark).
(You may have to change this value depending on your font size).
=dquo
:margin-left -.5em
/*
Reduced size type with incremental leading
(http://www.markboulton.co.uk/journal/comments/incremental_leading/)
This could be used for side notes. For smaller type, you don't necessarily want to
follow the 1.5x vertical rhythm -- the line-height is too much.
Using this class, it reduces your font size and line-height so that for
every four lines of normal sized type, there is five lines of the sidenote. eg:
New type size in em's:
10px (wanted side note size) / 12px (existing base size) = 0.8333 (new type size in ems)
New line-height value:
12px x 1.5 = 18px (old line-height)
18px x 4 = 72px
72px / 5 = 14.4px (new line height)
14.4px / 10px = 1.44 (new line height in em's)
=incr
:font-size 10px
:line-height 1.44em
:margin-bottom 1.5em
/*
Surround uppercase words and abbreviations with this class.
Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] */
=caps
:font-variant small-caps
:letter-spacing 1px
:text-transform lowercase
:font-size 1.2em
:line-height 1%
:font-weight bold
:padding 0 2px
=fancy-paragraphs
p + p
+sibling-indentation
p.incr,
.incr p
+incr
=fancy-type
+fancy-paragraphs
.caps
+caps
.dquo
+dquo
.alt
+alt

View File

@ -0,0 +1,43 @@
@import colors
=blueprint-form
label
:font-weight bold
fieldset
:padding 1.4em
:margin 0 0 1.5em 0
:border 1px solid #ccc
legend
:font-weight bold
:font-size 1.2em
input
&.text
:margin 0.5em 0
:border 1px solid #bbb
:width 300px
:padding 5px
&:focus
:border 1px solid #666
&.title
:font-size 1.5em
input.title
:margin 0.5em 0
:border 1px solid #bbb
:width 300px
:padding 5px
&:focus
:border 1px solid #666
textarea
:margin 0.5em 0
:border 1px solid #bbb
&:focus
:border 1px solid #666
select
:margin 0.5em 0
:border 1px solid #bbb
&:focus
:border 1px solid #666
textarea
:width 390px
:height 250px
:padding 5px

View File

@ -0,0 +1,148 @@
// --------------------------------------------------------------
// SASS Gridification
// * Author: Chris Eppstein
// A SASS adaptation of Blueprint CSS
// * Version: 0.7.1 (2008-02-25)
// * Website: http://code.google.com/p/blueprintcss/
// Based on work by:
// * Lorin Tacket [lorintackett.com]
// * Olav Bjorkoy [bjorkoy.com]
// * Nathan Borror [playgroundblues.com]
// * Jeff Croft [jeffcroft.com]
// * Christian Metts [mintchaos.com]
// * Khoi Vinh [subtraction.com]
// Read more about using a grid here:
// * subtraction.com/archives/2007/0318_oh_yeeaahh.php
// --------------------------------------------------------------
@import compass/utilities
// Main layout grid, edit these parameters to build your grid and container sizes.
!layout_grid_columns = 24
!layout_grid_width = 30px
!layout_grid_margin = 10px
// Do not edit below this line unless you really know what you're doing.
!layout_grid_outer_width = !layout_grid_width + !layout_grid_margin
!layout_grid_size = !layout_grid_width * !layout_grid_columns + (!layout_grid_margin * (!layout_grid_columns - 1))
// Columns
// Note: If you use this mixin without the class and want to support ie6
// you must set text-align left on your container element in an IE stylesheet.
=container
:width = !layout_grid_size
:margin 0 auto
+clearfix
// The last column in a row needs this mixin or it will end up on the next row.
// TODO add this to span mixin when we have optional arguments
=last
:margin
:right 0
=span(!n)
:width = !layout_grid_width * !n + (!layout_grid_margin * (!n - 1))
// Use this mixins to set the width of n columns.
=column(!n, !last = false)
:float left
+span(!n)
@if !last
+last
@if !!last
:margin-right = !layout_grid_margin
// Mixin to a column to append n empty cols.
=append(!n)
:padding-right = (!layout_grid_outer_width) * !n
// Mixin to a column to prepend n empty cols.
=prepend(!n)
:padding-left = (!layout_grid_outer_width) * !n
// mixin to a column to move it n columns to the left
=pull(!n)
:float left
:position relative
:margin-left = -!layout_grid_outer_width * !n
// mixin to a column to push it n columns to the right
=push(!n)
:float right
:position relative
:margin
:top 0
:right = -!layout_grid_outer_width * !n
:bottom 1.5em
:left = -!layout_grid_outer_width * !n
// Border on right hand side of a column.
=border
:padding-right = !layout_grid_margin / 2 - 1
:margin-right = !layout_grid_margin / 2
:border-right 1px solid #eee
// Border with more whitespace, spans one column.
=colborder
:padding-right= !layout_grid_width - 0.5 * !layout_grid_margin - 1
:margin-right= !layout_grid_width - 0.5 * !layout_grid_margin
:border-right 1px solid #eee
// Mixin this to an hr to make a horizontal ruler across a column.
=colruler
:background #ddd
:color #ddd
:clear both
:float none
:width 100%
:height .1em
:margin 0 0 1.45em
:border none
// Mixin this to an hr to make a horizontal spacer across a column.
=colspacer
+colruler
:background #fff
:color #fff
=blueprint-grid
// A container should group all your columns
.container
+container
// Use these classes (or mixins) to set the width of a column.
@for !n from 1 to !layout_grid_columns + 1
.span-#{!n}
+span(!n)
div
&.span-#{!n}
+column(!n, !n == !layout_grid_columns)
// The last column in a row needs this class (or mixin) or it will end up on the next row.
div.last
+last
// Add these to a column to append empty cols.
@for !n from 1 to !layout_grid_columns
.append-#{!n}
+append(!n)
// Add these to a column to prepend empty cols.
@for !n from 1 to !layout_grid_columns
.prepend-#{!n}
+prepend(!n)
// Use these classes on an element to push it into the
// next column, or to pull it into the previous column.
@for !n from 1 to !layout_grid_columns + 1
.pull-#{!n}
+pull(!n)
@for !n from 1 to !layout_grid_columns + 1
.push-#{!n}
+push(!n)
//*** The following classes are provided for convenience. You can comment them out if you don't want them. ***//
// Border on right hand side of a column. You can comment this out if you don't plan to use it.
div.border
+border
// Border with more whitespace, spans one column.
div.colborder
+colborder
hr
+colruler
hr.space
+colspacer

View File

@ -0,0 +1,55 @@
=feedback-base
:padding .8em
:margin-bottom 1em
:border 2px solid #ddd
=error
+feedback-base
:background= !error_bg_color
:color= !error_color
:border-color= !error_border_color
a
:color= !error_color
=notice
+feedback-base
:background= !notice_bg_color
:color= !notice_color
:border-color= !notice_border_color
a
:color= !notice_color
=success
+feedback-base
:background= !success_bg_color
:color= !success_color
:border-color= !success_border_color
a
:color= !success_color
=highlight
:background #ff0
=added
:background #060
:color #fff
=removed
:background #900
:color #fff
=blueprint-interaction
.error
+error
.notice
+notice
.success
+success
.hide
:display none
.highlight
+highlight
.added
+added
.removed
+removed

View File

@ -0,0 +1,18 @@
/*
The styles contained here are meant to provide for an attractive experience out of the box
and are meant to be removed once custom visual design begins.
=body-margins
:margin 1.5em 0
// Mixin +box to create a padded box inside a column.
=box
:padding 1.5em
:margin-bottom 1.5em
:background #E5ECF9
=blueprint-scaffolding
html &
+body-margins
.box
+box

View File

@ -0,0 +1,129 @@
@import colors
=normal-text
:font-family "Helvetica Neue", Helvetica, Arial, sans-serif
:color= !font_color
:background= !font_background
=fixed-width-text
:font 1em 'andale mono', 'lucida console', monospace
:line-height 1.5
=header-text
:font-weight normal
:color= !header_color
=quiet
:color= !quiet_color
=loud
:color= !loud_color
=blueprint-typography
html &
+normal-text
:font-size 75%
h1
+header-text
:font-size 3em
:line-height 1
:margin-bottom 0.5em
img
:margin 0
h2
+header-text
:font-size 2em
:margin-bottom 0.75em
h3
+header-text
:font-size 1.5em
:line-height 1
:margin-bottom 1em
h4
+header-text
:font-size 1.2em
:line-height 1.25
:margin-bottom 1.25em
:height 1.25em
h5
+header-text
:font-size 1em
:font-weight bold
:margin-bottom 1.5em
h6
+header-text
:font-size 1em
:font-weight bold
h2 img, h3 img, h4 img, h5 img, h6 img
:margin 0
p
:margin 0 0 1.5em
img
:float left
:margin 1.5em 1.5em 1.5em 0
:padding 0
&.right
:float right
:margin 1.5em 0 1.5em 1.5em
a
:text-decoration underline
+link-colors
blockquote
:margin 1.5em
:color #666
:font-style italic
strong
:font-weight bold
em
:font-style italic
dfn
:font-style italic
:font-weight bold
sup, sub
:line-height 0
abbr, acronym
:border-bottom 1px dotted #666
address
:margin 0 0 1.5em
:font-style italic
del
:color #666
pre, code
:margin 1.5em 0
:white-space pre
+fixed-width-text
tt
+fixed-width-text
li ul, li ol
:margin 0 1.5em
ul
:margin 0 1.5em 1.5em 1.5em
:list-style-type disc
ol
:margin 0 1.5em 1.5em 1.5em
:list-style-type decimal
dl
:margin 0 0 1.5em 0
dt
:font-weight bold
dd
:margin-left 1.5em
table
:margin-bottom 1.4em
:width 100%
th
:font-weight bold
:background #C3D9FF
:padding 4px 10px 4px 5px
td
:padding 4px 10px 4px 5px
tr.even td
:background #E5ECF9
tfoot
:font-style italic
caption
:background #eee
.quiet
+quiet
.loud
+loud

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 B

View File

@ -0,0 +1,4 @@
@import blueprint/ie
body
+blueprint-ie

View File

@ -0,0 +1,4 @@
@import blueprint/print
body
+blueprint-print

View File

@ -0,0 +1,12 @@
@import blueprint/screen
@import blueprint/modules/scaffolding
@import compass/reset
html
+reset-html
body
+blueprint
// Remove the scaffolding when you're ready to start doing visual design.
// Or leave it in if you're happy with how blueprint looks out-of-the-box
+blueprint-scaffolding

View File

@ -0,0 +1,73 @@
=reset
:margin 0
:padding 0
:border 0
:font
:weight inherit
:style inherit
:size 100%
:family inherit
:vertical-align baseline
=reset-quotation
+reset
:quotes "" ""
&:before,
&:after
:content ""
=reset-table-cell
+reset
:text-align left
:font-weight normal
:vertical-align middle
=reset-table
+reset
:border-collapse separate
:border-spacing 0
:vertical-align middle
=reset-body-tag
+reset
:line-height 1.5
// Mix this into the html element of your application
// if you want a global reset (recommended).
=reset-html
+reset
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p
+reset
body
+reset-body-tag
blockquote, q
+reset-quotation
pre, a, abbr, acronym, address, code, del, dfn, em, img
+reset
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr
+reset
th, td, caption
+reset-table-cell
table
+reset-table
a img
:border none
// Mix this into the body element
// if you want a selective reset
=reset-body
+reset-body-tag
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p
+reset
blockquote, q
+reset-quotation
pre, a, abbr, acronym, address, code, del, dfn, em, img
+reset
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr
+reset
th, td, caption
+reset-table-cell
table
+reset-table
a img
:border none

View File

@ -0,0 +1,54 @@
// Clearing floats without extra markup
// Based on How To Clear Floats Without Structural Markup by PiE
// [http://www.positioniseverything.net/easyclearing.html]
// The above article no longer recommends its approach instead
// This is recommended now:
// [http://www.sitepoint.com/examples/clearing_floats/example2.php]
=clearfix
:overflow auto
// This makes ie6 get layout
:display inline-block
// and this puts it back to block
&
:display block
=nowrap
:white-space nowrap
// Most of these utility classes are not "semantic". If you use them,
// you are mixing your content and presentation. For shame!
=blueprint-utilities
// Regular clearing apply to column that should drop below previous ones.
.clear
:clear both
// turn off text wrapping for the element.
.nowrap
+nowrap
// Apply to an element that has floated children to make the bottom
// of the element fall _below_ the floated children.
.clearfix
+clearfix
.small
:font-size .8em
:margin-bottom 1.875em
:line-height 1.875em
.large
:font-size 1.2em
:line-height 2.5em
:margin-bottom 1.25em
.first
:margin-left 0
:padding-left 0
.last
:margin-right 0
:padding-right 0
.top
:margin-top 0
:padding-top 0
.bottom
:margin-bottom 0
:padding-bottom 0
.print-only
:display none

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 B

View File

@ -0,0 +1,3 @@
/*
Welcome to Compass. We'll show you the way, but you'll have to get there on your own.
Use this file to write IE specific override styles.

View File

@ -0,0 +1,4 @@
/*
Welcome to Compass. We'll show you the way, but you'll have to get there on your own.
Use this file to define print styles.

View File

@ -0,0 +1,7 @@
/*
Welcome to Compass. We'll show you the way, but you'll have to get there on your own.
In this file you should write (or centralize your imports) the main styles.
@import compass/reset
html
+reset-html

13
lib/compass.rb Normal file
View File

@ -0,0 +1,13 @@
['core_ext', 'version'].each do |file|
require File.join(File.dirname(__FILE__), 'compass', file)
end
module Compass
extend Compass::Version
def base_directory
File.expand_path(File.join(File.dirname(__FILE__), '..'))
end
module_function :base_directory
end
require File.join(File.dirname(__FILE__), 'compass', 'frameworks')

View File

@ -0,0 +1,78 @@
module Compass
module Commands
class Base
attr_accessor :working_directory, :options
def initialize(working_directory, options)
self.working_directory = working_directory
self.options = options
end
def perform
raise StandardError.new("Not Implemented")
end
protected
def projectize(path)
File.join(project_directory, separate(path))
end
# create a directory and all the directories necessary to reach it.
def directory(subdir, options)
dir = subdir ? projectize(subdir) : project_directory
if File.exists?(dir) && File.directory?(dir) && options[:force]
print_action :exists, basename(dir) + File::SEPARATOR
elsif File.exists?(dir) && File.directory?(dir)
msg = "Directory #{basename(dir)} already exists. Run with --force to force project creation."
raise ::Compass::Exec::ExecError.new(msg)
elsif File.exists?(dir)
msg = "#{basename(dir)} already exists and is not a directory."
raise ::Compass::Exec::ExecError.new(msg)
else
print_action :directory, basename(dir) + File::SEPARATOR
FileUtils.mkdir_p(dir) unless options[:dry_run]
end
end
# copy/process a template in the compass template directory to the project directory.
def template(from, to, options)
to = projectize(to)
from = File.join(templates_directory, separate(from))
if File.exists?(to) && !options[:force]
#TODO: Detect differences & provide an overwrite prompt
msg = "#{basename(to)} already exists."
raise ::Compass::Exec::ExecError.new(msg)
elsif File.exists?(to)
print_action :remove, basename(to)
FileUtils.rm to unless options[:dry_run]
end
print_action :create, basename(to)
FileUtils.cp from, to unless options[:dry_run]
end
# returns the path to the templates directory and caches it
def templates_directory
@templates_directory ||= File.expand_path(File.join(File.dirname(__FILE__), separate("../../../frameworks/#{options[:framework]}/templates")))
end
# Write paths like we're on unix and then fix it
def separate(path)
path.gsub(%r{/}, File::SEPARATOR)
end
def basename(file, extra = 0)
if file.length > (working_directory.length + extra)
file[(working_directory.length + extra + 1)..-1]
else
File.basename(file)
end
end
ACTIONS = [:directory, :exists, :remove, :create]
MAX_ACTION_LENGTH = ACTIONS.inject(0){|memo, a| [memo, a.to_s.length].max}
def print_action(action, extra)
puts "#{' ' * (MAX_ACTION_LENGTH - action.to_s.length)}#{action} #{extra}" if !options[:quiet] || options[:dry_run]
end
end
end
end

View File

@ -0,0 +1,30 @@
require 'fileutils'
require File.join(File.dirname(__FILE__), 'base')
require File.join(File.dirname(__FILE__), 'update_project')
module Compass
module Commands
class CreateProject < Base
attr_accessor :project_directory, :project_name
def initialize(working_directory, options)
super(working_directory, options)
self.project_name = options[:project_name]
self.project_directory = File.expand_path File.join(working_directory, project_name)
end
# all commands must implement perform
def perform
directory nil, options
directory 'stylesheets', options.merge(:force => true)
directory 'src', options.merge(:force => true)
template 'project/screen.sass', 'src/screen.sass', options
template 'project/print.sass', 'src/print.sass', options
template 'project/ie.sass', 'src/ie.sass', options
UpdateProject.new(working_directory, options).perform
end
end
end
end

View File

@ -0,0 +1,23 @@
module Compass
module Commands
class PrintVersion
attr_accessor :options
def initialize(working_directory, options)
self.options = options
end
def perform
if options[:quiet]
# The quiet option may make scripting easier
puts ::Compass.version[:string]
else
lines = []
lines << "Compass #{::Compass.version[:string]}"
lines << "Copyright (c) 2008 Chris Eppstein"
lines << "Released under the MIT License."
puts lines.join("\n")
end
end
end
end
end

View File

@ -0,0 +1,91 @@
require 'rubygems'
require 'sass'
require 'fileutils'
require 'pathname'
require File.join(File.dirname(__FILE__), 'base')
module Compass
module Commands
class UpdateProject < Base
Base::ACTIONS << :compile
Base::ACTIONS << :overwrite
attr_accessor :project_directory, :project_name, :options
def initialize(working_directory, options = {})
super(working_directory, options)
if options[:project_name]
options[:project_name] = options[:project_name][0..-2] if options[:project_name][-1..-1] == File::SEPARATOR
self.project_name = File.basename(options[:project_name])
if options[:project_name][0] == File::SEPARATOR
self.project_directory = options[:project_name]
elsif File.directory?(File.join(working_directory, options[:project_name]))
self.project_directory = File.expand_path(File.join(working_directory, options[:project_name]))
else
if File.exists?(options[:project_name]) or File.exists?(File.join(working_directory, options[:project_name]))
raise ::Compass::Exec::ExecError.new("#{options[:project_name]} is not a directory.")
elsif !(options[:force] || options[:dry_run])
raise ::Compass::Exec::ExecError.new("#{options[:project_name]} does not exist.")
end
end
else
self.project_name = File.basename(working_directory)
self.project_directory = working_directory
end
end
def perform
Dir.glob(separate("#{project_directory}/src/**/[^_]*.sass")).each do |sass_file|
stylesheet_name = sass_file[("#{project_directory}/src/".length)..-6]
compile "src/#{stylesheet_name}.sass", "stylesheets/#{stylesheet_name}.css", options
end
end
# Compile one Sass file
def compile(sass_filename, css_filename, options)
sass_filename = projectize(sass_filename)
css_filename = projectize(css_filename)
if !File.directory?(File.dirname(css_filename))
directory basename(File.dirname(css_filename)), options.merge(:force => true) unless options[:dry_run]
end
print_action :compile, basename(sass_filename)
if File.exists?(css_filename)
print_action :overwrite, basename(css_filename)
else
print_action :create, basename(css_filename)
end
unless options[:dry_run]
engine = ::Sass::Engine.new(open(sass_filename).read,
:filename => sass_filename,
:line_comments => options[:environment] == :development,
:style => output_style,
:css_filename => css_filename,
:load_paths => sass_load_paths)
output = open(css_filename,'w')
output.write(engine.render)
output.close
end
end
def output_style
@output_style ||= options[:style] || if options[:environment] == :development
:expanded
else
:compact
end
end
# where to load sass files from
def sass_load_paths
@sass_load_paths ||= [project_src_directory] + Compass::Frameworks::ALL.map{|f| f.stylesheets_directory}
end
# The directory where the project source files are located.
def project_src_directory
@project_src_directory ||= separate("#{project_directory}/src")
end
end
end
end

39
lib/compass/core_ext.rb Normal file
View File

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

138
lib/compass/exec.rb Normal file
View File

@ -0,0 +1,138 @@
require 'optparse'
require 'rubygems'
require 'haml'
module Compass
module Exec
class ExecError < StandardError
end
class Compass
attr_accessor :args, :options, :opts
def initialize(args)
self.args = args
self.options = {}
end
def run!
begin
parse!
perform!
rescue Exception => e
raise e if e.is_a? SystemExit
if e.is_a?(ExecError) || e.is_a?(OptionParser::ParseError)
$stderr.puts e.message
else
$stderr.puts "#{e.class} on line #{get_line e} of #{get_file e}: #{e.message}"
if @options[:trace]
e.backtrace[1..-1].each { |t| $stderr.puts " #{t}" }
else
$stderr.puts "Run with --trace to see the full backtrace"
end
end
exit 1
end
exit 0
end
protected
def perform!
if options[:version]
do_command(:print_version)
elsif options[:update]
do_command(:update_project)
elsif options[:project_name]
do_command(:create_project)
else
puts self.opts
end
end
def parse!
self.opts = OptionParser.new(&method(:set_opts))
self.opts.parse!(self.args)
if ARGV.size > 0
self.options[:project_name] = ARGV.shift
end
self.options[:environment] ||= :production
self.options[:framework] ||= :compass
end
def set_opts(opts)
opts.banner = <<END
Usage: compass [options] [project]
Description:
When project is given, generates a new project of that name as a subdirectory of
the current directory.
If you change any source files, you can update your project using --update.
Options:
END
opts.on('-u', '--update', :NONE, 'Update the current project') do
self.options[:update] = true
end
opts.on('-f FRAMEWORK', '--framework FRAMEWORK', [:compass, :blueprint], 'Set up a new project using the selected framework. Legal values: compass (default), blueprint') do |framework|
self.options[:framework] = framework
end
opts.on('--force', :NONE, 'Force. Allows some commands to succeed when they would otherwise fail.') do
self.options[:force] = true
end
opts.on('-e ENV', '--environment ENV', [:development, :production], 'Use sensible defaults for your current environment (development, production)') do |env|
self.options[:environment] = env
end
opts.on('-s STYLE', '--output-style STYLE', [:nested, :expanded, :compact, :compressed], 'Select a CSS output mode (nested, expanded, compact, compressed)') do |style|
self.options[:style] = style
end
opts.on('-q', '--quiet', :NONE, 'Quiet mode.') do
self.options[:quiet] = true
end
opts.on('--dry-run', :NONE, 'Dry Run. Tells you what it plans to do.') do
self.options[:dry_run] = true
end
opts.on('--trace', :NONE, 'Show a full traceback on error') do
self.options[:trace] = true
end
opts.on_tail("-?", "-h", "--help", "Show this message") do
puts opts
exit
end
opts.on_tail("-v", "--version", "Print version") do
self.options[:version] = true
end
end
def get_file(exception)
exception.backtrace[0].split(/:/, 2)[0]
end
def get_line(exception)
# SyntaxErrors have weird line reporting
# when there's trailing whitespace,
# which there is for Haml documents.
return exception.message.scan(/:(\d+)/)[0] if exception.is_a?(::Haml::SyntaxError)
exception.backtrace[0].scan(/:(\d+)/)[0]
end
def do_command(command)
require File.join(File.dirname(__FILE__), 'commands', command.to_s)
command_class_name = command.to_s.split(/_/).map{|p| p.capitalize}.join('')
command_class = eval("::Compass::Commands::#{command_class_name}")
command_class.new(Dir.getwd, options).perform
end
end
end
end

26
lib/compass/frameworks.rb Normal file
View File

@ -0,0 +1,26 @@
module Compass
module Frameworks
ALL = []
class Framework
attr_accessor :name
attr_accessor :path
def initialize(name, path)
self.name = name
self.path = path
end
def template_directory
File.join(self.path, 'templates')
end
def stylesheets_directory
File.join(self.path, 'stylesheets')
end
end
def register(name, path)
ALL << Framework.new(name, path)
end
module_function :register
end
end
require File.join(File.dirname(__FILE__), 'frameworks', 'compass')
require File.join(File.dirname(__FILE__), 'frameworks', 'blueprint')

View File

@ -0,0 +1,2 @@
blueprint_dir = File.join(Compass.base_directory, 'frameworks', 'blueprint')
Compass::Frameworks.register('compass', blueprint_dir)

View File

@ -0,0 +1,2 @@
compass_dir = File.join(Compass.base_directory, 'frameworks', 'compass')
Compass::Frameworks.register('compass', compass_dir)

13
lib/compass/validate.rb Normal file
View File

@ -0,0 +1,13 @@
#!/usr/bin/env ruby
require File.join(File.dirname(__FILE__), 'compass', 'validator')
# This script will validate the core Compass files.
#
# The files are not completely valid. This has to do
# with a small number of CSS hacks needed to ensure
# consistent rendering across browsers.
#
# To add your own CSS files for validation, see
# /lib/compass/validator.rb
Compass::Validator.new.validate

View File

@ -0,0 +1,93 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang='en' lang='en'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/base.css" />
<title>W3C IPR SOFTWARE NOTICE</title>
</head>
<body>
<h1>W3C<sup>&reg;</sup> SOFTWARE NOTICE AND LICENSE</h1>
<h3>Copyright &copy; 1997-2002 <a href="http://www.w3.org/">World
Wide Web Consortium</a>, (<a
href="http://www.lcs.mit.edu/">Massachusetts Institute of
Technology</a>, <a href="http://www.inria.fr/">Institut National de
Recherche en Informatique et en Automatique</a>, <a
href="http://www.keio.ac.jp/">Keio University</a>). All Rights
Reserved. http://www.w3.org/Consortium/Legal/</h3>
<p>This W3C work (including software, documents, or other related
items) is being provided by the copyright holders under the
following license. By obtaining, using and/or copying this work,
you (the licensee) agree that you have read, understood, and will
comply with the following terms and conditions:</p>
<p>Permission to use, copy, modify, and distribute this software
and its documentation, with or without modification,&nbsp; for any
purpose and without fee or royalty is hereby granted, provided that
you include the following on ALL copies of the software and
documentation or portions thereof, including modifications, that
you make:</p>
<ol>
<li>The full text of this NOTICE in a location viewable to users of
the redistributed or derivative work.</li>
<li>Any pre-existing intellectual property disclaimers, notices, or
terms and conditions. If none exist, a short notice of the
following form (hypertext is preferred, text is permitted) should
be used within the body of any redistributed or derivative code:
"Copyright &copy; [$date-of-software] <a
href="http://www.w3.org/">World Wide Web Consortium</a>, (<a
href="http://www.lcs.mit.edu/">Massachusetts Institute of
Technology</a>, <a href="http://www.inria.fr/">Institut National de
Recherche en Informatique et en Automatique</a>, <a
href="http://www.keio.ac.jp/">Keio University</a>). All Rights
Reserved. http://www.w3.org/Consortium/Legal/"</li>
<li>Notice of any changes or modifications to the W3C files,
including the date changes were made. (We recommend you provide
URIs to the location from which the code is derived.)</li>
</ol>
<p>THIS SOFTWARE AND DOCUMENTATION IS PROVIDED "AS IS," AND
COPYRIGHT HOLDERS MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO, WARRANTIES OF
MERCHANTABILITY OR FITNESS FOR ANY PARTICULAR PURPOSE OR THAT THE
USE OF THE SOFTWARE OR DOCUMENTATION WILL NOT INFRINGE ANY THIRD
PARTY PATENTS, COPYRIGHTS, TRADEMARKS OR OTHER RIGHTS.</p>
<p>COPYRIGHT HOLDERS WILL NOT BE LIABLE FOR ANY DIRECT, INDIRECT,
SPECIAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF ANY USE OF THE
SOFTWARE OR DOCUMENTATION.</p>
<p>The name and trademarks of copyright holders may NOT be used in
advertising or publicity pertaining to the software without
specific, written prior permission. Title to copyright in this
software and any associated documentation will at all times remain
with copyright holders.</p>
<p>____________________________________</p>
<p>This formulation of W3C's notice and license became active on
August 14 1998 so as to improve compatibility with GPL. This
version ensures that W3C software licensing terms are no more
restrictive than GPL and consequently W3C software may be
distributed in GPL packages. See the <a
href="copyright-software-19980519.html">older formulation</a> for
the policy prior to this date. Please see our <a
href="IPR-FAQ.html">Copyright FAQ</a> for common questions about
using materials from our site, including specific terms and
conditions for packages like libwww, Amaya, and Jigsaw. Other
questions about this notice can be directed to <a
href="mailto:site-policy@w3.org">site-policy@w3.org</a>.<br />
&nbsp;</p>
<p>&nbsp;</p>
<address><a href="http://www.w3.org/Help/Webmaster.html">webmaster</a><br />
(last updated $Date: 2004/05/29 04:04:36 $)</address>
</body>
</html>

View File

@ -0,0 +1,64 @@
W3C IPR SOFTWARE NOTICE
Copyright © 1995-1998 World Wide Web Consortium, (Massachusetts Institute of
Technology, Institut National de Recherche en Informatique et en
Automatique, Keio University). All Rights Reserved.
http://www.w3.org/Consortium/Legal/
This W3C work (including software, documents, or other related items) is
being provided by the copyright holders under the following license. By
obtaining, using and/or copying this work, you (the licensee) agree that you
have read, understood, and will comply with the following terms and
conditions:
Permission to use, copy, and modify this software and its documentation,
with or without modification, for any purpose and without fee or royalty is
hereby granted, provided that you include the following on ALL copies of the
software and documentation or portions thereof, including modifications,
that you make:
1. The full text of this NOTICE in a location viewable to users of the
redistributed or derivative work.
2. Any pre-existing intellectual property disclaimers, notices, or terms
and conditions. If none exist, a short notice of the following form
(hypertext is preferred, text is permitted) should be used within the
body of any redistributed or derivative code: "Copyright © World Wide
Web Consortium, (Massachusetts Institute of Technology, Institut
National de Recherche en Informatique et en Automatique, Keio
University). All Rights Reserved. http://www.w3.org/Consortium/Legal/"
3. Notice of any changes or modifications to the W3C files, including the
date changes were made. (We recommend you provide URIs to the location
from which the code is derived).
In addition, creators of derivitive works must include the full text of this
NOTICE in a location viewable to users of the derivitive work.
THIS SOFTWARE AND DOCUMENTATION IS PROVIDED "AS IS," AND COPYRIGHT HOLDERS
MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING BUT NOT
LIMITED TO, WARRANTIES OF MERCHANTABILITY OR FITNESS FOR ANY PARTICULAR
PURPOSE OR THAT THE USE OF THE SOFTWARE OR DOCUMENTATION WILL NOT INFRINGE
ANY THIRD PARTY PATENTS, COPYRIGHTS, TRADEMARKS OR OTHER RIGHTS.
COPYRIGHT HOLDERS WILL NOT BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL OR
CONSEQUENTIAL DAMAGES ARISING OUT OF ANY USE OF THE SOFTWARE OR
DOCUMENTATION.
The name and trademarks of copyright holders may NOT be used in advertising
or publicity pertaining to the software without specific, written prior
permission. Title to copyright in this software and any associated
documentation will at all times remain with copyright holders.
____________________________________
This formulation of W3C's notice and license became active on August 14
1998. See the older formulation for the policy prior to this date. Please
see our Copyright FAQ for common questions about using materials from our
site, including specific terms and conditions for packages like libwww,
Amaya, and Jigsaw. Other questions about this notice can be directed to
site-policy@w3.org .
webmaster
(last updated 14-Aug-1998)

View File

@ -0,0 +1,83 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Validator Binary Distribution - Illumit</title>
<link title="RSS Feed" type="application/rss+xml" rel="alternate" href="http://www.illumit.com/site.rss" />
</head>
<body>
<h1>CSS Validator Binary Distribution</h1>
<p>This a binary distribution of <a href="http://jigsaw.w3.org/css-validator">W3C CSS Validator</a>.
It was built from the <a href="http://dev.w3.org/cvsweb/2002/css-validator">source</a> on June 25, 2006.
No modifications were made.</p>
<p>This distribution is provided <a href="#asis">as is</a> to make testing a large number of CSS files easier.</p>
<h2>Requirements</h2>
<p>A Java 2 Virtual Machine is required to use the validator.
You can download one from <a href="http://java.sun.com/">Sun</a> if you do not have one installed.</p>
<h2>Usage</h2>
<h2>Summary</h2>
<p><code>java -jar <samp>~/css-validator/</samp>css-validator.jar [-options] files URLs</code></p>
<h2>Sample</h2>
<pre>
java -jar ~/css-validator/css-validator.jar f1.css http://illumit.com/
</pre>
<h2>Options</h2>
<dl>
<dt>-e</dt><dd>Show errors only.</dd>
<dt>-html</dt><dd>Output HTML.</dd>
<dt>-css1 | -css2 | -css21 | -css3 | -svg | -svgbasic | -svgtiny</dt>
<dd>Specify CSS version. CSS2 is the default.</dd>
</dl>
<h2>Support</h2>
<p>If you have questions about how this distribution is built or packaged,
<a href="mailto:contact@illumit.com">mailto:contact@illumit.com</a>.</p>
<p>Use the CSS Validator <a href="http://jigsaw.w3.org/css-validator/Email">Feedback</a>
page if you have any questions or problems with the validator itself.</p>
<p class="Footnote">Updates are announced on via
<a class="RSSLink" rel="alternate" type="application/rss+xml" href="http://www.illumit.com/site.rss">RSS</a></p>
<!--
<h2>Contents</h2>
<ul>
<li><a href="css-validator.jar">css-validator.jar</a> Executable JAR package</li>
<li><a href="COPYRIGHT.html">COPYRIGHT.html</a> CSS Validator Copyright Notice</li>
<li><a href="css-validator-javadoc.jar">css-validator-javadoc.jar</a> CSS Validator API Docs</li>
<li>Required libraries:<ul>
<li><a href="jigsaw.jar">jigsaw.jar</a> and <a href="JIGSAW_COPYRIGHT">JIGSAW_COPYRIGHT</a></li>
<li><a href="xerces.jar">xerces.jar</a> and <a href="XERCES_COPYING.txt">XERCES_COPYING.txt</a></li>
</ul>
</li>
</ul>
-->
<h2>Download</h2>
<p>Download the css validator binary distribution <a href="css-validator.zip">css-validator.zip</a>. Extract the files (OS X and *ix users can use unzip).</p>
<h2><a name="asis">License Agreement</a></h2>
<p>This is a binary distribution of <a href="http://jigsaw.w3.org/css-validator">W3C CSS Validator</a> Version 2.0
It was built from the <a href="http://dev.w3.org/cvsweb/2002/css-validator">source</a> on June 25, 2006.
No modifications were made to the source.</p>
<p>THIS SOFTWARE AND DOCUMENTATION IS PROVIDED "AS IS," AND
ILLUMIT L.L.C AND THE COPYRIGHT HOLDERS (W3C) MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO, WARRANTIES OF
MERCHANTABILITY OR FITNESS FOR ANY PARTICULAR PURPOSE OR THAT THE
USE OF THE SOFTWARE OR DOCUMENTATION WILL NOT INFRINGE ANY THIRD
PARTY PATENTS, COPYRIGHTS, TRADEMARKS OR OTHER RIGHTS.</p>
<p>ILLUMIT L.L.C AND THE COPYRIGHT HOLDERS WILL NOT BE LIABLE FOR ANY DIRECT, INDIRECT,
SPECIAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF ANY USE OF THE
SOFTWARE OR DOCUMENTATION.</p>
</body>
</html>

View File

@ -0,0 +1,56 @@
/*
* The Apache Software License, Version 1.1
*
*
* Copyright (c) 1999 The Apache Software Foundation. All rights
* reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
*
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
*
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in
* the documentation and/or other materials provided with the
* distribution.
*
* 3. The end-user documentation included with the redistribution,
* if any, must include the following acknowledgment:
* "This product includes software developed by the
* Apache Software Foundation (http://www.apache.org/)."
* Alternately, this acknowledgment may appear in the software itself,
* if and wherever such third-party acknowledgments normally appear.
*
* 4. The names "Xerces" and "Apache Software Foundation" must
* not be used to endorse or promote products derived from this
* software without prior written permission. For written
* permission, please contact apache@apache.org.
*
* 5. Products derived from this software may not be called "Apache",
* nor may "Apache" appear in their name, without prior written
* permission of the Apache Software Foundation.
*
* THIS SOFTWARE IS PROVIDED ``AS IS'' AND ANY EXPRESSED OR IMPLIED
* WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
* OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL THE APACHE SOFTWARE FOUNDATION OR
* ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF
* USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
* OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT
* OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
* SUCH DAMAGE.
* ====================================================================
*
* This software consists of voluntary contributions made by many
* individuals on behalf of the Apache Software Foundation and was
* originally based on software copyright (c) 1999, International
* Business Machines, Inc., http://www.ibm.com. For more
* information on the Apache Software Foundation, please see
* <http://www.apache.org/>.
*/

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

59
lib/compass/validator.rb Normal file
View File

@ -0,0 +1,59 @@
require File.join(File.dirname(__FILE__), 'core_ext')
require File.join(File.dirname(__FILE__), 'constants')
module Compass
# Validates generated CSS against the W3 using Java
class Validator
VALIDATOR_FILE = File.join(File.dirname(__FILE__), 'validate', 'css-validator.jar')
attr_reader :error_count
def initialize
@error_count = 0
end
# Validates all three CSS files
def validate
java_path = `which java`.rstrip
raise "You do not have a Java installed, but it is required." if java_path.blank?
output_header
Dir.new(Compass::Constants::BLUEPRINT_ROOT_PATH).each do |file_name|
puts "#{file_name}"
if file_name =~ /\.css$/
css_file = File.join(Compass::Constants::BLUEPRINT_ROOT_PATH, file_name)
@error_count += 1 if !validate_css_file(java_path, css_file)
end
end
output_footer
end
private
def validate_css_file(java_path, css_file)
puts "\n\n Testing #{css_file}"
puts " Output ============================================================\n\n"
system("#{java_path} -jar '#{VALIDATOR_FILE}' -e '#{css_file}'")
end
def output_header
puts "\n\n"
puts " ************************************************************"
puts " **"
puts " ** Compass CSS Validator"
puts " ** Validates output CSS files"
puts " **"
puts " ************************************************************"
end
def output_footer
puts "\n\n"
puts " ************************************************************"
puts " **"
puts " ** Done!"
puts " ** Your CSS files are#{" not" if error_count > 0} valid.#{" You had #{error_count} error(s) within your files" if error_count > 0}"
puts " **"
puts " ************************************************************"
end
end
end

48
lib/compass/version.rb Normal file
View File

@ -0,0 +1,48 @@
module Compass
module Version
# Returns a hash representing the version.
# The :major, :minor, and :teeny keys have their respective numbers.
# The :string key contains a human-readable string representation of the version.
# If checked out from Git,
# the :rev key will have the revision hash.
#
# This method swiped from Haml and then modified, some credit goes to Nathan Weizenbaum
attr_writer :version
def version
return @version if defined?(@version)
@version = {
:string => File.read(scope('VERSION')).strip
}
dotted_string, label = @version[:string].split(/-/, 2)
numbers = dotted_string.split('.').map { |n| n.to_i }
@version[:major] = numbers[0]
@version[:minor] = numbers[1]
@version[:teeny] = numbers[2]
@version[:label] = label
if File.exists?(scope('REVISION'))
rev = File.read(scope('REVISION')).strip
rev = nil if rev !~ /[a-f0-9]+/
end
if rev.nil? && File.exists?(scope('.git/HEAD'))
rev = File.read(scope('.git/HEAD')).strip
if rev =~ /^ref: (.*)$/
rev = File.read(scope(".git/#{$1}")).strip
end
end
if rev
@version[:rev] = rev
@version[:string] << " [#{rev[0...7]}]"
end
@version
end
def scope(file) # :nodoc:
File.join(File.dirname(__FILE__), '..', '..', file)
end
end
end

111
test/compass_test.rb Normal file
View File

@ -0,0 +1,111 @@
require File.dirname(__FILE__)+'/test_helper'
require 'fileutils'
require 'compass'
class CompassTest < Test::Unit::TestCase
def setup
Dir.glob("fixtures/*/templates").each do |dirname|
dirname = dirname[9..-11]
mkdir_clean tempfile_loc(dirname)
end
mkdir_clean absolutize("tmp")
mkdir_clean absolutize("tmp/blueprint")
mkdir_clean tempfile_loc("default")
end
def teardown
FileUtils.rm_r absolutize("tmp/blueprint")
Dir.glob("fixtures/*/templates").each do |dirname|
dirname = dirname[9..-11]
FileUtils.rm_r tempfile_loc(dirname)
end
end
def test_blueprint_generates_no_files
Sass::Plugin.options[:template_location][template_loc('default')] = tempfile_loc('default')
Sass::Plugin.update_stylesheets
Dir.new(absolutize("tmp/blueprint")).each do |f|
fail "This file is not expected: #{f}" unless f == "." || f == ".."
end
end
def test_default
with_templates('default') do
each_css_file(tempfile_loc('default')) do |css_file|
assert_no_errors css_file, 'default'
end
end
end
private
def assert_no_errors(css_file, folder)
file = css_file[(tempfile_loc(folder).size+1)..-1]
msg = "Syntax Error found in #{file}. Results saved into #{save_loc(folder)}/#{file}"
assert_equal 0, open(css_file).readlines.grep(/Sass::SyntaxError/).size, msg
end
def with_templates(folder)
old_template_loc = Sass::Plugin.options[:template_location].dup
begin
Sass::Plugin.options[:template_location][template_loc(folder)] = tempfile_loc(folder)
Compass::Frameworks::ALL.each do |framework|
Sass::Plugin.options[:template_location][framework.stylesheets_directory] = tempfile_loc(folder)
end
Sass::Plugin.update_stylesheets
yield
ensure
Sass::Plugin.options[:template_location] = old_template_loc
end
rescue
save_output(folder)
raise
end
def each_css_file(dir)
Dir.glob("#{dir}/**/*.css").each do |css_file|
yield css_file
end
end
def save_output(dir)
FileUtils.rm_rf(save_loc(dir))
FileUtils.cp_r(tempfile_loc(dir), save_loc(dir))
end
def mkdir_clean(dir)
begin
FileUtils.mkdir dir
rescue Errno::EEXIST
FileUtils.rm_r dir
FileUtils.mkdir dir
end
end
def tempfile_loc(folder)
absolutize("fixtures/#{folder}/tmp")
end
def template_loc(folder)
absolutize("fixtures/#{folder}/templates")
end
def result_loc(folder)
absolutize("fixtures/#{folder}/results")
end
def save_loc(folder)
absolutize("fixtures/#{folder}/saved")
end
def absolutize(path)
if path.blank?
File.dirname(__FILE__)
elsif path[0] == ?/
"#{File.dirname(__FILE__)}#{path}"
else
"#{File.dirname(__FILE__)}/#{path}"
end
end
end

View File

@ -0,0 +1,4 @@
@import blueprint/ie
body
+blueprint-ie

View File

@ -0,0 +1,4 @@
@import blueprint/print
body
+blueprint-print

View File

@ -0,0 +1,21 @@
@import blueprint/screen
@import compass/reset
html
+reset-html
body
+blueprint
#main.container
#top
+column(24, last)
#middle
+column(24, last)
#left
+column(6)
#content
+column(12)
#right
+column(6, last)
#bottom
+column(24, last)

37
test/test_helper.rb Normal file
View File

@ -0,0 +1,37 @@
# allows testing with edge Rails by creating a test/rails symlink
RAILS_ROOT = linked_rails = File.dirname(__FILE__) + '/rails'
RAILS_ENV = 'test'
need_gems = false
if File.exists?(linked_rails) && !$:.include?(linked_rails + '/activesupport/lib')
puts "[ using linked Rails ]"
$:.unshift linked_rails + '/activesupport/lib'
$:.unshift linked_rails + '/actionpack/lib'
else
need_gems = true
end
# allows testing with edge Haml by creating a test/haml symlink
linked_haml = File.dirname(__FILE__) + '/haml'
if File.exists?(linked_haml) && !$:.include?(linked_haml + '/lib')
puts "[ using linked Haml ]"
$:.unshift linked_haml + '/lib'
else
need_gems = true
end
require 'rubygems' if need_gems
require 'action_controller'
require 'action_view'
require 'haml'
require 'sass'
require 'sass/plugin'
require 'test/unit'
Sass::Plugin.options[:template_location] = {
"#{File.dirname(__FILE__)}/../src" => "#{File.dirname(__FILE__)}/tmp/blueprint"
}