github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:chriseppstein/compass

Browse Source
This commit is contained in:
Brandon Mathis 2011-04-26 18:30:57 -05:00
commit 7106b7d719
469 changed files with 6439 additions and 2500 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -25,3 +25,4 @@ doc-src/.bundle
attic
devbin
.rvmrc
*.rbc

18
Gemfile
View File

@ -1,17 +1,27 @@
source :rubygems
gem "compass", :path => "."
gemspec
gem "cucumber", "~> 0.9.2"
gem "rspec", "~>2.0.0"
gem "rails", "~>3.0.0.rc"
gem "compass-validator", "3.0.0"
gem "css_parser", "~> 1.0.1"
gem "sass"
gem "haml", "~> 3.1.alpha"
gem "sass", "3.1.0.alpha.263"
gem "haml", "~> 3.1.0.alpha"
gem "rcov"
gem "rubyzip"
gem "livereload"
gem "chunky_png", "~> 0.10.1"
gem "rb-fsevent"
gem "ruby-prof" unless RUBY_PLATFORM == "java"
gem 'autotest'
gem 'autotest-fsevent'
gem 'fakefs', :git => 'git://github.com/johnbintz/fakefs.git'
gem 'mocha'
gem 'timecop'

153
Gemfile.lock Normal file
View File

@ -0,0 +1,153 @@
GIT
remote: git://github.com/johnbintz/fakefs.git
revision: 005ddaaeb2b2881391c31ac9846a55ce5a42c206
specs:
fakefs (0.3.1)
PATH
remote: .
specs:
compass (0.11.1)
chunky_png (~> 1.1.1)
fssm (>= 0.2.7)
sass (>= 3.1.0.alpha.249)
GEM
remote: http://rubygems.org/
specs:
ZenTest (4.5.0)
abstract (1.0.0)
actionmailer (3.0.7)
actionpack (= 3.0.7)
mail (~> 2.2.15)
actionpack (3.0.7)
activemodel (= 3.0.7)
activesupport (= 3.0.7)
builder (~> 2.1.2)
erubis (~> 2.6.6)
i18n (~> 0.5.0)
rack (~> 1.2.1)
rack-mount (~> 0.6.14)
rack-test (~> 0.5.7)
tzinfo (~> 0.3.23)
activemodel (3.0.7)
activesupport (= 3.0.7)
builder (~> 2.1.2)
i18n (~> 0.5.0)
activerecord (3.0.7)
activemodel (= 3.0.7)
activesupport (= 3.0.7)
arel (~> 2.0.2)
tzinfo (~> 0.3.23)
activeresource (3.0.7)
activemodel (= 3.0.7)
activesupport (= 3.0.7)
activesupport (3.0.7)
addressable (2.2.5)
arel (2.0.9)
autotest (4.4.6)
ZenTest (>= 4.4.1)
autotest-fsevent (0.2.5)
sys-uname
builder (2.1.2)
chunky_png (1.1.1)
compass-validator (3.0.0)
css_parser (1.0.1)
cucumber (0.9.4)
builder (~> 2.1.2)
diff-lcs (~> 1.1.2)
gherkin (~> 2.2.9)
json (~> 1.4.6)
term-ansicolor (~> 1.0.5)
diff-lcs (1.1.2)
em-dir-watcher (0.9.4)
em-websocket (0.2.1)
addressable (>= 2.1.1)
eventmachine (>= 0.12.9)
erubis (2.6.6)
abstract (>= 1.0.0)
eventmachine (0.12.10)
fssm (0.2.7)
gherkin (2.2.9)
json (~> 1.4.6)
term-ansicolor (~> 1.0.5)
haml (3.1.0)
i18n (0.5.0)
json (1.4.6)
livereload (1.6)
em-dir-watcher (>= 0.1)
em-websocket (>= 0.1.2)
ruby-json (>= 1.1.2)
mail (2.2.17)
activesupport (>= 2.3.6)
i18n (>= 0.4.0)
mime-types (~> 1.16)
treetop (~> 1.4.8)
mime-types (1.16)
mocha (0.9.12)
polyglot (0.3.1)
rack (1.2.2)
rack-mount (0.6.14)
rack (>= 1.0.0)
rack-test (0.5.7)
rack (>= 1.0)
rails (3.0.7)
actionmailer (= 3.0.7)
actionpack (= 3.0.7)
activerecord (= 3.0.7)
activeresource (= 3.0.7)
activesupport (= 3.0.7)
bundler (~> 1.0)
railties (= 3.0.7)
railties (3.0.7)
actionpack (= 3.0.7)
activesupport (= 3.0.7)
rake (>= 0.8.7)
thor (~> 0.14.4)
rake (0.8.7)
rb-fsevent (0.4.0)
rcov (0.9.9)
rspec (2.0.1)
rspec-core (~> 2.0.1)
rspec-expectations (~> 2.0.1)
rspec-mocks (~> 2.0.1)
rspec-core (2.0.1)
rspec-expectations (2.0.1)
diff-lcs (>= 1.1.2)
rspec-mocks (2.0.1)
rspec-core (~> 2.0.1)
rspec-expectations (~> 2.0.1)
ruby-json (1.1.2)
ruby-prof (0.10.5)
rubyzip (0.9.4)
sass (3.1.0.alpha.263)
sys-uname (0.8.5)
term-ansicolor (1.0.5)
thor (0.14.6)
timecop (0.3.5)
treetop (1.4.9)
polyglot (>= 0.3.1)
tzinfo (0.3.26)
PLATFORMS
ruby
DEPENDENCIES
autotest
autotest-fsevent
compass!
compass-validator (= 3.0.0)
css_parser (~> 1.0.1)
cucumber (~> 0.9.2)
fakefs!
haml (~> 3.1.0.alpha)
livereload
mocha
rails (~> 3.0.0.rc)
rb-fsevent
rcov
rspec (~> 2.0.0)
ruby-prof
rubyzip
sass (= 3.1.0.alpha.263)
timecop

4
VERSION.yml
View File

@ -1,5 +1,5 @@
---
:major: 0
:minor: 11
:state: alpha
:build: 4
:build: 1
:name: Antares

5
autotest/discover.rb Normal file
View File

@ -0,0 +1,5 @@
Autotest.add_discovery { 'rspec2' }

12
compass.gemspec
View File

@ -4,20 +4,20 @@ require File.join(path, 'compass/version')
Gem::Specification.new do |gemspec|
gemspec.name = "compass"
gemspec.version = Compass::VERSION # Update the VERSION.yml file to set this.
gemspec.date = "#{Time.now.year}-#{Time.now.month}-#{Time.now.day}" # Automatically update for each build
gemspec.description = "Compass is a Sass-based Stylesheet Framework that streamlines the creation and maintainance of CSS."
gemspec.homepage = "http://compass-style.org"
gemspec.authors = ["Chris Eppstein", "Eric A. Meyer", "Brandon Mathis", "Nico Hagenburger"]
gemspec.authors = ["Chris Eppstein", "Eric A. Meyer", "Brandon Mathis", "Nico Hagenburger", "Scott Davis"]
gemspec.email = "chris@eppsteins.net"
gemspec.default_executable = "compass"
#gemspec.default_executable = "compass" #deprecated
gemspec.executables = %w(compass)
gemspec.has_rdoc = false
#gemspec.has_rdoc = false #deprecated
gemspec.require_paths = %w(lib)
gemspec.rubygems_version = "1.3.5"
gemspec.summary = %q{A Real Stylesheet Framework}
gemspec.add_dependency 'sass', '>= 3.1.0.alpha.50'
gemspec.add_dependency 'chunky_png', '~> 0.10.3'
gemspec.add_dependency 'sass', '~> 3.1'
gemspec.add_dependency 'chunky_png', '~> 1.1'
gemspec.add_dependency 'fssm', '>= 0.2.7'
gemspec.files = %w(README.markdown LICENSE.markdown VERSION.yml Rakefile)
gemspec.files += Dir.glob("bin/*")

7
doc-src/Gemfile
View File

@ -8,14 +8,15 @@ gem 'mime-types'
gem 'serve', "1.0.0"
gem 'nokogiri'
gem 'coderay'
gem 'sass', ">= 3.1.0.alpha.50"
gem 'fssm', '0.1.2'
gem 'sass', ">= 3.1.0.alpha.249"
gem 'haml', ">= 3.1.0.alpha.36"
gem 'rake'
gem 'compass', :path => ".."
gem 'compass-susy-plugin', ">=0.7.0.pre8"
gem 'css-slideshow', "0.2.0"
gem 'json'
gem 'css_parser'
gem 'css_parser', "1.0.1"
gem 'ruby-prof'
gem 'rb-fsevent'

44
doc-src/Gemfile.lock
View File

@ -8,40 +8,42 @@ GIT
PATH
remote: ..
specs:
compass (0.11.alpha.4.d67a43a)
chunky_png (~> 0.10.3)
sass (>= 3.1.0.alpha.50)
compass (0.11.1.63cae60)
chunky_png (~> 1.1)
fssm (>= 0.2.7)
sass (~> 3.1)
GEM
remote: http://rubygems.org/
specs:
activesupport (3.0.1)
chunky_png (0.10.5)
coderay (0.9.5)
compass-susy-plugin (0.8.1)
compass (>= 0.10.0)
activesupport (3.0.7)
chunky_png (1.1.1)
coderay (0.9.7)
compass-susy-plugin (0.9.beta.3)
compass (>= 0.11.beta.3)
cri (1.0.1)
css-slideshow (0.2.0)
compass (>= 0.10.0.rc3)
css_parser (1.1.4)
fssm (0.1.2)
haml (3.1.0.alpha.36)
css_parser (1.0.1)
fssm (0.2.7)
haml (3.1.0)
i18n (0.4.2)
json (1.4.6)
json (1.5.1)
mime-types (1.16)
nokogiri (1.4.3.1)
rack (1.2.1)
nokogiri (1.4.4)
rack (1.2.2)
rake (0.8.7)
rdiscount (1.6.5)
rb-fsevent (0.4.0)
rdiscount (1.6.8)
ruby-prof (0.9.2)
sass (3.1.0.alpha.214)
sass (3.1.0)
serve (1.0.0)
activesupport (~> 3.0.1)
i18n (~> 0.4.1)
rack (~> 1.2.1)
tzinfo (~> 0.3.23)
thor (0.14.4)
tzinfo (0.3.23)
thor (0.14.6)
tzinfo (0.3.26)
PLATFORMS
ruby
@ -51,8 +53,7 @@ DEPENDENCIES
compass!
compass-susy-plugin (>= 0.7.0.pre8)
css-slideshow (= 0.2.0)
css_parser
fssm (= 0.1.2)
css_parser (= 1.0.1)
haml (>= 3.1.0.alpha.36)
json
mime-types
@ -60,8 +61,9 @@ DEPENDENCIES
nokogiri
rack
rake
rb-fsevent
rdiscount
ruby-prof
sass (>= 3.1.0.alpha.50)
sass (>= 3.1.0.alpha.249)
serve (= 1.0.0)
thor

36
doc-src/README.markdown
View File

@ -49,7 +49,7 @@ If you are adding an asset (E.g. image, css, javascript) place the file(s) in th
Running the following command will generate a new example:
bundle exec thor generate:example blueprint/grid/simple/
./bin/thor generate:example blueprint/grid/simple/
An example consists of three files:
@ -74,7 +74,7 @@ After adding the example and adjusting the metadata, go to the reference page an
Generate a reference file for a stylesheet:
bundle exec thor generate:reference ../frameworks/compass/stylesheets/_compass.sass
./bin/thor generate:reference ../frameworks/compass/stylesheets/_compass.sass
The item metadata (at the top of the file) provides some details about what stylesheet is being documented. For instance, here is the metadata for the blueprint color module item:
@ -143,15 +143,7 @@ Go to your fork of Compass on github. Your compass fork will be available on htt
$ git clone git@github.com:**yourusername**/compass.git
### 3. Switch to the docs branch
To work on the docs, you need to do a checkout of the docs branch
$ git checkout docs
(A list branches can be accessed through `git branch` with no arguments)
### 4. Don't forget: bundler!
### 3. Don't forget: bundler!
If you haven't yet done so, install bundler:
@ -160,30 +152,28 @@ If you haven't yet done so, install bundler:
Bundle the gems for this application:
$ cd doc-src
$ bundle install
$ bundle install --binstubs
### 6. Compile the docs
### 4. Compile the docs
To compile (and auto recompile) and preview the site in your browser: (make sure you run nanoc3/aco from the doc-src directory)
To compile (and auto recompile) and preview the site in your browser: (make sure you run nanoc3 aco from the doc-src directory)
$ cd doc-src
$ export RUBYLIB="../lib"
$ bundle exec nanoc3 aco
$ ./bin/nanoc3 aco
Then open `http://localhost:3000/docs/` in your web browser.
Then open `http://localhost:3000/index.html` in your web browser.
aco stands for autocompiler; the site will recompile every time you request a new page.
If you find `bundle exec nanoc3 aco` to be sluggish, try this alternative workflow:
If you find `./bin/nanoc3 aco` to be sluggish, try this alternative workflow:
$ cd doc-src
$ export RUBYLIB="../lib"
$ bundle exec serve 3000 .. &
$ bundle exec rake watch
$ ./bin/serve 3000 output &
$ ./bin/rake watch
It is recommended that you read the 5 minute [tutorial](http://nanoc.stoneship.org/tutorial/) on Nanoc.
### 7. Commit your changes to your Fork
### 5. Commit your changes to your Fork
git commit -a
git push
@ -202,4 +192,4 @@ Then get the new changes with fetch:
And merge them with your local docs branch:
git merge chris/docs
git merge chris

2
doc-src/Rakefile
View File

@ -25,7 +25,7 @@ task :watch do
rebuild_site = lambda do |base, relative|
if relative && relative =~ /\.s[ac]ss/
puts ">>> Change Detected to #{relative} : updating stylsheets <<<"
puts ">>> Change Detected to #{relative} : updating stylesheets <<<"
system "bundle exec compass compile"
else
if !relative

23
doc-src/Rules
View File

@ -47,6 +47,16 @@ compile '/reference/*/' do
layout item[:layout] ? item[:layout] : "main"
end
compile '/posts/*/' do
filter :erb
filter :rdiscount if item[:extension] == "markdown"
layout 'post'
end
compile "/blog/atom/" do
filter :haml, :attr_wrapper => '"'
end
compile '*' do
if item[:extension] == "markdown"
filter :rdiscount
@ -56,6 +66,10 @@ compile '*' do
layout item[:layout] ? item[:layout] : "main"
end
route "/blog/atom/" do
"/blog/atom.xml"
end
route '/search-data/' do
"#{SITE_ROOT}/javascripts"+item.identifier[0..-2]+".js"
end
@ -89,6 +103,15 @@ route '/stylesheets/*/' do
SITE_ROOT+item.identifier.chop + '.css'
end
route '/posts/*/' do
if item.identifier =~ %r{^/posts/(\d{4})-(\d{2})-(\d{2})-(.*)/$}
"/blog/#{$1}/#{$2}/#{$3}/#{$4}/index.html"
else
puts "WARNING: malformed post name: #{item.identifier}"
nil
end
end
%w(markup stylesheet background).each do |ex_file|
route "/examples/*/#{ex_file}/" do
nil

87
doc-src/assets/javascripts/install.js Normal file
View File

@ -0,0 +1,87 @@
function showInstallCommand() {
var cmd = $("#existence").val();
var commands = [];
var notes = [];
var project_name = "&lt;myproject>";
var can_be_bare = true;
commands.push("$ gem install compass");
if (cmd == "init") {
commands.push("$ cd " + project_name);
project_name = ".";
}
if ($("#app-type").val() == "rails") {
if (cmd == "create") {
commands.push("$ rails new " + project_name);
}
cmd = "init rails";
can_be_bare = false;
} else if ($("#app-type").val() == "other") {
if (cmd == "init") {
cmd = "create";
}
} else if ($("#app-type").val() == "stand-alone") {
if (cmd == "init") {
cmd = "install";
can_be_bare = false;
}
}
var framework = $("#framework").val();
var create_command;
if (cmd == "install") {
create_command = "$ compass install " + framework + " " + project_name;
} else {
create_command = "$ compass " + cmd + " " + project_name;
}
if (framework != "compass" && framework != "bare" && cmd != "install") {
create_command = create_command + " --using " + framework;
} else if (framework == "bare") {
if (can_be_bare) {
create_command = create_command + " --bare";
} else {
notes.push("<p class='note warning'>You cannot create a bare project in this configuration. Feel free to remove any stylesheets that you don't want.</p>");
}
}
if ($("#syntax").val() == "sass") {
create_command = create_command + " --syntax sass";
}
if ($("#options").val() == "customized") {
$("#directories").show();
create_command = create_command +
" --sass-dir \"" + $("#sassdir").val() + "\"" +
" --css-dir \"" + $("#cssdir").val() + "\"" +
" --javascripts-dir \"" + $("#jsdir").val() + "\"" +
" --images-dir \"" + $("#imagesdir").val() + "\"";
} else {
$("#directories").hide();
}
commands.push(create_command);
var instructions = "<pre><code>" + commands.join("\n") + "</code></pre>";
if (instructions.match(/&lt;/)) {
notes.push("<p class='note'>Note: Values indicated by &lt;&gt; are placeholders. Change them to suit your needs.</em>");
}
$("#steps").html(instructions + notes.join(""));
}
function attachMadlibBehaviors() {
$("#app-type").change(function(event) {
var val = $(event.target).val();
if (val == "other") {
$("#options").val("customized");
$(".madlib").addClass("customizable");
} else if (val == "rails") {
$("#options").val("default");
$(".madlib").removeClass("customizable");
} else {
$(".madlib").addClass("customizable");
}
});
$("#existence, #app-type, #framework, #syntax, #options").change(showInstallCommand);
$(".madlib input").keyup(function(){setTimeout(showInstallCommand, 0.1)});
}
function setupMadlib() {
attachMadlibBehaviors();
showInstallCommand();
}
$(setupMadlib);

11
doc-src/authors.yml Normal file
View File

@ -0,0 +1,11 @@
chris:
fullname: Chris Eppstein
byline_link: http://chriseppstein.github.com/
brandon:
fullname: Brandon Mathis
eric:
fullname: Eric Meyer
nico:
fullname: Nico Hagenburger
scott:
fullname: Scott Davis

282
doc-src/content/CHANGELOG-v0-11-beta.markdown Normal file
View File

@ -0,0 +1,282 @@
---
title: Compass v0.11.0 Beta History
crumb: CHANGELOG
body_id: changelog
layout: article
---
0.11.beta.8 (UNRELEASED)
------------------------
* Created an official API to add configuration options to compass.
[More information](/help/tutorials/extending/).
0.11.beta.7 (04/16/2011)
------------------------
* Added support for the new webkit gradient syntax that matches the css3 specification.
Support for older webkit browsers remains enabled at this time.
To disable it, set `$support-for-original-webkit-gradients` to false.
* There is a new mixin for creating
[pure-css grid backgrounds](/reference/compass/layout/grid_background/)
for verifying grid alignment for both fixed and fluid grids.
* Add support for pixel-based gradients in the original webkit gradient syntax.
* Added a vertical rhythm function for calculating rhythms without returning a property.
0.11.beta.6 (04/10/2011)
------------------------
* Added support for degree-based linear and radial gradients (not yet supported for SVG gradients)
* Added opera prefix support for linear and radial gradients.
* The CSS3 `background` mixin's "simple" background that came
before the prefixed versions has been removed. If you
need to target css2 background it is recommended that you set a
the background property before calling the `background` mixin
or you can call the `background-with-css2-fallback` if you want
keep using compass's automatic simplification of the arguments.
* Bug fixes
* Fixed and issue with the compass gemspec in rubygems 1.7
* Fixed a bug with sprite imports
0.11.beta.5 (03/27/2011)
------------------------
### Compass Sprites
[Magic Selectors](/help/tutorials/spriting/#magic-selectors) have been added
Fixed a bug causing a stack level too deep in ruby 1.8.7
0.11.beta.4 (03/25/2011)
------------------------
* Extensions that are installed into ~/.compass/extensions will be automatically available to all your compass projects.
### Compass Internals
* Fixed a small bug in callbacks that was causing them to register twice
* The Sprite classes have been abstracted allowing for different engines
* Bumped chunky_png version to 1.1.0
* Total rewrite of the sprite generation classes - thanks to [@johnbintz](https://github.com/johnbintz) for the help
* More Rspec tests
0.11.beta.3 (03/15/2011)
------------------------
### Compass CSS3
* A new CSS3 mixin for [appearance](/reference/compass/css3/appearance/) was added.
* The font-face mixin has been updated again with the [syntax recommendations
from font-spring](http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax).
The API has not changed.
### Compass Typography
* Some text-based mixins have been moved from utilities to the new
typography module. The old imports are deprecated now.
Affected modules: utilities/links, utilities/lists, and utilities/text and
their sub-modules.
* There is a new typography module: [Vertical Rhythm](/reference/compass/typography/vertical_rhythm/).
This makes it easier to align the typography of your page to a common rhythm.
### Compass Utilities
* A new mixin `reset-float` is available in the [float module](/reference/compass/utilities/general/float/#mixin-reset-float) that makes it easier to reset the floats introduced from that module.
* A new mixin `reset-float` is available in the [float module](/reference/compass/utilities/general/float/#mixin-reset-float) that makes it easier to reset the floats introduced from that module.
* A new module has been added to create readable text against an arbitrary background color based on the lightness of the background: [compass/utilities/color/contrast](/reference/compass/utilities/color/contrast/).
* The comma-delimited-list has been renamed to delimited-list and
generalized to accept a delimiter which defaults to a comma.
The old function continues to exist, but is deprecated.
### Compass Internals
* You can now register callbacks for compilation events so that you can take
custom actions when they occur. For instance, you might want to notify
Growl when a stylesheet compilation error occurs.
* Bug fixes & performance improvements.
0.11.beta.2 (02/01/2011)
------------------------
* Updated the font-face mixin so it works in Android 2.2.
Credit: [Paul Irish](http://paulirish.com/).
* The deprecated & unused arguments to the font-face mixin have been removed.
0.11.beta.1 (01/17/2011)
------------------------
* Add an option `--skip-overrides` to the sprite
subcommand. When provided, the default variables for overriding the sprite
behavior are not created. Instead, you would change the call to
`sprite-map()` to customize your sprite map.
* Rename the `sprite-position` mixin in the new `sprite/base` module to
`sprite-background-position` in order avoid a naming conflict with the old
sprite module.
0.11.beta.0 (01/09/2011)
------------------------
Compass v0.11 is now feature complete. Future changes to this release will be doc improvements, bug fixes, performance tuning, and addressing user feedback.
* Added optional support for IE8 with $legacy-support-for-ie8 which defaults to true.
* Updated the opacity and filter-gradient mixins to make IE's hacky DirectX filters
optional based on Compass's legacy support settings.
* Added the ability to piggy back on compass's watcher within your configuration file.
See the [configuration reference](/help/tutorials/configuration-reference/) for details.
* The options passed to the CLI can now be inspected within the compass configuration file.
The CLI options will still override the values set within the config file, but they might
inform other values. For instance `compass compile -e production` will have the environment
parameter preset to `:production` so that you can set other values in the project accordingly.
* New infrastructure for supporting experimental css3 functions that are prefixed but have the same
syntax across all browsers. It is now possible to configure which browsers support which
experimental functions outside of the compass release cycle. For details, see the
[cross browser helpers](/reference/compass/helpers/cross-browser/).
* [Blueprint] Added a new sass function called span($n) to the grid module which replaces
the now **deprecated span mixin**. If you are using this mixin, please replace it with:
`width: span($n)`.
* [Blueprint] Blueprint no longer adds `!important` to the widths of `input`, `textarea`,
and `select` form fields, so compass no longer defaults to using `!important` in those cases.
If you were relying on this behavior, you may need to adjust your stylesheets accordingly.
0.11.alpha.4 (12/08/2010)
-------------------------
* Add a `--time` option to the compile and watch commands. This will print out
the time spent compiling each sass file and a total at the end.
* Upgrade FSSM, the internal library that monitors the filesystem events for compass.
* Removed the command line options that were deprecated in v0.10.
0.11.alpha.3 (12/05/2010)
-------------------------
* Fix a bug in compass running under ruby 1.9.2 that was introduced in v0.11.alpha.2.
0.11.alpha.2 (12/05/2010)
-------------------------
* Merge with Lemonade. Compass now provides a full featured spriting solution.
See the [spriting tutorial](/help/tutorials/spriting/) for more information.
* Compass now depends on Sass 3.1. You can install the preview release:
`gem install sass --pre`. Note: you must also upgrade your haml gem if you
use both in the same application.
* A third argument is now available on the `image-url()` helper. When `true` or
`false`, it will enable/disable the cache buster for a single image url. Or when
a string, it will be the cache buster used.
* Upgrade CSS3 PIE to 1.0-beta3.
* Bug fixes.
0.11.alpha.1 (11/22/2010)
-------------------------
* Support for Sass 3.1 alpha version
* CSS3 PIE module. [Docs](/reference/compass/css3/pie/).
* The versioned modules in the last release have been removed. There is now
just a single module for each and the overloaded mixins will discern
deprecated usage and warn accordingly.
* Allow erb processing of non all non-binary filetypes during extension installs.
* Added a `background` mixin for css3 gradient support in the shorthand style.
* Fix for gradients in opera with bordered elements.
* The `multiple-text-shadows` and `multiple-box-shadows` mixins that were present in
v0.11.alpha.0 were removed because they were unnecessary. Just use the `text-shadow`
and `box-shadow` mixins.
* The docs are [getting a make-over](http://beta.compass-style.org/) by Brandon :)
0.11.alpha.0 (11/15/2010)
-------------------------
Note: Compass does not currently support Sass 3.1 alphas.
### Deprecations
* Deprecated imports and APIs from v0.10 have been removed.
* Changed defaults for the box-shadow and text-shadow mixins.
Previously the horizontal and vertical offset were both 1, which
expected a top left light source. They are now set to 0 which assumes
a direct light source, a more generic default.
* The linear-gradient and radial-gradient mixins have been deprecated.
Instead use the background-image mixin and pass it a gradient function.
The deprecation warning will print out the correct call for you to use.
* Passing an argument to the `blueprint-scaffolding` mixin is not necessary
and has been deprecated.
* Some blueprint color defaults now use color functions instead of color arithmetic.
This may result in different output for those who have color customizations.
### Blueprint
* Updated from blueprint 0.9 to blueprint 1.0
* Added .info and .alert classes to forms.css [CMM]
* Fixed numerous bugs in forms, including the fieldset padding bug in IE6-8 [CMM]
* Fixed specificity problems in typography.css and grid.css [CMM]
* See Lighthouse for more bug fixes
* Full [blueprint changelog][blueprint_10_change]
* If for some reason you'd like to stay on the older version of blueprint you can run
the following command in your project before you upgrade (or after temporarily downgrading):
`compass unpack blueprint`
### CSS3 v2.0
Our CSS3 module makes writing CSS3 today almost as easy as it will be when all
the browsers officially support the new features. The second version of the
compass CSS module brings the API up to date with developments over the past
6 to 9 months of browser changes and more closely matching the most recent CSS
specifications. [Upgrade guide](/help/tutorials/upgrading/antares/). Summary of changes.
* Support for multiple box shadows and text shadows
* Support for 2d and 3d transforms
* Opt-in SVG support for gradients in opera and IE9.
Set `$experimental-support-for-svg : true` in your
stylesheet to enable it.
* Fixed a radial gradient position bug.
* To generate a simple linear gradient in IE6 & 7, you can now use
the `filter-gradient` mixin.
* New `background-image` mixin with gradient support and allowing
up to 10 images.
* Gradient support for the border-image property.
* Gradient support for list-style-image property.
* Gradient support for the content property.
### Helpers
* `linear-gradient()` & `radial-gradient()` helpers now intercept standard css
functions and parse them into Sass Literals. These work with new vendor helpers
(`-moz()`, `-webkit`, `-o`, `-ie`, and `-svg` (yes I know svg is not a vendor))
to return specific representations of the linear & radial gradients. The
`prefixed()` function will check a value to see if it has a certain
vendor-specific representation.
* New color helpers: `adjust-lightness`, `adjust-saturation`, `scale-lightness`, and `scale-saturation`
make it easier to construct apis that manipulate these color attributes.
* The `elements-of-type()` helper now returns html5 elements when the display is `block`
and also will return only html5 elements for `elements-of-type(html5)`
* Compass now provides several helper functions related to trigonometry.
There's no practical use, but it's hoped that users will find fun things to
do with these for technology demonstrations:
* `sin($number)` - Takes the sine of the number.
* `cos($number)` - Takes the cosine of the number.
* `tan($number)` - Takes the tangent of the number.
* `pi()` - Returns the value of π.
If you provide a number with units of `deg` then it will return a unitless number
after converting to radians. Otherwise, it assumes the number is a radian length measure
and passes the units along to the result.
* `ie-hex-str($color)` returns a #AARRGGBB formatted color suitable for
passing to IE filters.
* A new function `if()` that allows you to switch on a value without using `@if`.
Usage: `if($truth-value, $value-if-true, $value-if-false)`.
* Compass has added a number of new helper functions for lists that begin with
`-compass`, helpers that begin with `-compass` should be considered "private" and
are not to be used by compass users. Sass 3.1 will have proper list support,
these are a work around until that time.
### Configuration
* Added a new configuration property to disable sass warnings: `disable_warnings`
### Core Framework
* New layout mixins for absolute positioning: stretch, stretch-x, stretch-y
### Rails
* In rails 3, there's no need for an initializer. Instead we use a
Railstie.
* We now default to app/stylesheets for sass files and public/stylesheets for
css files -- though they can still be changed after installation or on the
command line during project initialization.
* Compass is now a gem plugin in a rails environment.
* In a rails3 environment the compass configuration can now be
changed without restarting the rails server process.

245
doc-src/content/CHANGELOG.markdown
View File

@ -7,88 +7,26 @@ layout: default
COMPASS CHANGELOG
=================
Upgrading compass is really easy.
Upgrading compass is pretty easy.
Don't let all these details [scare you...](/help/tutorials/upgrading/im-scared/)
The Documentation for the [latest stable release](http://compass-style.org/docs/):
The Documentation for the [latest preview release](http://beta.compass-style.org/)
0.11.alpha.5 (future)
---------------------
0.11.0 (04/24/2011)
-------------------
* Added optional support for IE8 with $legacy-support-for-ie8 which defaults to true.
* Updated the opacity and filter-gradient mixins to make IE's hacky DirectX filters
optional based on Compass's legacy support settings.
* Added the ability to piggy back on compass's watcher within your configuration file.
See the [configuration reference](/help/tutorials/configuration-reference/) for details.
* The options passed to the CLI can now be inspected within the compass configuration file.
The CLI options will still override the values set within the config file, but they might
inform other values. For instance `compass compile -e production` will have the environment
parameter preset to `:production` so that you can set other values in the project accordingly.
* New infrastructure for supporting experimental css3 functions that are prefixed but have the same
syntax across all browsers. It is now possible to configure which browsers support which
experimental functions outside of the compass release cycle. For details, see the
[cross browser helpers](/reference/compass/helpers/cross-browser/).
* [Blueprint] Added a new sass function called span($n) to the grid module which replaces
the now **deprecated span mixin**. If you are using this mixin, please replace it with:
`width: span($n)`.
* [Blueprint] Blueprint no longer adds `!important` to the widths of `input`, `textarea`,
and `select` form fields, so compass no longer defaults to using `!important` in those cases.
If you were relying on this behavior, you may need to adjust your stylesheets accordingly.
This changelog entry is aggregated across all the v0.11 beta releases.
If you're upgrading from a previous beta v0.11 beta release, you can read
[the 0.11 beta release notes here](/CHANGELOG-v0-11-beta/).
### !important
0.11.alpha.4 (12/08/2010)
-------------------------
#### Breaking Changes & Deprecations:
* Add a `--time` option to the compile and watch commands. This will print out
the time spent compiling each sass file and a total at the end.
* Upgrade FSSM, the internal library that monitors the filesystem events for compass.
* Removed the command line options that were deprecated in v0.10.
0.11.alpha.3 (12/05/2010)
-------------------------
* Fix a bug in compass running under ruby 1.9.2 that was introduced in v0.11.alpha.2.
0.11.alpha.2 (12/05/2010)
-------------------------
* Merge with Lemonade. Compass now provides a full featured spriting solution.
See the [spriting tutorial](/help/tutorials/spriting/) for more information.
* Compass now depends on Sass 3.1. You can install the preview release:
`gem install sass --pre`. Note: you must also upgrade your haml gem if you
use both in the same application.
* A third argument is now available on the `image-url()` helper. When `true` or
`false`, it will enable/disable the cache buster for a single image url. Or when
a string, it will be the cache buster used.
* Upgrade CSS3 PIE to 1.0-beta3.
* Bug fixes.
0.11.alpha.1 (11/22/2010)
-------------------------
* Support for Sass 3.1 alpha version
* CSS3 PIE module. [Docs](/reference/compass/css3/pie/).
* The versioned modules in the last release have been removed. There is now
just a single module for each and the overloaded mixins will discern
deprecated usage and warn accordingly.
* Allow erb processing of non all non-binary filetypes during extension installs.
* Added a `background` mixin for css3 gradient support in the shorthand style.
* Fix for gradients in opera with bordered elements.
* The `multiple-text-shadows` and `multiple-box-shadows` mixins that were present in
v0.11.alpha.0 were removed because they were unnecessary. Just use the `text-shadow`
and `box-shadow` mixins.
* The docs are [getting a make-over](http://beta.compass-style.org/) by Brandon :)
0.11.alpha.0 (11/15/2010)
-------------------------
Note: Compass does not currently support Sass 3.1 alphas.
### Deprecations
* Deprecated imports and APIs from v0.10 have been removed.
* Deprecated imports and APIs from v0.10 have been removed. If you are upgrading
from v0.8, please upgrade to v0.10 before installing v0.11.
* Changed defaults for the box-shadow and text-shadow mixins.
Previously the horizontal and vertical offset were both 1, which
expected a top left light source. They are now set to 0 which assumes
@ -100,6 +38,31 @@ Note: Compass does not currently support Sass 3.1 alphas.
and has been deprecated.
* Some blueprint color defaults now use color functions instead of color arithmetic.
This may result in different output for those who have color customizations.
* The deprecated & unused arguments to the `font-face` mixin have been removed.
* Lemonade has been merged into compass. If you've been using Lemonade, you need to
upgrade your sprites to use the new [Compass Sprites](/help/tutorials/spriting/).
#### Dependencies
* Compass now depends on Sass 3.1 which is a new stand-alone gem that has been separated
from Haml. **If you have Haml installed, you must upgrade it to 3.1 as well.**
* Compass now depends on ChunkyPNG, a pure-ruby library for generating PNG files.
* The FSSM library that used to be vendored is now upgraded and a normal gem dependency.
If you don't know what this means, then you don't need to care :)
### New Sass Features
Sass 3.1 brings a ton of great new features that Compass now uses and you can too!
* Proper List Support. Space and Comma separated lists used to cause values to become strings when passing them to mixins. Now the values in lists are preserved as their original types.
* Sass-based Functions. Define your own value functions and use them anywhere.
* Keyword Style Argument passing to Functions and Mixins. It can be hard to understand what
the values being passed to a mixin or function are for, use keyword style arguments to
make it easier to understand what's going on.
* `@media` bubbling. Use a media declaration anywhere and it will be bubbled to the top level
for you.
For more information about the new Sass features, see the [Sass CHANGELOG](http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html).
### Blueprint
@ -112,8 +75,26 @@ Note: Compass does not currently support Sass 3.1 alphas.
* If for some reason you'd like to stay on the older version of blueprint you can run
the following command in your project before you upgrade (or after temporarily downgrading):
`compass unpack blueprint`
* [Blueprint] Blueprint no longer adds `!important` to the widths of `input`, `textarea`,
and `select` form fields, so compass no longer defaults to using `!important` in those cases.
If you were relying on this behavior, you may need to adjust your stylesheets accordingly.
* [Blueprint] Added a new sass function called span($n) to the grid module which replaces
the now **deprecated span mixin**. If you are using this mixin, please replace it with:
`width: span($n)`.
### CSS3 v2.0
### Spriting Support
* Compass now has a world-class spriting system after merging with [Lemonade][lemonade].
See the [spriting tutorial](/help/tutorials/spriting/) for more information.
* The [old sprite module](/reference/compass/utilities/sprites/sprite_img/) is still available
for working with hand-generated sprite maps.
* The Sprite internals are abstracted allowing for different engines. By default
compass uses ChunkyPNG which only supports PNG files, so some users might prefer
ImageMagic which is available via a [plugin](#XXXLINKME).
* [Magic Selectors](/help/tutorials/spriting/#magic-selectors) make it simple to define
sprites that work with user interaction pseudo classes like `:hover`, `:active`, etc.
### CSS3 Module v2.0
Our CSS3 module makes writing CSS3 today almost as easy as it will be when all
the browsers officially support the new features. The second version of the
@ -121,30 +102,39 @@ compass CSS module brings the API up to date with developments over the past
6 to 9 months of browser changes and more closely matching the most recent CSS
specifications. [Upgrade guide](/help/tutorials/upgrading/antares/). Summary of changes.
* Support for multiple box shadows and text shadows
* Support for 2d and 3d transforms
* Opt-in SVG support for gradients in opera and IE9.
Set `$experimental-support-for-svg : true` in your
* Support for multiple [box shadows](/reference/compass/css3/box_shadow/)
and multiple [text shadows](/reference/compass/css3/text-shadow/)
* Support for [2d and 3d transforms](/reference/compass/css3/transform/)
* Opt-in [SVG support](/reference/compass/support/#const-experimental-support-for-svg)
for gradients in opera and IE9. Set `$experimental-support-for-svg : true` in your
stylesheet to enable it.
* Fixed a radial gradient position bug.
* To generate a simple linear gradient in IE6 & 7, you can now use
the `filter-gradient` mixin.
* New `background-image` mixin with gradient support and allowing
up to 10 images.
* Gradient support for the border-image property.
* Gradient support for list-style-image property.
* Gradient support for the content property.
the [filter-gradient mixin](/reference/compass/css3/images/#mixin-filter-gradient).
* New [images module](/reference/compass/css3/images/) makes gradients simple for
all properties that support them using the CSS3 standard syntax.
* Compass now has opt-in support for the CSS3 PIE library. [Docs](/reference/compass/css3/pie/).
* Added optional support for IE8 with `$legacy-support-for-ie8` which defaults to true.
* Updated the `opacity` and `filter-gradient` mixins to make IE's hacky DirectX filters
optional based on Compass's legacy support settings.
* A new CSS3 mixin for [appearance](/reference/compass/css3/appearance/) was added.
* The font-face mixin has been updated again with the [syntax recommendations
from font-spring](http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax).
The API has not changed.
* Added support for the new webkit gradient syntax that matches the css3 specification.
Support for older webkit browsers remains enabled at this time.
To disable it, set `$support-for-original-webkit-gradients` to false.
### Helpers
### Helper Functions
* `linear-gradient()` & `radial-gradient()` helpers now intercept standard css
functions and parse them into Sass Literals. These work with new vendor helpers
(`-moz()`, `-webkit`, `-o`, `-ie`, and `-svg` (yes I know svg is not a vendor))
(`-moz()`, `-webkit`, `-o`, `-ie`, and `-svg` (yes, we know svg is not a vendor))
to return specific representations of the linear & radial gradients. The
`prefixed()` function will check a value to see if it has a certain
vendor-specific representation.
* New color helpers: `adjust-lightness`, `adjust-saturation`, `scale-lightness`, and `scale-saturation`
make it easier to construct apis that manipulate these color attributes.
* New color helpers: `adjust-lightness`, `adjust-saturation`, `scale-lightness`,
and `scale-saturation` make it easier to construct apis that manipulate these
color attributes.
* The `elements-of-type()` helper now returns html5 elements when the display is `block`
and also will return only html5 elements for `elements-of-type(html5)`
* Compass now provides several helper functions related to trigonometry.
@ -155,29 +145,68 @@ specifications. [Upgrade guide](/help/tutorials/upgrading/antares/). Summary of
* `tan($number)` - Takes the tangent of the number.
* `pi()` - Returns the value of π.
If you provide a number with units of `deg` then it will return a unitless number
after converting to radians. Otherwise, it assumes the number is a radian length measure
and passes the units along to the result.
after converting to radians. Otherwise, it assumes the number is a radian length
measure and passes the units along to the result.
* `ie-hex-str($color)` returns a #AARRGGBB formatted color suitable for
passing to IE filters.
* A new function `if()` that allows you to switch on a value without using `@if`.
Usage: `if($truth-value, $value-if-true, $value-if-false)`.
* Compass has added a number of new helper functions for lists that begin with
`-compass`, helpers that begin with `-compass` should be considered "private" and
are not to be used by compass users. Sass 3.1 will have proper list support,
these are a work around until that time.
* Compass has added a number of new helper functions that begin with
`-compass`, helpers that begin with `-compass` should be considered "private"
and are not to be used.
* A third argument is now available on the `image-url()` helper. When `true` or
`false`, it will enable/disable the cache buster for a single image url. Or when
a string, will be the cache buster value that is used.
### Configuration
### Configuration Files
* Added a new configuration property to disable sass warnings: `disable_warnings`
* New infrastructure for supporting experimental css3 functions that are prefixed but have
the same syntax across all browsers. It is now possible to configure which browsers
support which experimental functions outside of the compass release cycle.
For details, see the [cross browser helpers](/reference/compass/helpers/cross-browser/).
* The options passed to the CLI can now be inspected within the compass configuration file.
The CLI options will still override the values set within the config file, but they might
inform other values. For instance `compass compile -e production` will have the environment
parameter preset to `:production` so that you can set other values in the project accordingly.
* Added the ability to piggy back on compass's watcher within your configuration file.
See the [configuration reference](/help/tutorials/configuration-reference/) for details.
* You can now register callbacks for compilation events so that you can take
custom actions when they occur. For instance, you might want to notify
Growl when a stylesheet compilation error occurs.
### Core Framework
### New Compass Typography Module
* Some text-based mixins have been moved from utilities to the new
typography module. The old imports are deprecated now.
Affected modules: `utilities/links`, `utilities/lists`, and `utilities/text` and
their sub-modules.
* There is a new typography module:
[Vertical Rhythm](/reference/compass/typography/vertical_rhythm/).
This makes it easier to align the typography of your page to a common rhythm.
### Compass Layout Module
* New layout mixins for absolute positioning: stretch, stretch-x, stretch-y
* There is a new mixin for creating
[pure-css grid backgrounds](/reference/compass/layout/grid_background/)
for verifying grid alignment for both fixed and fluid grids.
### Compass Utilities
* A new mixin `reset-float` is available in the [float module](/reference/compass/utilities/general/float/#mixin-reset-float) that makes it easier to reset the floats introduced from that module.
* A new module has been added to create readable text against an arbitrary background color based on the lightness of the background: [compass/utilities/color/contrast](/reference/compass/utilities/color/contrast/).
* The comma-delimited-list has been renamed to delimited-list and
generalized to accept a delimiter which defaults to a comma.
The old function continues to exist, but is deprecated.
### Command Line
* Add a `--time` option to the compile and watch commands. This will print out
the time spent compiling each sass file and a total at the end.
### Rails
* In rails 3, there's no need for an initializer. Instead we use a
Railstie.
Railtie. If you have one, please remove it.
* We now default to app/stylesheets for sass files and public/stylesheets for
css files -- though they can still be changed after installation or on the
command line during project initialization.
@ -185,6 +214,20 @@ specifications. [Upgrade guide](/help/tutorials/upgrading/antares/). Summary of
* In a rails3 environment the compass configuration can now be
changed without restarting the rails server process.
### Extensions
* Compass now allows ERB processing of non all non-binary filetypes during
extension installs.
* Extensions that are installed into `~/.compass/extensions` will be automatically
available to all your compass projects.
* Created an official API to add configuration options to compass.
[More information](/help/tutorials/extending/).
### Miscellaneous
* We have a new website design from [Brandon Mathis][brandon]
* Compass now officially supports the following ruby interpreters:
jruby, ruby 1.8.7, ruby 1.9.2, ree, and rubinius.
0.10.7 (UNRELEASED)
-------------------
@ -1046,6 +1089,8 @@ Almost definitely. Please let me know if you encounter any problems and I'll get
[der-rich]: http://github.com/der-rich
[adamstac]: http://github.com/adamstac
[ttilley]: http://github.com/ttilley
[inline-block-list]: http://compass-style.org/reference/compass/utilities/lists/inline-block-list/
[inline-block-list]: http://compass-style.org/reference/compass/typography/lists/inline-block-list/
[html5-reset]: http://compass-style.org/reference/compass/reset/utilities/#mixin-reset-html5
[blueprint_10_change]: https://github.com/chriseppstein/compass/compare/a05e1ee7c0a1e4c0f0595a8bb812daa47872e476...864780969d872a93b1fd3b4f39f29dd9f0c3fe75
[brandon]: http://brandonmathis.com/
[lemonade]: http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html

14
doc-src/content/blog.haml Normal file
View File

@ -0,0 +1,14 @@
---
layout: blog
---
%h1 Compass Blog
- for post in blog_posts_in_order.reverse
.post-snippet
%h2
- time = blog_date(post)
%span.timestamp= time.strftime("%Y/%m/%d")
%a{:href => post.rep_named(:default).path}= post[:title]
%p= post[:intro] || post[:description]

14
doc-src/content/blog/archive.haml Normal file
View File

@ -0,0 +1,14 @@
---
layout: blog
---
%h1 Compass Blog Archive
- for post in blog_posts_in_order.reverse
.post-snippet
%h2
- time = blog_date(post)
%span.timestamp= time.strftime("%Y/%m/%d")
%a{:href => post.rep_named(:default).path}= post[:title]
%p= post[:intro] || post[:description]

19
doc-src/content/blog/atom.haml Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
%feed(xmlns="http://www.w3.org/2005/Atom")
%title Compass Blog
%link(href="http://compass-style.org/blog/atom.xml" rel="self")
%link(href="http://compass-style.org/blog/")
%updated= Time.now.xmlschema
%id http://compass-style.org/blog/
%author
%name Compass Core Team
- for post in blog_posts_in_order.reverse
- full_url = "http://compass-style.org#{post.rep_named(:default).path}"
%entry
%title&= post[:title]
%link{:href=> full_url}
%updated= blog_date(post).localtime.xmlschema
%id= full_url[0..-2]
%content(type="html")
= post[:intro] || post[:description]

2
doc-src/content/examples/compass/css3/gradient/stylesheet.sass
View File

@ -14,7 +14,7 @@
// This will yield a radial gradient with an apparent specular highlight
#radial-gradient
+background-image(radial-gradient(45 45, #0ff 10px, #1e90ff 30px))
+background-image(radial-gradient(45px 45px, #0ff 10px, #1e90ff 30px))
// This yields a linear gradient spanning from the upper left corner to the lower right corner
#linear-gradient

39
doc-src/content/examples/compass/layout/stretching/markup.haml
View File

@ -1,17 +1,30 @@
.example
Click on the the following links to make them stretch.
Click <a href="#">here</a> to dismiss it.
#stretch-container
%ul
%li
%a#stretch-full(href="#stretch-full")
%li.stretch-container
#stretch-full
This element is fully stretched.
%li
%a#stretch-offset(href="#stretch-offset")
%li.stretch-container
#stretch-offset
This element is stretched with a 1em offset on each side.
%li
%a#stretch-x(href="#stretch-x")
This element is stretched horizontally.
%li
%a#stretch-y(href="#stretch-y")
This element is stretched vertically.
%li.stretch-container
#stretch-x
This
%br
element
%br
is
%br
stretched
%br
horizontally.
%li.stretch-container
#stretch-y
This
%br
element
%br
is
%br
stretched
%br
vertically.

19
doc-src/content/examples/compass/layout/stretching/stylesheet.sass
View File

@ -1,29 +1,32 @@
@import "compass/layout/stretching"
@import "compass/utilities"
@import "compass/css3"
#stretch-container
.stretch-container
border: 1px solid #999
min-width: 200px
min-height: 200px
width: 200px
height: 200px
position: relative
+inline-block
.stretched
$stretch-color: #4C6B99
border: 3px solid $stretch-color
+border-radius(8px)
display: block
background-color: darken($stretch-color, 30%)
color: white
text-align: center
vertical-align: middle
padding: 2em 0
#stretch-full:target
padding: 0.5em
#stretch-full
@extend .stretched
+stretch
#stretch-offset:target
#stretch-offset
@extend .stretched
+stretch(1em, 1em, 1em, 1em)
#stretch-x:target
#stretch-x
@extend .stretched
+stretch-x
#stretch-y:target
#stretch-y
@extend .stretched
+stretch-y

8
doc-src/content/examples/compass/utilities/contrast.haml Normal file
View File

@ -0,0 +1,8 @@
---
title: Compass Contrast Color Example
description: Make text readable
framework: compass
stylesheet: compass/utilities/color/_contrast.scss
example: true
---
= render "partials/example"

3
doc-src/content/examples/compass/utilities/contrast/markup.haml Normal file
View File

@ -0,0 +1,3 @@
.example
%p.dark This is a paragraph with a <em>dark</em> background and <em>light</em> text.
%p.light This is a paragraph with a <em>light</em> background and <em>dark</em> text.

11
doc-src/content/examples/compass/utilities/contrast/stylesheet.sass Normal file
View File

@ -0,0 +1,11 @@
$contrasted-dark-default: #333
$contrasted-light-default: #e7e7e7
@import "compass/utilities/color/contrast"
.example
p.dark
+contrasted(#5F1210)
p.light
+contrasted(#C82523)

6
doc-src/content/help/tutorials.haml
View File

@ -13,9 +13,9 @@ layout: tutorial
## New to Compass?
If you're new to Compass, you might be interested in [best practices](/help/tutorials/best-practices), the [configuration reference](/help/tutorials/configuration-reference), [configurable variables](/help/tutorials/configurable-variables),
or the [command line documentation](/help/tutorials/command-line).
If you're new to Compass, you might be interested in [best practices](/help/tutorials/best_practices/), the [configuration reference](/help/tutorials/configuration-reference/), [configurable variables](/help/tutorials/configurable-variables/),
or the [command line documentation](/help/tutorials/command-line/).
## Want to contribute?
If you've been using Compass for a while and you'd like to give back, check out the tutorials on [contributing](/help/tutorials/contributing) and [creating extensions](/help/tutorials/extensions).
If you've been using Compass for a while and you'd like to give back, check out the tutorials on [contributing](/help/tutorials/contributing/) and [creating extensions](/help/tutorials/extensions/).

49
doc-src/content/help/tutorials/configuration-reference.markdown
View File

@ -9,7 +9,7 @@ classnames:
The compass configuration file is a ruby file, which means that we can do some
clever things if we want to. But don’t let it frighten you; it’s really quite
easy to set up your project.
<a name="basic-format"></a>
## Basic format
Most configuration properties are a simple assignment to a configuration property.
@ -35,11 +35,12 @@ There are two kinds of composite values:
It is a comma delimited list of associations surrounded by curly brackets.
An association is two values separated by `=>`. E.g. `{:foo => "aaa", :bar => "zzz"}`
<a name="comments"></a>
## Comments
Use the hash sign `#` to comment out everything from the hash sign to the end
of the line.
<a name="import-note-windows-users"></a>
## Import Note for Windows Users
The backslash character (`\`) is a special character in a string delimited by
@ -47,6 +48,7 @@ double quotes (`"`). If you are working with folders in your paths, you should
either use **single quotes** to delimit your strings or escape your backslash
by doubling it like `"some\\path"`.
<a name="loading-compass-plugins"></a>
## Loading Compass Plugins
Compass relies on the ruby `require` mechanism to load other libraries of code.
@ -59,11 +61,13 @@ Example:
require 'ninesixty'
require 'susy'
<a name="overriding-configuration-settings"></a>
## Overriding Configuration Settings
When using the compass command line, configuration options that you set on the
command line will override the corresponding settings in your configuration file.
<a name="inspecting-configuration-settings-passed-via-the-command-line"></a>
## Inspecting Configuration Settings passed via the Command Line
When using the compass command line, configuration options that you set on the
@ -78,7 +82,7 @@ Then you can inspect the value like so:
Values that are not set on the CLI will be `nil` even though they will have a default value
later on.
<a name="configuration-properties"></a>
## Configuration Properties
<table>
@ -271,8 +275,14 @@ later on.
<td style="vertical-align:top;">String </td>
<td style="vertical-align:top;">The relative http path to font files on the web server.</td>
</tr>
<tr>
<td style="vertical-align:top;"><code>sprite_engine</code> </td>
<td style="vertical-align:top;">Symbol </td>
<td style="vertical-align:top;">Defaults to <code>:chunky_png</code></td>
</tr>
</table>
<a name="configuration-functions"></a>
## Configuration Functions
**`add_import_path`** – Call this function to add a path to the list of sass import
@ -331,3 +341,36 @@ more than once. Example:
This code will be called if the file is added, updated, or removed. Be sure to check for existence
to avoid crashing the watcher in the case where the file has been removed.
<a name="callbacks"></a>
## Callbacks
**`on_sprite_saved`** -- Pass this function a block of code that gets executed after a sprite is saved to disk. The block will be passed the filename. Can be invoked more then once. Example:
on_sprite_saved do |filename|
post_process(filename) if File.exists?(filename)
end
**`on_sprite_generated`** -- Pass this function a block of code that gets executed after a sprite is generated but before its saved to disk. The block will be passed an instance of `ChunkyPNG::Image`. Can be invoked more then once. Example:
on_sprite_generated do |sprite_data|
sprite_data.metadata['Caption'] = "This Image is &copy; My Company 2011"
end
**`on_stylesheet_saved`** -- Pass this function a block of code that gets executed after a stylesheet is processed. The block will be passed the filename. Can be invoked more then once. Example:
on_stylesheet_saved do |filename|
Growl.notify {
self.message "#{File.basename(filename)} updated!"
self.icon = '/path/to/success.jpg'
}
end
**`on_stylesheet_error`** -- Pass this function a block of code that gets executed if a stylesheet has an error while processing. The block will be passed the filename and the error message. Can be invoked more then once. Example:
on_stylesheet_error do |filename, message|
Growl.notify {
self.message = "#{File.basename(filename)}: #{message}"
self.icon = '/path/to/fail.jpg'
sticky!
}
end

73
doc-src/content/help/tutorials/extending.markdown Normal file
View File

@ -0,0 +1,73 @@
---
title: Extending Compass
layout: tutorial
crumb: Extending Compass
classnames:
- tutorial
---
# Extending Compass
## Sprite engine
The sprite engine is the work horse of sprite generation it's the interface for assembling and writing the image file to disk.
### Requirements
A sprite engine requires only one method and that is `construct_sprite` which must return an object that responds to `save(filepath)`
Once inside this method you have access to `images` which is a collection of [Compass::SassExtensions::Sprites::Image](http://rdoc.info/github/chriseppstein/compass/dda7c9/Compass/SassExtensions/Sprites/Image)
Since the Engine module extends base you also have access to all methods in [Compass::SassExtensions::Sprites::Base](http://rdoc.info/github/chriseppstein/compass/dda7c9/Compass/SassExtensions/Sprites/Base)
### Configuration
To enable your sprite engine from the config file set
sprite_engine = :<engine name>
The example below will load `Compass::SassExtension::Sprites::ChunkyPngEngine`
sprite_engine = :chunky_png
### Class Definition
module Compass
module SassExtensions
module Sprites
module <engine name>Engine
# Returns an object
def construct_sprite
#must return a image object that responds to save(filename)
end
end
end
end
end
<a name="adding-configuration-properties"></a>
## Adding Configuration Properties to Compass
To add a new configuration property to Compass:
Compass::Configuration.add_configuration_property(:foobar, "this is a foobar") do
if environment == :production
"foo"
else
"bar"
end
end
This will do several things:
1. make it possible for users to set the `foobar` configuration property in their
configuration file.
2. Ruby code can read and write the `foobar` attribute from any configuration object.
3. It will add the comment `# this is a foobar` above the property in the configuration file.
A comment is not required, you can simply omit this argument if you like.
4. The block of code provided allows you to assign a sensible default value according to other
settings in the configuration or by using arbitrary code to determine what the value should
be. For instance it could read from another configuration file or it could change based on
the user's operating system.

8
doc-src/content/help/tutorials/extensions.markdown
View File

@ -71,6 +71,10 @@ you can use compass to generate an extension with the following command:
This will create a few basic files and folders to get you started.
If you prefer to use the scss syntax for your extension run the following command instead:
compass create my_extension --using compass/extension -x scss
Advanced Layout Options
-----------------------
@ -106,6 +110,10 @@ template directories are not at the top level, you can just do this instead:
base_directory = File.join(File.dirname(__FILE__), '..', 'compass')
Compass::Frameworks.register('my_extension', :path => base_directory)
### Adding Configuration Options to Compass
For details on how to add new configuration options to compass [read this](/help/tutorials/extending/#adding-configuration-properties).
Conventions to Follow
---------------------

83
doc-src/content/help/tutorials/integration.markdown Normal file
View File

@ -0,0 +1,83 @@
---
title: Application Integration
layout: tutorial
crumb: Appliction Integration
classnames:
- tutorial
---
# Application Integration
## Ruby on Rails
### Rails 3
compass init rails /path/to/myrailsproject
### Rails 2.3
rake rails:template LOCATION=http://compass-style.org/rails/installer
## Sinatra
require 'sinatra'
require 'haml'
require 'sass'
require 'compass'
configure do
Compass.configuration do |config|
config.project_path = File.dirname(__FILE__)
config.sass_dir = 'views'
end
set :haml, { :format => :html5 }
set :sass, Compass.sass_engine_options
end
get '/screen.css' do
content_type 'text/css', :charset => 'utf-8'
sass :screen
end
If you keep your stylesheets in “views/stylesheets/” directory instead of just “views/”, remember to update sass_dir configuration accordingly.
Check out this [sample compass-sinatra project](http://github.com/chriseppstein/compass-sinatra) to get up and running in no time!
[Sinatra Bootstrap](http://github.com/adamstac/sinatra-bootstrap) - a base Sinatra project with support for Haml, Sass, Compass, jQuery and more.
## Nanoc3
### Minimal integration: just drop it in
One simple route for lightweight integration is to simply install compass inside nanoc. Then edit config.rb to point to the stylesheets you want to use. This means you have to have the Compass watch command running in a separate window from the Nanoc compilation process.
Example project that works this way: http://github.com/unthinkingly/unthinkingly-blog
### More formal integration
At the top of the Nanoc Rules file, load the Compass configuration, like this:
require 'compass'
Compass.add_project_configuration 'compass/config.rb' # when using Compass 0.10
Compass.configuration.parse 'compass/config.rb' # when using Compass < 0.10
Your Compass configuration file (in compass/config.rb) could look like this (you may need to change the path to some directories depending on your directory structure):
http_path = "/"
project_path = "."
css_dir = "output/assets/style"
sass_dir = "content/assets/style"
images_dir = "output/assets/images"
# when using SCSS:
sass_options = {
:syntax => :scss
}
To filter the stylesheets using Sass and Compass, call the sass filter with Sass engine options taken from Compass, like this:
filter :sass, Compass.sass_engine_options
### Nanoc Projects using the formal approach
* [nanoc Bootstrap](http://github.com/adamstac/nanoc-bootstrap) - a base nanoc project with support for Haml, Sass, Compass, jQuery and more.
* [nanoc & Compass Example Project](http://github.com/ddfreyne/nanoc-bootstrap-compass)

61
doc-src/content/help/tutorials/spriting.markdown
View File

@ -7,7 +7,7 @@ classnames:
---
# Spriting with Compass
Spriting has never been easier with Compass. You place the sprite images to be in a folder,
Spriting has never been easier with Compass. You place the sprite images in a folder,
import them into your stylesheet, and then you can use the sprite in your selectors in one
of several convenient ways.
@ -52,6 +52,7 @@ simple naming convention for your sprites so that you they are easy to remember
should never have to care what the is name of the generated sprite map, nor where a sprite
is located within it.
<a name="selector-control"></a>
## Selector Control
If you want control over what selectors are generated, it is easy to do. In this example,
@ -100,6 +101,64 @@ might want to avoid it. For instance, if your sprite map has more than about 20
sprites, you may find that hand crafting the import will speed up compilation times. See
the section on [performance considerations](#performance) for more details.
<a name="magic-selectors"></a>
## Magic Selectors
If you want to add selectors for your sprites, it's easy todo by adding `_active` `_target` or `_hover` to the file name, In the example below we have a sprite directory that looks like:
* `selectors/ten-by-ten.png`
* `selectors/ten-by-ten_hover.png`
* `selectors/ten-by-ten_active.png`
* `selectors/ten-by-ten_target.png`
Now in our sass file we add:
@import "selectors/*.png";
a {
@include selectors-sprite(ten-by-ten)
}
And your stylesheet will compile to:
.selectors-sprite, a {
background: url('/selectors-edfef809e2.png') no-repeat;
}
a {
background-position: 0 0;
}
a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover {
background-position: 0 -20px;
}
a:target, a.ten-by-ten_target, a.ten-by-ten-target {
background-position: 0 -30px;
}
a:active, a.ten-by-ten_active, a.ten-by-ten-active {
background-position: 0 -10px;
}
Alternatively you can use the `@include all-selectors-sprites;` after the import and get the following output:
.selectors-sprite, .selectors-ten-by-ten {
background: url('/selectors-edfef809e2.png') no-repeat;
}
.selectors-ten-by-ten {
background-position: 0 0;
}
.selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover {
background-position: 0 -20px;
}
.selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target {
background-position: 0 -30px;
}
.selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active {
background-position: 0 -10px;
}
<a name="customization-options"></a>
## Customization Options

16
doc-src/content/help/tutorials/upgrading/antares.markdown
View File

@ -76,6 +76,22 @@ Or for sass files:
=linear-gradient($color-stops, $start: top, $image: false)
+background-image($image, linear-gradient($start, $color-stops))
<a name="typography"></a>
## Typography Module
With the addition of vertical-rhythms to the compass core, we have created a new
[typography module][typography_module], and moved several items that were formerly
listed as "utilities" into it. The moved modules are "links", "lists" and "text".
These will all remain part of the basic compass include, but if you were including
them individually in your stylesheets, you will need to adjust the include paths
as follows:
* "compass/utilities/links" becomes "compass/typography/links"
* "compass/utilities/lists" becomes "compass/typography/lists"
* "compass/utilities/text" becomes "compass/typography/text"
[new_transform]: /reference/compass/css3/transform/
[old_transform]: /reference/compass/css3/transform-legacy/
[image_stylesheet]: /reference/compass/css3/images/
[typography_module]: /reference/compass/typography/

50
doc-src/content/help/tutorials/upgrading/lemonade_upgrade_guide.markdown Normal file
View File

@ -0,0 +1,50 @@
---
title: Lemonade Upgrade Guide
layout: tutorial
crumb: Lemonade Upgrade
classnames:
- tutorial
---
# Lemonade Upgrade Guide
## Example 1
### Lemonade
.logo {
background: sprite-image("lemonade/lemonade-logo.png");
}
.lime {
background: sprite-image("lemonade/lime.png");
}
.coffee {
background: sprite-image("other-drinks/coffee.png") no-repeat;
}
### Compass
@import "lemonade/*.png";
@import "other-drinks/*.png"
@include all-lemonade-sprites;
@include all-other-drinks-sprites;
Compass will return class names `.lemonade-logo`, `.lemonade-lime`, `.other-drinks-coffee`
# Example 2
### Lemonade
.lemonade-example-1 {
background: sprite-image("lemonade/example-1/blue-10x10.png", 10px, 2px);
}
### Compass
With compass you need to flatten the image directory to be `images/lemonade` instead of `images/lemonade/example-1`
@import "lemonade/*.png"
.lemonade-example-1 {
@include lemonade-sprite(blue-10x10, true, 10px, 2px);
background-color: yellow;
}

2
doc-src/content/index.haml
View File

@ -62,7 +62,7 @@ layout: homepage
%li
%a(href="http://green.cals.cornell.edu/")
%img(src="/images/sites/cornell.jpg")
%span.title Corenell University - CALS
%span.title Cornell University - CALS
%span.url http://green.cals.cornell.edu
%li
%a(href="http://busyconf.com/")

81
doc-src/content/install.haml Normal file
View File

@ -0,0 +1,81 @@
---
title: Install the Compass Stylesheet Authoring Framework
crumb: Install
body_id: install
---
- content_for :javascripts do
%script(src="/javascripts/install.js")
%h2 Installing Ruby
%p
Compass runs on any computer that has
<a href="http://www.ruby-lang.org/en/downloads/">ruby installed</a>.
%p
For more advanced users you may want to install
<a href="http://rvm.beginrescueend.com/rvm/install/">rvm</a>.
%h2 Setting up the ruby environment
%ol
%li <code>$ gem update --system</code>
%li <code>$ gem install compass</code>
%h2 Tell us about your project and we'll help you get it set up:
%blockquote.madlib.customizable<
I would like to set up my
%select#existence
%option{:value => "create"} new
%option{:value => "init"} existing
%select#app-type
%option{:value => "stand-alone"} compass
%option{:value => "rails"} rails
%option{:value => "other"} other
project
with
%select#framework
%option{:value => "compass"} compass's
%option{:value => "blueprint"} blueprint's
%option{:value => "bare"} no
starter stylesheets.
%br
I prefer the
%select#syntax
%option{:value => "scss"} CSS based (SCSS)
%option{:value => "sass"} Indent based (Sass)
syntax<span class="customization">
and would like to
%select#options
%option{:value => "default"} use compass's recommended
%option{:value => "customized"} customize my project's
directory structure<span id="directories" style="display:none;">
using
%input#sassdir(value="sass")
for the sass source directory,
%input#cssdir(value="css")
for the css output directory,
%input#jsdir(value="javascripts")
for the javascripts directory,
and
%input#imagesdir(value="images")
for the images directory</span></span>.
%h4 Thanks. Now run the following steps in your terminal:
%p.note
Terminal newbies, read <a href="http://wiseheartdesign.com/articles/2010/11/12/the-designers-guide-to-the-osx-command-prompt/">the Designer’s Guide to the OSX Command Prompt</a> first!
#steps
Loading...
%p.note Note: <code>$</code> is a placeholder for your terminal's prompt. You don't type it.
%h4 Then follow the instructions that compass provides in the output.
%h4 Or you can buy a <a href="http://compass.handlino.com/">GUI for Compass</a> from Handlino.
%h2 Next Steps
%ul
%li
%a(href="http://sass-lang.com" target="_blank") Learn about Sass
%li
%a(href="/help/tutorials/") Read our tutorials
%li
%a(href="/reference/compass/") Study the reference documentation

141
doc-src/content/posts/2011-04-24-v011-release.markdown Normal file
View File

@ -0,0 +1,141 @@
---
title: "Compass v0.11 is Released!"
description: "Months in the making, Compass v0.11 continues to revolutionize CSS Frameworks."
author: chris
---
The Compass team is proud to announce that v0.11 is released. With this release, Compass & Sass continue to revolutionize the world of CSS Frameworks bringing never-before-seen features and unmatched simplicity, quality, and flexibility to your stylesheets.
In this post, we summarize the new features. For all the nitty gritty details, see the [CHANGELOG](/CHANGELOG/).
Compass is Charityware. If you love this release, [please donate to the UMDF](http://umdf.org/compass) on our behalf and help find a cure for thousands of children suffering from mitochondrial disease.
## Sass 3.1
This release required you to upgrade to Sass 3.1. This release brings a ton of great new features that Compass now uses and you can too!
* Proper List Support: Space and Comma separated lists used to cause values to become strings
when passing them to mixins. Now the values in lists are preserved as their original types.
* Sass-based Functions. Define your own value functions and use them anywhere.
* Keyword Style Argument passing to Functions and Mixins. It can be hard to understand what
the values being passed to a mixin or function are for, use keyword style arguments to
make it easier to understand remember and read mixin includes.
* `@media` bubbling. Responsive design meets nested selectors! Use a media declaration anywhere and it
will be bubbled to the top level for you.
For more information about the new Sass features, see the [Sass CHANGELOG](http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html).
## Embracing CSS3
The power and flexibility of CSS3 is well known and web developers and designers are finding many new and interesting ways to take advantage of it. In Compass v0.11 we have revisited each CSS3 feature to ensure the greatest ease of use and similarity to CSS3 syntax. The compass internals for managing cross-browser compatibility have been rewritten to provide a powerful platform for moving as fast as the browser implementors are. Going forward, <span style="text-decoration: underline;">expect small point releases to adapt to new browser support and changes much more rapidly</span>. By default, Compass provides out-of-the-box support for **all** modern and legacy browsers as far back as IE6 and Firefox 2. But if you want slimmer stylesheets, it is [simple to configure](/reference/compass/support/) which browser support we provide.
In this release, we embraced the CSS3 syntax as much as possible. It might seem obvious, but the Compass convention is now that all CSS3 mixin arguments should match the CSS3 syntax for their corresponding properties so that you never have to *learn* a compass CSS3 mixin. If you ever find a case where this is not true, it is a bug and we would appreciate it if you would [provide the details in a bug report](http://github.com/chriseppstein/compass/issues). After upgrading, you will encounter a number of deprecation warnings guiding you through the syntax changes.
### Gradients Evolved
The best example of the changes in the CSS3 module are related to gradients. In Compass v0.10 we provided two simple mixins: `linear-gradient` and `radial-gradient` for setting the `background-image` property:
.linear {
@include linear-gradient(#FFF, #000, color-stops(#C00 25%, #0C0 75%))
}
This syntax was inspired by the original webkit gradient syntax but tried to simplify it to some extent. But the gradient specification has evolved and because gradients can be used anywhere an image can, so we now provide a mixin for each property that can accept gradients and the arguments
can be any legal CSS3 value for the that property:
.linear {
@include background-image(linear-gradient(#FFF, #C00 25%, #0C0 75%, #000))
}
Which produces:
.linear {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(25%, #cc0000), color-stop(75%, #00cc00), color-stop(100%, #000000));
background-image: -webkit-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
background-image: -moz-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
background-image: -o-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
background-image: linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
}
## Dead Simple Sprites
Spriting has never been easier with Compass. Nico Hagenburger joined the Compass team and we have built on his popular Lemonade plugin to make Compass sprites. Existing Lemonade users will need to upgrade.
The way they work is you place the sprite images in a folder,
import them into your stylesheet, and then you can use the sprite in your selectors in one
of several convenient ways.
For example, let's imagine that in your project's image folder there are four icons:
* `<images_dir>/icon/new.png`
* `<images_dir>/icon/edit.png`
* `<images_dir>/icon/save.png`
* `<images_dir>/icon/delete.png`
The simplest way to use these icon sprites is to let compass give you a class for each sprite:
@import "icon/*.png";
@include all-icon-sprites;
And you'll get the following CSS output:
.icon-sprite,
.icon-delete,
.icon-edit,
.icon-new,
.icon-save { background: url('/images/icon-34fe0604ab.png') no-repeat; }
.icon-delete { background-position: 0 0; }
.icon-edit { background-position: 0 -32px; }
.icon-new { background-position: 0 -64px; }
.icon-save { background-position: 0 -96px; }
You can now apply the `icon-XXX` classes to your markup as needed.
Of course, this is Compass which means that underneath this simple veneer is a powerful system that you can use to customize your selectors and all kinds of other scenarios involving unicorns and rainbows. Get all the details in our [Spriting Tutorial](/help/tutorials/spriting/).
## New Typography Module
New in this release is a typography module. Many of our utility mixins related to typography have been moved here, but the really exciting development is the addition of the [vertical rhythm module](/reference/compass/typography/vertical_rhythm/). Based on [this excellent tutorial](http://24ways.org/2006/compose-to-a-vertical-rhythm) from 24ways, it is now simpler than ever to compose to a vertical rhythm.
## Blueprint 1.0
Blueprint is 1.0 now and the Compass port is updated to match the changes there. Some of the changes that blueprint made might affect your design, so if you don't want to take this upgrade, you should unpack blueprint before you upgrade:
compass unpack blueprint
## New Website
As you can see, we have a spiffy new website design from Compass Core team member [Brandon](http://brandonmathis.com/). A testament to the separation of content and presentation, most of this redesign was done by throwing out our old stylesheets and building new ones. If you don't like the light text on dark background theme, you can turn on the lights by clicking the power button in the upper right hand corner of every page.
## Much, Much More
There's more features in this release than would fit into this post. Here's some other things you'll find in this release:
* Custom directory and file watching (E.g. for pngcrush support)
* Compilation Callback support
* Trigonometric functions
Read the [CHANGELOG](/CHANGELOG/) for all the details.
Additionally, expect a point release to follow shortly with support for:
* Rails 3.1
Lastly, Compass v0.11 will have point releases as needed to adapt to changes in browser support for the CSS3 module.
## Many Thanks
Compass wouldn't be possible without Nathan Weizenbaum and his hard work on Sass. The latest Sass release
provides a ton of great features that have made this Compass release possible.
Compass is far to big for one person to manage it now. I'd like to thank the hard work of the Compass core team members:
* [Eric Meyer](http://eric.oddbird.net/)
* [Brandon Mathis](http://brandonmathis.com/)
* [Scott Davis](https://github.com/jetviper21)
* [Nico Hagenburger](http://www.hagenburger.net/)
Additionally, there were commits from 10 other great folks in this release and there's been [contributions from 68 people](https://github.com/chriseppstein/compass/contributors) in total so far.
Lastly thanks to the hundreds, if not thousands, of users who have helped test this release and provided valuable feedback, bug reports, and documentation suggestions. Together, we are making a real stylesheet framework and simplifying the lives of web developers across the world.

93
doc-src/content/posts/2011-04-26-compass-release-strategy.markdown Normal file
View File

@ -0,0 +1,93 @@
---
title: "Compass Release Strategy"
description: "An overview of how Compass will be managing ongoing releases."
author: chris
---
Most of this is probably obvious, but it doesn't hurt to be explicit about such things.
If you're interested in contributing to Compass, please read the
[Contribution Guide](http://compass-style.org/help/tutorials/contributing/).
Versioning
----------
Most stable releases will be released as release candidates first
(e.g `0.11.1.rc.0`) and then made into official releases after a day
or so if they don't cause any problems.
Sass Dependency
---------------
We will decouple major Compass releases from the Sass release schedule
going forward. When Sass releases happen, we will issue patches to both
stable and master branches to adjust to any deprecations and new
features after they are fully released (which means we might have the
changes waiting in a topic branch). Because Sass is very careful to not
break existing stylesheets without deprecating first, this shouldn't be
hard to pull off.
Stylesheet Progress
-------------------
I do not want to see the compass stylesheets get frozen again
like they did in v0.10 while waiting for the next major release.
Compass users expect us to keep up with browser developments and we will.
If this means that we need to make v0.12 become v0.13 because
the stylesheets need to make some major change, then we will do that.
Communicating Change
--------------------
All new features should have tests, docs, and CHANGELOG entries
as appropriate as part of the commit.
Additionally, we now have a compass team blog that we can use to communicate
about new features, best practices, or other Compass related stuff.
It's easy to add a post, you just drop a markdown file into
[this directory](https://github.com/chriseppstein/compass/tree/stable/doc-src/content/posts).
Guest posts are totally welcome via pull requests.
Stable
------
The stable release is were code lives for the next v0.11 point release.
Commits should only go here if they are ready for release, until that
point the code should live in your compass fork or in a topic branch.
Core team members, please use pull requests to manage the code review
process for any change of significance and get sign-off from one other
team member before committing to stable.
Changes that can go on stable:
* Browser support updates
* Non-breaking stylesheet changes and minor features
like new mixins or modules.
* Bug fixes
Changes that can't go on stable:
* New deprecations
* Major features
* Big refactors
If you're not sure where to put something, just ask.
Rails 3.1 support is the exception to this rule, given the timeline
assocated with that release, I will make a topic branch and we'll
merge that to stable when it's ready.
Core team members will, after committing/merging code to stable, then merge those changes to master so it is up to date.
Master
------
Master is where code goes to be ready for v0.12. This focus of this
next release is making extensions easy to make, share, discover, install,
remove, and use. Any and all ideas that you have related to this are
welcome. At a minimum, I would like to have an extension directory
app hosted on compass-style.org and make sure that compass knows about
it and can install extensions by name from there.

16
doc-src/content/reference/compass/css3/appearance.haml Normal file
View File

@ -0,0 +1,16 @@
---
title: Compass Appearance
crumb: Appearance
framework: compass
stylesheet: compass/css3/_appearance.scss
meta_description: Specify the CSS3 appearance property.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
:markdown
Provides a mixin for `appearance`.
See the CSS3 specification: [appearance](http://www.w3.org/TR/css3-ui/#appearance).

1
doc-src/content/reference/compass/helpers.haml
View File

@ -24,6 +24,7 @@ layout: core
* [append-selector()](/reference/compass/helpers/selectors/#append-selector)
* [color-stops()](/reference/compass/helpers/color-stops/)
* [cos()](/reference/compass/helpers/trig/#cos)
* [css2-fallback()](/reference/compass/helpers/cross-browser/#css2-fallback)
* [elements-of-type()](/reference/compass/helpers/display/)
* [enumerate()](/reference/compass/helpers/selectors/#enumerate)
* [font-files()](/reference/compass/helpers/font-files/)

11
doc-src/content/reference/compass/helpers/cross-browser.haml
View File

@ -112,3 +112,14 @@ documented_functions:
It is a kind of hack to sanitize the output of experimental code
into a form that can be parsed by a css2.1 compliant parser.
Usually this results in causing some functions to be omitted.
#css2-fallback.helper
%h3
%a(href="#css2-fallback")
css2-fallback(<span class="arg">$value</span>, <span class="arg">$css2-value</span>)
.details
%p
This function returns a value that is normally <code>$value<code>,
but is <code>$css2-value</code> when passed through the <code>-css2()</code>
helper function. Many of the compass css3 mixins will create a css2 fallback
value if the arguments have a css2 representation (gradients have a null css2
representation).

3
doc-src/content/reference/compass/layout.haml
View File

@ -4,7 +4,7 @@ crumb: Layout
framework: compass
sidebar: true
stylesheet: compass/_layout.scss
meta_description: Page layout module. So far, this is just the sticky-footer mixin.
meta_description: Page layout module.
layout: core
classnames:
- reference
@ -14,4 +14,3 @@ classnames:
- render 'reference' do
%p
This module provides tools to help you with page layout.
So far, it's just the <code><a href="/reference/compass/layout/sticky_footer/#mixin-sticky-footer">sticky-footer</a></code> mixin.

16
doc-src/content/reference/compass/layout/grid_background.haml Normal file
View File

@ -0,0 +1,16 @@
---
title: Compass Grid Backgrounds
crumb: Grid Background
framework: compass
stylesheet: compass/layout/_grid-background.scss
layout: core
classnames:
- reference
- core
- layout
---
- render 'reference' do
%p
The grid-background mixins allow you to generate fixed, fluid and elastic
grid-images on-the-fly using css3 gradients. These can be used for testing
both horizontal and vertical grids.

27
doc-src/content/reference/compass/reset-legacy.haml Normal file
View File

@ -0,0 +1,27 @@
---
title: Compass Reset (legacy)
crumb: Reset (legacy)
framework: compass
stylesheet: compass/_reset-legacy.scss
layout: core
sidebar: true
deprecated: true
classnames:
- reference
- core
- reset
meta_description: Adds a CSS Reset into your stylesheet.
---
- render 'reference' do
%p.warning
This import is deprecated. Please import
<a href="/reference/compass/reset/" class="better">reset</a> instead.
:markdown
This module applies the [global reset](/reference/compass/reset/utilities-legacy/#mixin-global-reset)
to your stylesheet by simply importing it.
**Note:** This module will place styles into your stylesheet by importing it. This
is not the standard behavior of a compass module but it optimizes the common use case.
If you want to control the reset, please use the mixins defined in the [reset
utilities module](/reference/compass/reset/utilities-legacy/)

22
doc-src/content/reference/compass/reset-legacy/utilities-legacy.haml Normal file
View File

@ -0,0 +1,22 @@
---
title: Compass Reset Utilities (legacy)
crumb: Reset Utilities (legacy)
framework: compass
stylesheet: compass/reset/_utilities-legacy.scss
layout: core
deprecated: true
meta_description: Mixins for resetting elements.
classnames:
- reference
- core
- utilities
---
- render 'reference' do
%p.warning
This import is deprecated. Please import
<a href="/reference/compass/reset/utilities/" class="better">reset utilities</a> instead.
:markdown
These utilities are used to reset your document. The easiest way to use them
is to simply `@import "compass/reset"` which will import this module and apply
the appropriate mixins for you.

18
doc-src/content/reference/compass/typography.haml Normal file
View File

@ -0,0 +1,18 @@
---
title: Compass Typography
crumb: Typography
framework: compass
sidebar: true
stylesheet: compass/_typography.scss
classnames:
- reference
- core
- typography
meta_description: Provides basic mixins for common typography patterns.
layout: core
nav_stylesheet: compass/_typography.scss
---
- render 'reference' do
%p
The Compass Typography module provides some basic mixins
for common text styling patterns.

4
doc-src/content/reference/compass/utilities/links.haml → doc-src/content/reference/compass/typography/links.haml
View File

@ -2,14 +2,14 @@
title: Compass Links
crumb: Links
framework: compass
stylesheet: compass/utilities/_links.scss
stylesheet: compass/typography/_links.scss
sidebar: true
layout: core
meta_description: Tools for styling anchor links.
classnames:
- reference
- core
- utilities
- typography
---
- render 'reference' do
%p

4
doc-src/content/reference/compass/utilities/links/hover_link.haml → doc-src/content/reference/compass/typography/links/hover_link.haml
View File

@ -2,12 +2,12 @@
title: Compass Hover Link
crumb: Hover Link
framework: compass
stylesheet: compass/utilities/links/_hover-link.scss
stylesheet: compass/typography/links/_hover-link.scss
layout: core
meta_description: Underline a link when you hover over it.
classnames:
- reference
- core
- utilities
- typography
---
= render 'reference'

4
doc-src/content/reference/compass/utilities/links/link_colors.haml → doc-src/content/reference/compass/typography/links/link_colors.haml
View File

@ -2,12 +2,12 @@
title: Compass Link Colors
crumb: Link Colors
framework: compass
stylesheet: compass/utilities/links/_link-colors.scss
stylesheet: compass/typography/links/_link-colors.scss
layout: core
meta_description: Easy assignment of colors to link states.
classnames:
- reference
- core
- utilities
- typography
---
= render 'reference'

4
doc-src/content/reference/compass/utilities/links/unstyled_link.haml → doc-src/content/reference/compass/typography/links/unstyled_link.haml
View File

@ -2,13 +2,13 @@
title: Compass Unstyled Link
crumb: Unstyled Link
framework: compass
stylesheet: compass/utilities/links/_unstyled-link.scss
stylesheet: compass/typography/links/_unstyled-link.scss
layout: core
meta_description: Make a link appear like regular text.
classnames:
- reference
- core
- utilities
- typography
---
- render 'reference' do
%p

4
doc-src/content/reference/compass/utilities/lists.haml → doc-src/content/reference/compass/typography/lists.haml
View File

@ -2,13 +2,13 @@
title: Compass Lists
crumb: Lists
framework: compass
stylesheet: compass/utilities/_lists.scss
stylesheet: compass/typography/_lists.scss
sidebar: true
layout: core
meta_description: Tools for styling lists.
classnames:
- reference
- core
- utilities
- typography
---
= render 'reference'

4
doc-src/content/reference/compass/utilities/lists/bullets.haml → doc-src/content/reference/compass/typography/lists/bullets.haml
View File

@ -2,12 +2,12 @@
title: Compass Bullets
crumb: Bullets
framework: compass
stylesheet: compass/utilities/lists/_bullets.scss
stylesheet: compass/typography/lists/_bullets.scss
layout: core
meta_description: Mixins for managing list bullets.
classnames:
- reference
- core
- utilities
- typography
---
= render 'reference'

4
doc-src/content/reference/compass/utilities/lists/horizontal_list.haml → doc-src/content/reference/compass/typography/lists/horizontal_list.haml
View File

@ -2,13 +2,13 @@
title: Compass Horizontal List
crumb: Horizontal List
framework: compass
stylesheet: compass/utilities/lists/_horizontal-list.scss
stylesheet: compass/typography/lists/_horizontal-list.scss
layout: core
meta_description: Float a list so it appears horizontally.
classnames:
- reference
- core
- utilities
- typography
---
- render 'reference' do
:markdown

4
doc-src/content/reference/compass/utilities/lists/inline-block-list.haml → doc-src/content/reference/compass/typography/lists/inline-block-list.haml
View File

@ -2,13 +2,13 @@
title: Compass Inline-Block List
crumb: Inline-Block List
framework: compass
stylesheet: compass/utilities/lists/_inline-block-list.scss
stylesheet: compass/typography/lists/_inline-block-list.scss
layout: core
meta_description: set list-elements to inline-block so they appear horizontally while retaining their structure.
classnames:
- reference
- core
- utilities
- typography
---
- render 'reference' do
:markdown

4
doc-src/content/reference/compass/utilities/lists/inline_list.haml → doc-src/content/reference/compass/typography/lists/inline_list.haml
View File

@ -2,12 +2,12 @@
title: Compass Inline List
crumb: Inline List
framework: compass
stylesheet: compass/utilities/lists/_inline-list.scss
stylesheet: compass/typography/lists/_inline-list.scss
layout: core
meta_description: Style a list as inline text.
classnames:
- reference
- core
- utilities
- typography
---
= render 'reference'

4
doc-src/content/reference/compass/utilities/text.haml → doc-src/content/reference/compass/typography/text.haml
View File

@ -2,14 +2,14 @@
title: Compass Text
crumb: Text
framework: compass
stylesheet: compass/utilities/_text.scss
stylesheet: compass/typography/_text.scss
layout: core
sidebar: true
meta_description: Style helpers for your text.
classnames:
- reference
- core
- utilities
- typography
---
- render 'reference' do
%p

4
doc-src/content/reference/compass/utilities/text/ellipsis.haml → doc-src/content/reference/compass/typography/text/ellipsis.haml
View File

@ -2,13 +2,13 @@
title: Truncating Text with Ellipses
crumb: Ellipsis
framework: compass
stylesheet: compass/utilities/text/_ellipsis.scss
stylesheet: compass/typography/text/_ellipsis.scss
layout: core
meta_description: Text truncation with ellipsis.
classnames:
- reference
- core
- utilities
- typography
---
- render 'reference' do
:markdown

4
doc-src/content/reference/compass/utilities/text/nowrap.haml → doc-src/content/reference/compass/typography/text/nowrap.haml
View File

@ -2,13 +2,13 @@
title: Compass No Wrap
crumb: No Wrap
framework: compass
stylesheet: compass/utilities/text/_nowrap.scss
stylesheet: compass/typography/text/_nowrap.scss
layout: core
meta_description: Remembering whether or not there's a hyphen in white-space is too hard.
classnames:
- reference
- core
- utilities
- typography
---
- render 'reference' do
%p

4
doc-src/content/reference/compass/utilities/text/replacement.haml → doc-src/content/reference/compass/typography/text/replacement.haml
View File

@ -2,12 +2,12 @@
title: Compass Text Replacement
crumb: Text Replacement
framework: compass
stylesheet: compass/utilities/text/_replacement.scss
stylesheet: compass/typography/text/_replacement.scss
layout: core
meta_description: Replace text with images.
classnames:
- reference
- core
- utilities
- typography
---
= render 'reference'

20
doc-src/content/reference/compass/typography/vertical_rhythm.haml Normal file
View File

@ -0,0 +1,20 @@
---
title: Vertical Rhythm
crumb: Vertical Rhythm
framework: compass
stylesheet: compass/typography/_vertical_rhythm.scss
layout: core
meta_description: Create and maintain a vertical rhythm for your type.
classnames:
- reference
- core
- typography
---
- render 'reference' do
:markdown
Create a vertical rhythm for your site by setting the `$base-font-size` and
`$base-line-height` variables and then including the `establish-baseline`
mixin at the root of your document.
Manage the vertical rhythm using the other vertical-rhythm mixins to adjust
font and line-height values, extra vertical whitespace, borders, etc.

16
doc-src/content/reference/compass/utilities/color.haml Normal file
View File

@ -0,0 +1,16 @@
---
title: Compass Color
crumb: Color
framework: compass
stylesheet: compass/utilities/_color.scss
layout: core
sidebar: true
meta_description: Utilities for working with colors.
classnames:
- reference
- core
- utilities
---
- render 'reference' do
%p
Utilities for working with colors.

13
doc-src/content/reference/compass/utilities/color/contrast.haml Normal file
View File

@ -0,0 +1,13 @@
---
title: Compass Color Contrast
crumb: Color Contrast
framework: compass
stylesheet: compass/utilities/color/_contrast.scss
layout: core
meta_description: Contrast foreground with background colors.
classnames:
- reference
- core
- utilities
---
= render 'reference'

10
doc-src/content/reference/compass/utilities/sprites.haml
View File

@ -11,5 +11,13 @@ classnames:
- core
- utilities
---
= render 'reference'
- render 'reference' do
%h3 Additional Resources
%ul
%li
%a(href="/help/tutorials/spriting/") Spriting Tutorial
%li
%a(href="/reference/compass/helpers/sprites/") Sprite Helpers
%li
%a(href="/reference/compass/utilities/sprites/base/") Base Stylesheet

6
doc-src/content/reference/compass/utilities/sprites/sprite_img.haml
View File

@ -16,14 +16,14 @@ classnames:
a.twitter
+sprite-img("icons-32.png", 1)
a.facebook
+sprite-img("icons-32png", 2)
+sprite-img("icons-32.png", 2)
**Example 2** Sharing a common base:
a
+sprite-background("icons-32.png")
a.twitter
&.twitter
+sprite-column(1)
a.facebook
&.facebook
+sprite-row(2)

6
doc-src/content/stylesheets/partials/_blog.scss Normal file
View File

@ -0,0 +1,6 @@
body#blog-archive {
.timestamp {
margin-right: 1em;
font-size: 12px;
}
}

10
doc-src/content/stylesheets/partials/_install.scss Normal file
View File

@ -0,0 +1,10 @@
body#install {
#steps, p.madlib, p.note, h4 { margin-top: 1em; }
p.note { font-size: smaller; font-style: italic; }
p.warning { color: #c00; }
.customization { display: none; }
.customizable .customization { display: inline; }
blockquote { border-left: 2px solid #ccc;
text-indent: 0; padding-left: 0.5em; }
.customization input { width: 8em; }
}

2
doc-src/content/stylesheets/partials/_layout.scss
View File

@ -1,4 +1,4 @@
$min-width: 680px;
$min-width: 700px;
$side-nav-width: 160px;
$main-min-width: $min-width - $side-nav-width;

2
doc-src/content/stylesheets/screen.scss
View File

@ -16,6 +16,8 @@
@import "partials/main";
@import "partials/code";
@import "partials/example";
@import "partials/install";
@import "partials/blog";
@import "syntax/syntax-theme";

1
doc-src/layouts/basic.haml
View File

@ -6,6 +6,7 @@
%meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
%meta(name="viewport" content="width=780")
%link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")
%link{:href=>"/blog/atom.xml", :rel=>"alternate", :title=>"Compass Blog", :type=>"application/atom+xml"}
%title
#{@item[:title]} | Compass Documentation
%link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"}

24
doc-src/layouts/blog.haml Normal file
View File

@ -0,0 +1,24 @@
- render "basic" do
#wrap
= render "partials/main-navigation"
#sub-nav
- p = previous_post
- n = next_post
- if p || n
%nav#docs-nav{:role => "navigation"}
- if p
%a{:href => p.rep_named(:default).path, :title => p[:title]} &laquo; Previous Post
- if n
%a{:href => n.rep_named(:default).path, :title => n[:title]} Next Post &raquo;
#page
#docs_panel
#theme_pref
%a{:href => "#", :rel => "theme", :title => "switch theme" } Q
#version
Version:
%a.number(href="/CHANGELOG/")= compass_version
= yield
#comments= render "partials/disqus_comments"
%footer(role="contentinfo")= render "partials/footer"
= @item[:content_for_javascripts]
= render "partials/analytics"

2
doc-src/layouts/main.haml
View File

@ -18,7 +18,7 @@
Version:
%a.number(href="/CHANGELOG/")= compass_version
= yield
-#comments= render "partials/disqus_comments"
#comments= render "partials/disqus_comments"
%footer(role="contentinfo")= render "partials/footer"
= @item[:content_for_javascripts]
= render "partials/analytics"

3
doc-src/layouts/partials/analytics.haml
View File

@ -16,6 +16,3 @@
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>

8
doc-src/layouts/partials/main-navigation.haml
View File

@ -9,6 +9,10 @@
%li
%a{:href => "/reference/compass/", :rel => "documentation"} Reference
%li
%a{:href => "/help", :rel=> "help"} Help
%a{:href => "/help/", :rel=> "help"} Help
%li
%a{:href => "/get-involved", :rel=> "get-involved"} Get Involved
%a{:href => "/blog/", :rel=> "blog"} Blog
%li
%a{:href => "/get-involved/", :rel=> "get-involved"} Get Involved
%li
%a{:href => "/install/", :rel=> "install"} Install

11
doc-src/layouts/post.haml Normal file
View File

@ -0,0 +1,11 @@
- render "blog" do
%h1= @item[:title]
- author = author(@item[:author])
%h2
By
- if author["byline_link"]
%a{:href=>author["byline_link"]}= author["fullname"]
- else
= author["fullname"]
= yield
-#comments= render "partials/disqus_comments"

37
doc-src/lib/blog.rb Normal file
View File

@ -0,0 +1,37 @@
POST_NAME = %r{^/posts/(\d{4})-(\d{2})-(\d{2})-(.*)/$}
require 'time'
require 'yaml'
def blog_posts_in_order
@blog_posts_in_order ||= @items.select {|i| i.identifier =~ %r{/posts} }.sort_by {|i| i.identifier }
end
def previous_post(item = @item)
current_index = blog_posts_in_order.index(item)
if current_index && current_index > 0
blog_posts_in_order[current_index - 1]
end
end
def next_post(item = @item)
current_index = blog_posts_in_order.index(item)
if current_index && current_index < blog_posts_in_order.size - 1
blog_posts_in_order[current_index + 1]
end
end
def blog_date(item = @item)
if item.identifier =~ POST_NAME
Time.new($1.to_i, $2.to_i, $3.to_i)
end
end
def authors
@site.cached("authors") do
YAML.load_file("#{File.dirname(__FILE__)}/../authors.yml")
end
end
def author(author_id)
authors[author_id]
end

4
doc-src/lib/default.rb
View File

@ -132,3 +132,7 @@ def compass_version
"#{v[:major]}.#{v[:minor]}#{"."+v[:state] if v[:state]}.#{v[:build]}"
end
def long_compass_version
require 'compass/commands'
Compass::Commands::PrintVersion.long_output_string
end

2
doc-src/lib/search.rb
View File

@ -66,7 +66,7 @@ def search_index
# puts "Indexed: #{term}"
end
idx["items"][id] = {
"url" => "/docs#{item.identifier}",
"url" => "#{item.identifier}",
"title" => item[:title],
"crumb" => item[:crumb]
}

4
examples/compass/src/utilities.scss
View File

@ -3,7 +3,7 @@
@import "yui/modules/base";
@import "blueprint/grid";
@import "blueprint/scaffolding";
@import "compass/utilities/text/ellipsis";
@import "compass/typography/text/ellipsis";
html {
@include yui-base; }
@ -55,7 +55,7 @@ h2 {
ul.inline {
@include inline-list; }
ul.comma-delimited {
@include comma-delimited-list; }
@include delimited-list; }
ol.pretty {
@include pretty-bullets("blue_arrow.gif", 5px, 7px, 18px); } }

7
features/extensions.feature
View File

@ -20,3 +20,10 @@ Feature: Extensions
When I run: compass frameworks
Then the list of frameworks includes "testing"
@listframeworks
Scenario: Shared extensions directory
Given I am using the existing project in test/fixtures/stylesheets/compass
And the "~/.compass/extensions" directory exists
And and I have a fake extension at ~/.compass/extensions/testing
When I run: compass frameworks
Then the list of frameworks includes "testing"

2
features/step_definitions/command_line_steps.rb
View File

@ -193,7 +193,7 @@ end
Then /^the following configuration properties are set in ([^ ]+):$/ do |config_file, table|
config = Compass::Configuration::Data.new_from_file(config_file)
config = Compass::Configuration::FileData.new_from_file(config_file)
table.hashes.each do |hash|
config.send(hash['property']).should == hash['value']
end

21
frameworks/blueprint/stylesheets/blueprint/_debug.scss
View File

@ -1,8 +1,25 @@
@mixin showgrid($image: "grid.png") {
@import "compass/layout/grid-background";
@import "blueprint/grid";
// Shows a background that can be used to check grid alignment.
// By default this is a pure css version that only works in browsers
// that support gradients and multiple backgrounds, but you can pass
// an image url if you prefer.
@mixin showgrid($image: false) {
@if $image {
background: image-url($image);
}
@else {
@include grid-background(
$total : $blueprint-grid-columns,
$column : $blueprint-grid-width,
$gutter : $blueprint-grid-margin,
$baseline : 20px
);
}
}
@mixin blueprint-debug($grid-image: "grid.png") {
@mixin blueprint-debug($grid-image: false) {
// Use this class on any column or container to see the grid.
// TODO: prefix this with the project path.
.showgrid {

2
frameworks/blueprint/stylesheets/blueprint/_typography.scss
View File

@ -1,5 +1,5 @@
@import "colors";
@import "compass/utilities/links/link-colors";
@import "compass/typography/links/link-colors";
@import "compass/utilities/general/float";
$blueprint-font-family: "Helvetica Neue", Arial, Helvetica, sans-serif !default;

2
frameworks/blueprint/stylesheets/blueprint/_utilities.scss
View File

@ -1,4 +1,4 @@
@import "compass/utilities/text/nowrap";
@import "compass/typography/text/nowrap";
@import "compass/utilities/general/clearfix";
// Most of these utility classes are not "semantic". If you use them,

1
frameworks/compass/stylesheets/_compass.scss
View File

@ -1,2 +1,3 @@
@import "compass/utilities";
@import "compass/typography";
@import "compass/css3";

1
frameworks/compass/stylesheets/compass/_css3.scss
View File

@ -14,3 +14,4 @@
@import "css3/font-face";
@import "css3/transform";
@import "css3/transition";
@import "css3/appearance";

1
frameworks/compass/stylesheets/compass/_layout.scss
View File

@ -1,2 +1,3 @@
@import "layout/grid-background";
@import "layout/sticky-footer";
@import "layout/stretching";

3
frameworks/compass/stylesheets/compass/_reset-legacy.scss Normal file
View File

@ -0,0 +1,3 @@
@import "reset/utilities-legacy";
@include global-reset;

4
frameworks/compass/stylesheets/compass/_support.scss
View File

@ -20,6 +20,10 @@ $legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $l
$experimental-support-for-mozilla : true !default;
// Support for webkit in experimental css3 properties.
$experimental-support-for-webkit : true !default;
// Support for webkit in experimental css3 properties.
$experimental-support-for-webkit : true !default;
// Support for webkit's original (non-standard) gradient syntax.
$support-for-original-webkit-gradients : true !default;
// Support for opera in experimental css3 properties.
$experimental-support-for-opera : true !default;
// Support for microsoft in experimental css3 properties.

4
frameworks/compass/stylesheets/compass/_typography.scss Normal file
View File

@ -0,0 +1,4 @@
@import "typography/links";
@import "typography/lists";
@import "typography/text";
@import "typography/vertical_rhythm";

9
frameworks/compass/stylesheets/compass/_utilities.scss
View File

@ -1,6 +1,9 @@
@import "utilities/color";
@import "utilities/general";
@import "utilities/links";
@import "utilities/lists";
@import "utilities/sprites";
@import "utilities/tables";
@import "utilities/text";
// deprecated
@import "typography/links";
@import "typography/lists";
@import "typography/text";

13
frameworks/compass/stylesheets/compass/css3/_appearance.scss Normal file
View File

@ -0,0 +1,13 @@
@import "shared";
// Change the appearance for Mozilla, Webkit and the future
//
// @param $ap
// [ none | normal | icon | window | button | menu | field ]
@mixin appearance($ap) {
$ap: unquote($ap);
@include experimental(appearance, $ap,
-moz, -webkit, not -o, not -ms, not -khtml, official
);
}

20
frameworks/compass/stylesheets/compass/css3/_background-size.scss
View File

@ -8,9 +8,19 @@ $default-background-size: 100% auto !default;
//
// * percentages are relative to the background-origin (default = padding-box)
// * mixin defaults to: `$default-background-size`
@mixin background-size($size: $default-background-size) {
@if type-of($size) == string {
$size: unquote($size);
}
@include experimental(background-size, $size, -moz, -webkit, -o, not -ms, not -khtml);
@mixin background-size(
$size-1: $default-background-size,
$size-2: false,
$size-3: false,
$size-4: false,
$size-5: false,
$size-6: false,
$size-7: false,
$size-8: false,
$size-9: false,
$size-10: false
) {
$size-1: if(type-of($size-1) == string, unquote($size-1), $size-1);
$sizes: compact($size-1, $size-2, $size-3, $size-4, $size-5, $size-6, $size-7, $size-8, $size-9, $size-10);
@include experimental(background-size, $sizes, -moz, -webkit, -o, not -ms, not -khtml);
}

24
frameworks/compass/stylesheets/compass/css3/_font-face.scss
View File

@ -1,4 +1,3 @@
@charset "UTF-8";
@import "shared";
// Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
@ -7,15 +6,26 @@
// * $font-files is required using font-files('relative/location', 'format').
// for best results use this order: woff, opentype/truetype, svg
// * $eot is required by IE, and is a relative location of the eot file.
// * For android 2.2 Compatiblity, please ensure that your web page has
// a meta viewport tag.
// * To support iOS < 4.2, an SVG file must be provided
//
// If you need to generate other formats check out the Font Squirrel
// [font generator](http://www.fontsquirrel.com/fontface/generator)
@mixin font-face($name, $font-files, $eot: false, $postscript: false, $style: false) {
@if $postscript or $style {
@warn "The $postscript and $style variables have been deprecated in favor of the Paul Irish smiley bulletproof technique.";
}
@mixin font-face(
$name,
$font-files,
$eot: false
) {
$iefont: unquote("#{$eot}?iefix");
@font-face {
font-family: quote($name);
@if $eot { src: font-url($eot); }
src: local("☺"), $font-files;
@if $eot {
src: font-url($eot);
$font-files: font-url($iefont) unquote("format('eot')"), $font-files;
}
src: $font-files;
}
}

45
frameworks/compass/stylesheets/compass/css3/_images.scss
View File

@ -1,4 +1,5 @@
@import "shared";
@import "compass/utilities/general/hacks";
// Background property support for vendor prefixing within values.
@mixin background(
@ -16,15 +17,38 @@
$backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
$background-6, $background-7, $background-8, $background-9, $background-10);
$mult-bgs: -compass-list-size($backgrounds) > 1;
$simple-background: if($mult-bgs or prefixed(-css2, $backgrounds), -css2(-compass-nth($backgrounds, last)), false);
@if not blank($simple-background) { background: $simple-background; }
$add-pie-bg: prefixed(-pie, $backgrounds) or $mult-bgs;
@if $experimental-support-for-svg and prefixed(-svg, $backgrounds) { background: -svg($backgrounds); }
@if $support-for-original-webkit-gradients and prefixed(-owg, $backgrounds) { background: -owg($backgrounds); }
@if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) { background: -webkit($backgrounds); }
@if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) { background: -moz($backgrounds); }
@if $experimental-support-for-pie and (prefixed(-pie, $backgrounds) or $mult-bgs) { -pie-background: -pie($backgrounds); }
background: $backgrounds;
@if $experimental-support-for-opera and prefixed(-o, $backgrounds) { background: -o($backgrounds); }
@if $experimental-support-for-pie and $add-pie-bg { -pie-background: -pie($backgrounds); }
background: $backgrounds ;
}
@mixin background-with-css2-fallback(
$background-1,
$background-2: false,
$background-3: false,
$background-4: false,
$background-5: false,
$background-6: false,
$background-7: false,
$background-8: false,
$background-9: false,
$background-10: false
) {
$backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
$background-6, $background-7, $background-8, $background-9, $background-10);
$mult-bgs: -compass-list-size($backgrounds) > 1;
$simple-background: if($mult-bgs or prefixed(-css2, $backgrounds), -css2(-compass-nth($backgrounds, last)), false);
@if not blank($simple-background) { background: $simple-background; }
@include background($background-1, $background-2, $background-3, $background-4, $background-5,
$background-6, $background-7, $background-8, $background-9, $background-10);
}
// Background image property support for vendor prefixing within values.
@mixin background-image(
$image-1,
@ -39,11 +63,14 @@
$image-10: false
) {
$images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
$add-pie-bg: prefixed(-pie, $images) or -compass-list-size($images) > 1;
@if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); background-size: 100%; }
@if $support-for-original-webkit-gradients and prefixed(-owg, $images) { background-image: -owg($images); }
@if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); }
@if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); }
@if $experimental-support-for-pie and (prefixed(-pie, $images) or -compass-list-size($images) > 1) { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
@if $experimental-support-for-opera and prefixed(-o, $images) { background-image: -o($images); }
@if $experimental-support-for-pie and $add-pie-bg { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
background-image: $images ;
}
@ -66,7 +93,9 @@
// Border image property support for vendor prefixing properties and values.
@mixin border-image($value) {
@if $experimental-support-for-mozilla { -moz-border-image: -moz(-compass-list($value)); }
@if $support-for-original-webkit-gradients { -webkit-border-image: -owg(-compass-list($value)); }
@if $experimental-support-for-webkit { -webkit-border-image: -webkit(-compass-list($value)); }
@if $experimental-support-for-opera { -o-border-image: -o(-compass-list($value)); }
@if $experimental-support-for-svg { border-image: -svg(-compass-list($value)); }
border-image: $value;
}
@ -74,7 +103,9 @@
// List style image property support for vendor prefixing within values.
@mixin list-style-image($image) {
@if $experimental-support-for-mozilla and prefixed(-moz, $image) { list-style-image: -moz($image); }
@if $support-for-original-webkit-gradients and prefixed(-owg, $image) { list-style-image: -owg($image); }
@if $experimental-support-for-webkit and prefixed(-webkit, $image) { list-style-image: -webkit($image); }
@if $experimental-support-for-opera and prefixed(-o, $image) { list-style-image: -o($image); }
@if $experimental-support-for-svg and prefixed(-svg, $image) { list-style-image: -svg($image); }
list-style-image: $image ;
}
@ -83,7 +114,9 @@
@mixin list-style($value) {
$value: -compass-list($value);
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); }
@if $support-for-original-webkit-gradients and prefixed(-owg, $value) { list-style-image: -owg($value); }
@if $experimental-support-for-webkit and prefixed(-webkit, $value) { list-style-image: -webkit($value); }
@if $experimental-support-for-opera and prefixed(-o, $value) { list-style-image: -o($value); }
@if $experimental-support-for-svg and prefixed(-svg, $value) { list-style-image: -svg($value); }
list-style-image: $value ;
}
@ -92,7 +125,9 @@
@mixin content($value) {
$value: -compass-list($value);
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { content: -moz($value); }
@if $support-for-original-webkit-gradients and prefixed(-owg, $value) { content: -owg($value); }
@if $experimental-support-for-webkit and prefixed(-webkit, $value) { content: -webkit($value); }
@if $experimental-support-for-opera and prefixed(-o, $value) { content: -o($value); }
@if $experimental-support-for-svg and prefixed(-svg, $value) { content: -svg($value); }
content: $value ;
}

8
frameworks/compass/stylesheets/compass/css3/_transform.scss
View File

@ -198,10 +198,10 @@ $default-skew-y : 5deg !default;
//
// @include transform-style( [ style ] )
//
// where `style` can be either `flat` or `preserves-3d`
// browsers default to `flat`, mixin defaults to `preserves-3d`
@mixin transform-style($style: preserves-3d) {
@include experimental(perspective-origin, $style,
// where `style` can be either `flat` or `preserve-3d`
// browsers default to `flat`, mixin defaults to `preserve-3d`
@mixin transform-style($style: preserve-3d) {
@include experimental(transform-style, $style,
not -moz, -webkit, not -o, not -ms, not -khtml, official
);
}

178
frameworks/compass/stylesheets/compass/layout/_grid-background.scss Normal file
View File

@ -0,0 +1,178 @@
@import "compass/css3/images";
@import "compass/css3/background-size";
// Set the color of your columns
$grid-background-column-color : rgba(100, 100, 225, 0.25) !default;
// Set the color of your gutters
$grid-background-gutter-color : rgba(0, 0, 0, 0) !default;
// Set the total number of columns in your grid
$grid-background-total-columns : 24 !default;
// Set the width of your columns
$grid-background-column-width : 30px !default;
// Set the width of your gutters
$grid-background-gutter-width : 10px !default;
// Set the offset, if your columns are padded in from the container edge
$grid-background-offset : 0px !default;
// Set the color of your baseline
$grid-background-baseline-color : rgba(0, 0, 0, 0.5) !default;
// Set the height of your baseline grid
$grid-background-baseline-height : 1.5em !default;
// toggle your columns grids on and off
$show-column-grid-backgrounds : true !default;
// toggle your vertical grids on and off
$show-baseline-grid-backgrounds : true !default;
// toggle all your grids on and off
$show-grid-backgrounds : true !default;
// optionally force your grid-image to remain fluid
// no matter what units you used to declared your grid.
$grid-background-force-fluid : false !default;
// Create the gradient needed for baseline grids
@function get-baseline-gradient(
$color : $grid-background-baseline-color
) {
$gradient: linear-gradient(bottom, $color 5%, rgba($color,0) 5%);
@return $gradient;
}
// Create the color-stops needed for horizontal grids
@function build-grid-background(
$total : $grid-background-total-columns,
$column : $grid-background-column-width,
$gutter : $grid-background-gutter-width,
$offset : $grid-background-offset,
$column-color : $grid-background-column-color,
$gutter-color : $grid-background-gutter-color
) {
$grid: compact();
$grid: append($grid, $gutter-color $offset, comma);
@for $i from 0 to $total {
// $a represents the start of this column, initially equal to the offset
$a: $offset;
@if $i > 0 { $a: $a + (($column + $gutter) * $i); }
// $g represents the start of this gutter, equal to $a plus one column-width
$g: $a + $column;
// $z represents the end of a gutter, equal to $g plus one gutter-width
$z: $g + $gutter;
@if (unit($a) == "%") and ($i == ($total - 1)) {
$z: 100%;
}
// and we add this column/gutter pair to our grid
$grid: join($grid, ($column-color $a, $column-color $g, $gutter-color $g, $gutter-color $z));
}
@return $grid;
}
// Return the gradient needed for horizontal grids
@function get-column-gradient(
$total : $grid-background-total-columns,
$column : $grid-background-column-width,
$gutter : $grid-background-gutter-width,
$offset : $grid-background-offset,
$column-color : $grid-background-column-color,
$gutter-color : $grid-background-gutter-color,
$force-fluid : $grid-background-force-fluid
) {
$grid: unquote("");
// don't force fluid grids when they are already fluid.
@if unit($column) == "%" { $force-fluid: false; }
@if $force-fluid {
$grid: get-column-fluid-grid($total,$column,$gutter,$offset,$column-color,$gutter-color);
} @else {
$grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color);
}
// return the horizontal grid as a gradient
$gradient: linear-gradient(left, $grid);
@return $gradient;
}
// Convert a grid from fixed units into percentages.
@function get-column-fluid-grid(
$total : $grid-background-total-columns,
$column : $grid-background-column-width,
$gutter : $grid-background-gutter-width,
$offset : $grid-background-offset,
$column-color : $grid-background-column-color,
$gutter-color : $grid-background-gutter-color
) {
$context: ($column * $total) + ($gutter * ($total - 1) + ($offset * 2));
$offset: $offset / $context * 100%;
$column: $column / $context * 100%;
$gutter: $gutter / $context * 100%;
// return the horizontal grid as a set of color-stops
$grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color);
@return $grid;
}
// Add just the baseline grid to an element's background
@mixin baseline-grid-background(
$baseline : $grid-background-baseline-height,
$color : $grid-background-baseline-color
) {
@if $show-grid-backgrounds and $show-baseline-grid-backgrounds {
@include background-image(get-baseline-gradient($color));
@include background-size(100% $baseline);
background-position: left top;
}
}
// Add just the horizontal grid to an element's background
@mixin column-grid-background(
$total : $grid-background-total-columns,
$column : $grid-background-column-width,
$gutter : $grid-background-gutter-width,
$offset : $grid-background-offset,
$column-color : $grid-background-column-color,
$gutter-color : $grid-background-gutter-color,
$force-fluid : $grid-background-force-fluid
) {
@if $show-grid-backgrounds and $show-column-grid-backgrounds {
@include background-image(
get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
);
background-position: left top;
}
}
// Add both horizontal and baseline grids to an element's background
@mixin grid-background(
$total : $grid-background-total-columns,
$column : $grid-background-column-width,
$gutter : $grid-background-gutter-width,
$baseline : $grid-background-baseline-height,
$offset : $grid-background-offset,
$column-color : $grid-background-column-color,
$gutter-color : $grid-background-gutter-color,
$baseline-color : $grid-background-baseline-color,
$force-fluid : $grid-background-force-fluid
) {
@if $show-grid-backgrounds {
@if $show-baseline-grid-backgrounds and $show-column-grid-backgrounds {
@include background-image(
get-baseline-gradient($baseline-color),
get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
);
@include background-size(100% $baseline, auto);
background-position: left top;
} @else {
@include baseline-grid-background($baseline, $baseline-color);
@include column-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid);
}
}
}

135
frameworks/compass/stylesheets/compass/reset/_utilities-legacy.scss Normal file
View File

@ -0,0 +1,135 @@
// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
// Global reset rules.
// For more specific resets, use the reset mixins provided below
//
// *Please Note*: tables still need `cellspacing="0"` in the markup.
@mixin global-reset {
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
@include reset-box-model;
@include reset-font; }
body {
@include reset-body; }
ol, ul {
@include reset-list-style; }
table {
@include reset-table; }
caption, th, td {
@include reset-table-cell; }
q, blockquote {
@include reset-quotation; }
a img {
@include reset-image-anchor-border; } }
// Reset all elements within some selector scope. To reset the selector itself,
// mixin the appropriate reset mixin for that element type as well. This could be
// useful if you want to style a part of your page in a dramatically different way.
//
// *Please Note*: tables still need `cellspacing="0"` in the markup.
@mixin nested-reset {
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
pre, a, abbr, acronym, address, code, del, dfn, em, img,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr {
@include reset-box-model;
@include reset-font; }
table {
@include reset-table; }
caption, th, td {
@include reset-table-cell; }
q, blockquote {
@include reset-quotation; }
a img {
@include reset-image-anchor-border; } }
// Reset the box model measurements.
@mixin reset-box-model {
margin: 0;
padding: 0;
border: 0;
outline: 0; }
// Reset the font and vertical alignment.
@mixin reset-font {
font: {
weight: inherit;
style: inherit;
size: 100%;
family: inherit; };
vertical-align: baseline; }
// Resets the outline when focus.
// For accessibility you need to apply some styling in its place.
@mixin reset-focus {
outline: 0; }
// Reset a body element.
@mixin reset-body {
line-height: 1;
color: black;
background: white; }
// Reset the list style of an element.
@mixin reset-list-style {
list-style: none; }
// Reset a table
@mixin reset-table {
border-collapse: separate;
border-spacing: 0;
vertical-align: middle; }
// Reset a table cell (`th`, `td`)
@mixin reset-table-cell {
text-align: left;
font-weight: normal;
vertical-align: middle; }
// Reset a quotation (`q`, `blockquote`)
@mixin reset-quotation {
quotes: "" "";
&:before, &:after {
content: ""; } }
// Resets the border.
@mixin reset-image-anchor-border {
border: none; }
// Unrecognized elements are displayed inline.
// This reset provides a basic reset for html5 elements
// so they are rendered correctly in browsers that don't recognize them
// and reset in browsers that have default styles for them.
@mixin reset-html5 {
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
@include reset-box-model;
display: block; } }
// Resets the display of inline and block elements to their default display
// according to their tag type. Elements that have a default display that varies across
// versions of html or browser are not handled here, but this covers the 90% use case.
// Usage Example:
//
// // Turn off the display for both of these classes
// .unregistered-only, .registered-only
// display: none
// // Now turn only one of them back on depending on some other context.
// body.registered
// +reset-display(".registered-only")
// body.unregistered
// +reset-display(".unregistered-only")
@mixin reset-display($selector: "", $important: false) {
#{append-selector(elements-of-type("inline"), $selector)} {
@if $important {
display: inline !important; }
@else {
display: inline; } }
#{append-selector(elements-of-type("block"), $selector)} {
@if $important {
display: block !important; }
@else {
display: block; } } }

62
frameworks/compass/stylesheets/compass/reset/_utilities.scss
View File

@ -1,17 +1,20 @@
// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
// Based on [Eric Meyer's reset 2.0](http://meyerweb.com/eric/tools/css/reset/index.html)
// Global reset rules.
// For more specific resets, use the reset mixins provided below
//
// *Please Note*: tables still need `cellspacing="0"` in the markup.
@mixin global-reset {
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
@include reset-box-model;
@include reset-font; }
body {
@ -25,17 +28,26 @@
q, blockquote {
@include reset-quotation; }
a img {
@include reset-image-anchor-border; } }
@include reset-image-anchor-border; }
@include reset-html5; }
// Reset all elements within some selector scope. To reset the selector itself,
// mixin the appropriate reset mixin for that element type as well. This could be
// useful if you want to style a part of your page in a dramatically different way.
//
// *Please Note*: tables still need `cellspacing="0"` in the markup.
@mixin nested-reset {
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
pre, a, abbr, acronym, address, code, del, dfn, em, img,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr {
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
@include reset-box-model;
@include reset-font; }
table {
@ -51,16 +63,12 @@
@mixin reset-box-model {
margin: 0;
padding: 0;
border: 0;
outline: 0; }
border: 0; }
// Reset the font and vertical alignment.
@mixin reset-font {
font: {
weight: inherit;
style: inherit;
size: 100%;
family: inherit; };
font-size: 100%;
font: inherit;
vertical-align: baseline; }
// Resets the outline when focus.
@ -70,9 +78,7 @@
// Reset a body element.
@mixin reset-body {
line-height: 1;
color: black;
background: white; }
line-height: 1; }
// Reset the list style of an element.
@mixin reset-list-style {
@ -80,9 +86,8 @@
// Reset a table
@mixin reset-table {
border-collapse: separate;
border-spacing: 0;
vertical-align: middle; }
border-collapse: collapse;
border-spacing: 0; }
// Reset a table cell (`th`, `td`)
@mixin reset-table-cell {
@ -92,9 +97,10 @@
// Reset a quotation (`q`, `blockquote`)
@mixin reset-quotation {
quotes: "" "";
quotes: none;
&:before, &:after {
content: ""; } }
content: "";
content: none; } }
// Resets the border.
@mixin reset-image-anchor-border {
@ -105,8 +111,8 @@
// so they are rendered correctly in browsers that don't recognize them
// and reset in browsers that have default styles for them.
@mixin reset-html5 {
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
@include reset-box-model;
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; } }
// Resets the display of inline and block elements to their default display

3
frameworks/compass/stylesheets/compass/typography/_links.scss Normal file
View File

@ -0,0 +1,3 @@
@import "links/hover-link";
@import "links/link-colors";
@import "links/unstyled-link";

4
frameworks/compass/stylesheets/compass/typography/_lists.scss Normal file
View File

@ -0,0 +1,4 @@
@import "lists/horizontal-list";
@import "lists/inline-list";
@import "lists/inline-block-list";
@import "lists/bullets";

3
frameworks/compass/stylesheets/compass/typography/_text.scss Normal file
View File

@ -0,0 +1,3 @@
@import "text/ellipsis";
@import "text/nowrap";
@import "text/replacement";

133
frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss Normal file
View File

@ -0,0 +1,133 @@
// The base font size
$base-font-size: 16px !default;
// The base line height is the basic unit of line hightness.
$base-line-height: 24px !default;
// set the default border style for rhythm borders
$default-rhythm-border-style: solid !default;
// The IE font ratio is a fact of life. Deal with it.
$ie-font-ratio: 16px / 100%;
// The basic unit of font rhythm
$base-rhythm-unit: $base-line-height / $base-font-size * 1em;
// The leader is the amount of whitespace in a line.
// It might be useful in your calculations
$base-leader: ($base-line-height - $base-font-size) * 1em / $base-font-size;
// The half-leader is the amount of whitespace above and below a line.
// It might be useful in your calculations
$base-half-leader: $base-leader / 2;
// Establishes a font baseline for the given font-size in pixels
@mixin establish-baseline($font-size: $base-font-size) {
body {
font-size: $font-size / $ie-font-ratio;
@include adjust-leading-to(1, $font-size);
}
html>body {
font-size: $font-size;
}
}
// Show a background image that can be used to debug your alignments.
@mixin debug-vertical-alignment($img: 'underline.png') {
background: url($img);
}
// Adjust a block to have a different font size and leading to maintain the rhythm.
// $lines is a number that is how many times the baseline rhythm this
// font size should use up. Does not have to be an integer, but it defaults
// to the smallest integer that is large enough to fit the font.
// Use $from_size to adjust from a non-base font-size.
@mixin adjust-font-size-to($to-size, $lines: ceil($to-size / $base-line-height), $from-size: $base-font-size) {
font-size: 1em * $to-size / $from-size;
@include adjust-leading-to($lines, $to-size);
}
@mixin adjust-leading-to($lines, $font-size: $base-font-size) {
line-height: 1em * $lines * $base-line-height / $font-size;
}
// Calculate rhythm units
@function rhythm(
$lines: 1,
$font-size: $base-font-size
) {
$rhythm: 1em * $lines * $base-line-height / $font-size;
@return $rhythm;
}
// Apply leading whitespace
@mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
#{$property}-top: rhythm($lines, $font-size);
}
@mixin padding-leader($lines: 1, $font-size: $base-font-size) {
@include leader($lines, $font-size, padding);
}
@mixin margin-leader($lines: 1, $font-size: $base-font-size) {
@include leader($lines, $font-size, margin);
}
// Apply trailing whitespace
@mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
#{$property}-bottom: rhythm($lines, $font-size);
}
@mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
@include trailer($lines, $font-size, padding);
}
@mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
@include trailer($lines, $font-size, margin);
}
// Whitespace application shortcut
// Apply top margin/padding + bottom padding/margin
@mixin rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size) {
@include leader($leader, $font-size);
@include padding-leader($padding-leader, $font-size);
@include padding-trailer($padding-trailer, $font-size);
@include trailer($trailer, $font-size);
}
// Apply a border width to any side without destroying the vertical rhythm
@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
border-#{$side}: {
style: $border-style;
width: 1em * $width / $font-size;
};
padding-#{$side}: 1em / $font-size * ($lines * $base-line-height - $width);
}
// Aplly rhythm borders equally to all sides
@mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
border: {
style: $border-style;
width: 1em * $width / $font-size; };
padding: 1em / $font-size * ($lines * $base-line-height - $width);
}
// Apply a leading rhythm border
@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style);
}
// Apply a trailing rhythm border
@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style);
}
// Apply both leading and trailing rhythm borders
@mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@include leading-border($width, $lines, $font-size, $border-style);
@include trailing-border($width, $lines, $font-size, $border-style);
}
@mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@include horizontal-borders($width, $lines, $font-size, $border-style);
}

Some files were not shown because too many files have changed in this diff Show More