v0.12.2~dfsg/ 0000755 0000000 0000000 00000000000 11771656742 011544 5 ustar root root v0.12.2~dfsg/Gemfile_rails2 0000644 0000000 0000000 00000000207 11771656742 014312 0 ustar root root source :rubygems
gem "compass", :path => "."
gem "cucumber"
gem "rspec"
gem "rails", "~>2.3"
gem "compass-validator"
gem "css_parser"
v0.12.2~dfsg/.travis.yml 0000644 0000000 0000000 00000000146 11771656742 013656 0 ustar root root rvm:
- 1.8.7
- 1.9.2
- 1.9.3
- jruby
- rbx
- ree
script: "bundle exec rake test features"
v0.12.2~dfsg/doc-src/ 0000755 0000000 0000000 00000000000 11771656742 013076 5 ustar root root v0.12.2~dfsg/doc-src/config.yaml 0000644 0000000 0000000 00000000520 11771656742 015224 0 ustar root root ---
data_sources:
- items_root: /
layouts_root: /
type: better_combined
- items_root: /assets
layouts_root: /assets
type: filesystem_assets
text_extensions: [ 'css', 'erb', 'haml', 'htm', 'html', 'js', 'less', 'markdown', 'md', 'php', 'rb', 'sass', 'scss', 'txt', 'xml' ]
output_dir: output
base_url: http://compass-style.org
v0.12.2~dfsg/doc-src/Rules 0000644 0000000 0000000 00000005204 11771656742 014114 0 ustar root root #!/usr/bin/env ruby
require 'compass'
Compass.add_configuration "#{File.dirname(__FILE__)}/.compass/config.rb"
SITE_ROOT = ""
compile '/assets/*/' do
nil
end
['markup', 'stylesheet', 'background'].each do |ex_file|
compile "/examples/*/#{ex_file}/" do
nil
end
end
compile '/' do
filter :haml, :ugly => true
layout item[:layout] ? item[:layout] : "main"
end
compile '/search-data/' do
filter :erb
end
compile '/examples/*/' do
filter :haml, :ugly => true
filter :highlight
layout item[:layout] ? item[:layout] : "example"
end
sass_options = Compass.sass_engine_options
(0..5).each do |i|
compile("/stylesheets/#{'*/' * i}_*/") {nil}
end
compile '/stylesheets/*' do
filter :sass, sass_options.merge(:syntax => item[:extension].to_sym)
end
compile '/reference/*/' do
filter :haml, :ugly => true
filter :highlight
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 'sitemap' do
filter :erb
end
compile '*' do
if item[:extension] == "markdown"
filter :erb
filter :rdiscount
elsif item[:extension] == "haml"
filter :haml, :ugly => true
end
layout item[:layout] ? item[:layout] : "main"
end
route 'sitemap' do
item.identifier.chop + '.xml'
end
route "/blog/atom/" do
"/blog/atom.xml"
end
route '/search-data/' do
"#{SITE_ROOT}/javascripts"+item.identifier[0..-2]+".js"
end
(0..5).each do |i|
route("/stylesheets/#{'*/' * i}_*/") {nil}
end
route '/assets/htaccess/' do
"#{SITE_ROOT}/.htaccess"
end
route '/assets/css/*/' do
"#{SITE_ROOT}/stylesheets"+item.identifier.chop[11..-1]+"."+item[:extension]
end
route '/assets/images/*/' do
SITE_ROOT+item.identifier.chop[7..-1]+"."+item[:extension]
end
route '/assets/javascripts/*/' do
SITE_ROOT+item.identifier.chop[7..-1]+"."+item[:extension]
end
route '/assets/fonts/*/' do
SITE_ROOT+item.identifier.chop[7..-1]+"."+item[:extension]
end
route '/stylesheets/*/' do
# don't generate a directory like we do for HTML files
SITE_ROOT+item.identifier.chop + '.css'
end
route '/posts/*/' do
if item[:draft]
puts "Skipping Draft post: #{item.identifier}"
nil
elsif 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
end
end
route '*' do
SITE_ROOT+item.identifier + 'index.html'
end
layout '*', :haml, :ugly => true
v0.12.2~dfsg/doc-src/.gitignore 0000644 0000000 0000000 00000000036 11771656742 015065 0 ustar root root bin
vendor
output
vendor/ruby
v0.12.2~dfsg/doc-src/authors.yml 0000644 0000000 0000000 00000000375 11771656742 015313 0 ustar root root chris:
fullname: Chris Eppstein
byline_link: http://chriseppstein.github.com/
brandon:
fullname: Brandon Mathis
eric:
fullname: Eric Meyer
byline_link: http://eric.oddbird.net/
nico:
fullname: Nico Hagenburger
scott:
fullname: Scott Davis
v0.12.2~dfsg/doc-src/lib/ 0000755 0000000 0000000 00000000000 11771656742 013644 5 ustar root root v0.12.2~dfsg/doc-src/lib/blog.rb 0000644 0000000 0000000 00000001544 11771656742 015120 0 ustar root root 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
v0.12.2~dfsg/doc-src/lib/data_sources/ 0000755 0000000 0000000 00000000000 11771656742 016320 5 ustar root root v0.12.2~dfsg/doc-src/lib/data_sources/syntax_highter.rb 0000644 0000000 0000000 00000001633 11771656742 021710 0 ustar root root require 'nokogiri'
require 'coderay'
class SyntaxHighlighterFilter < Nanoc3::Filter
identifier :highlight
def highlight(code, type)
hl_map = Hash.new(:coderay)
hl_map[:sass] = :pygmentize
send(hl_map[type], code, type)
end
def pygmentize(code, type)
# -O linenos=table
IO.popen("pygmentize -l #{type} -f html -O encoding=utf-8", "r+") do |io|
io.write(code)
io.close_write
return io.read
end
end
def coderay(code, type)
# :line_numbers => :table,
type = :css if type == :scss
CodeRay.scan(code, type).div(:css => :class)
end
def run(content, params={})
doc = Nokogiri::HTML.fragment(content)
[:css, :sass, :scss, :html, :haml].each do |format|
doc.css("pre.source-code.#{format}, code.#{format}").each do |el|
el.set_attribute("class", "brush: #{format} "+el.attribute("class").value)
end
end
doc.to_s
end
end
v0.12.2~dfsg/doc-src/lib/data_sources/core_extensions.rb 0000644 0000000 0000000 00000000213 11771656742 022050 0 ustar root root class Object
def try(method, *args, &block)
send(method, *args, &block)
end
end
class NilClass
def try(*args)
nil
end
end
v0.12.2~dfsg/doc-src/lib/data_sources/better_combined_datasource.rb 0000644 0000000 0000000 00000001323 11771656742 024203 0 ustar root root # This is basically the default filesystem_combined datasource
# But items without a metadata header don't get an error.
class BetterFilesystemCombined < Nanoc3::DataSources::FilesystemCombined
identifier :better_combined
def parse_file(filename, kind)
contents = File.read(filename)
if contents =~ /^(-{5}|-{3})/
# Split file
pieces = contents.split(/^(-{5}|-{3})/).compact
if pieces.size < 4
raise RuntimeError.new(
"The file '#{filename}' does not seem to be a nanoc #{kind}"
)
end
# Parse
meta = YAML.load(pieces[2]) || {}
content = pieces[4..-1].join.strip
[ meta, content ]
else
[{}, contents]
end
end
end
v0.12.2~dfsg/doc-src/lib/data_sources/asset_data_source.rb 0000644 0000000 0000000 00000000620 11771656742 022333 0 ustar root root class AssetDataSource < Nanoc3::DataSource
identifier :filesystem_assets
def items
files = []
Dir.glob("assets/**/*").each do |f|
files << f if File.file?(f)
end
files.map do |f|
identifier = f[7..-1].gsub(/\.[^.]+$/,'')+"/"
attrs = {:extension => File.extname(f)[1..-1]}
Nanoc3::Item.new(File.read(f), attrs, identifier, File.mtime(f))
end
end
end
v0.12.2~dfsg/doc-src/lib/data_sources/nanoc_monkey_patches.rb 0000644 0000000 0000000 00000000313 11771656742 023031 0 ustar root root class Nanoc3::Site
def cached(key)
if cached_stuff.has_key?(key)
cached_stuff[key]
else
cached_stuff[key]= yield
end
end
def cached_stuff
@cached_stuff ||= {}
end
end
v0.12.2~dfsg/doc-src/lib/search.rb 0000644 0000000 0000000 00000006110 11771656742 015434 0 ustar root root require 'json'
STOP_WORDS = %w{
a about above across after afterwards again against all almost
alone along already also although always am among amongst amoungst
amount an and another any anyhow anyone anything anyway anywhere
are around as at back be became because become becomes becoming
been before beforehand behind being below beside besides between
beyond bill both bottom but by call can cannot cant co computer con
could couldnt cry de describe detail do done down due during each
eg eight either eleven else elsewhere empty enough etc even ever
every everyone everything everywhere except few fifteen fify fill
find fire first five for former formerly forty found four from
front full further get give go had has hasnt have he hence her here
hereafter hereby herein hereupon hers herself him himself his how
however hundred i ie if in inc indeed interest into is it its
itself keep last latter latterly least less ltd made many may me
meanwhile might mill mine more moreover most mostly move much must
my myself name namely neither never nevertheless next nine no
nobody none noone nor not nothing now nowhere of off often on once
one only onto or other others otherwise our ours ourselves out over
own part per perhaps please put rather re same see seem seemed
seeming seems serious several she should show side since sincere
six sixty so some somehow someone something sometime sometimes
somewhere still such system take ten than that the their them
themselves then thence there thereafter thereby therefore therein
thereupon these they thick thin third this those though three
through throughout thru thus to together too top toward towards
twelve twenty two un under until up upon us very via was we well
were what whatever when whence whenever where whereafter whereas
whereby wherein whereupon wherever whether which while whither who
whoever whole whom whose why will with within without would yet you
your yours yourself yourselves
} unless defined?(STOP_WORDS)
def search_terms_for(item)
if item.identifier =~ /^\/(reference|tutorials)/
content = item.rep_named(:default).compiled_content
doc = Nokogiri::HTML(content)
full_text = doc.css("p, h1, h2, h3, h4, h5, h6").map{|el| el.inner_text}.join(" ")
"#{item[:title]} #{item[:meta_description]} #{full_text}".gsub(/[\W\s_]+/m,' ').downcase.split(/\s+/).uniq - STOP_WORDS
else
[]
end
end
def search_index
id = 0;
idx = {
"approximate" => {},
"terms" => {},
"items" => {}
}
@items.each do |item|
search_terms_for(item).each do |term|
idx["terms"][term] ||= []
idx["terms"][term] << id
(0...term.length).each do |c|
subterm = term[0...c]
# puts "Indexing: #{subterm}"
idx["approximate"][subterm] ||= []
unless idx["approximate"][subterm].include?(id)
idx["approximate"][subterm] << id
end
end
# puts "Indexed: #{term}"
end
idx["items"][id] = {
"url" => "#{item.identifier}",
"title" => item[:title],
"crumb" => item[:crumb]
}
id += 1
end
idx
end
v0.12.2~dfsg/doc-src/lib/default.rb 0000644 0000000 0000000 00000007240 11771656742 015620 0 ustar root root # All files in the 'lib' directory will be loaded
# before nanoc starts compiling.
require 'erb'
require 'active_support/inflector'
include Nanoc3::Helpers::LinkTo
include Nanoc3::Helpers::Capturing
include Nanoc3::Helpers::Rendering
include Nanoc3::Helpers::Breadcrumbs
include Nanoc3::Helpers::XMLSitemap
def body_class(item)
classes = [""]
classes += item[:classnames] || []
classes << "demo" if item.identifier =~ /^\/examples/
classes.join(" ")
end
def body_id(item)
if item[:body_id]
item[:body_id]
elsif id = item.identifier.chop[1..-1]
id.gsub(/\/|_/, "-")
end
end
def body_attributes(item)
{
:id => body_id(item),
:class => body_class(item)
}
end
module Enumerable
def sorted_and_grouped_by_name
sort_by{|i| yield(i)}.group_by{|i| yield(i).sub(/^[^\w]/,"")[0..0].upcase}
end
end
class Recycler
attr_accessor :values
attr_accessor :index
def initialize *values
self.values = values
self.index = 0
end
def next
values[index]
ensure
self.index += 1
self.index = 0 if self.index >= self.values.size
end
def reset!
self.index = 0
end
end
def cycle(*args)
yield Recycler.new *args
end
def default_path(item)
item.reps.find{|r| r.name == :default}.path
end
def find(identifier)
@items.find{|i| i.identifier == identifier}
end
def get_var(instance_var)
instance_variable_defined?("@#{instance_var}") ? instance_variable_get("@#{instance_var}") : yield
end
def sidebar_item(item)
if item.nil?
nil
elsif item[:sidebar]
item
else
sidebar_item(item.parent)
end
end
def sidebar_stylesheet(item)
i = sidebar_item(item)
i[:stylesheet] if i
end
def item_tree(item, options = {})
crumb = item[:crumb] || item[:title]
options[:heading_level] ||= 1 if options.fetch(:headings, true)
child_html = ""
if options.fetch(:depth,1) > 0
child_opts = options.dup
child_opts[:depth] -= 1 if child_opts.has_key?(:depth)
child_opts[:heading_depth] -= 1 if child_opts.has_key?(:heading_depth)
child_opts[:heading_level] += 1 if child_opts[:heading_level]
child_opts.delete(:omit_self)
item.children.sort_by{|c| c[:crumb] || c[:title]}.each do |child|
next if child[:navigable] == false
child_html << item_tree(child, child_opts)
end
else
options.delete(:heading_level)
end
child_html = render("partials/sidebar/container", :contents => child_html) unless child_html.size == 0
css_class = nil
contents = unless options[:omit_self]
item_opts = {
:current_item => item,
:selected => !!@item.identifier[item.identifier],
:crumb => item[:crumb] || item[:title]
}
if options[:heading_level] && (options.fetch(:heading_depth, 1) > 0)
render("partials/sidebar/heading",
item_opts.merge(:heading => "h#{options[:heading_level]}")
)
else
render("partials/sidebar/item", item_opts)
end
end
%Q{#{contents}#{child_html}}
end
def tutorial_item(path)
path = "" if path == :root
@items.detect do |i|
i.identifier == "/help/tutorials/#{path}"
end
end
def compass_version
v = Compass.version
"#{v[:major]}.#{v[:minor]}#{"."+v[:state] if v[:state]}.#{v[:build] || v[:patch]}"
end
def long_compass_version
require 'compass/commands'
Compass::Commands::PrintVersion.long_output_string
end
def sprite_tutorial_links(index=false)
string = <<-ERB
<% unless index %>
* [Sprite Tutorial Index](/help/tutorials/spriting/)
<% end %>
<% Dir["./content/help/tutorials/spriting/**/*.markdown"].sort.each do |file| %>
* [<%= File.basename(file, '.markdown').gsub('-', ' ').titleize %>](/help/tutorials/spriting/<%= File.basename(file, '.markdown') %>)
<% end %>
ERB
::ERB.new(string).result(binding)
end
v0.12.2~dfsg/doc-src/lib/stylesheets/ 0000755 0000000 0000000 00000000000 11771656742 016220 5 ustar root root v0.12.2~dfsg/doc-src/lib/stylesheets/sass_extensions.rb 0000644 0000000 0000000 00000006342 11771656742 022002 0 ustar root root require 'sass'
module Sass
module Tree
class VariableNode < Node
attr_accessor :name unless method_defined? :name
attr_accessor :expr unless method_defined? :expr
attr_accessor :guarded unless method_defined? :guarded
attr_accessor :comment unless method_defined? :comment
end
class DebugNode < Node
def to_sass
""
end
end
class MixinNode < Node
attr_accessor :name unless method_defined? :name
attr_accessor :args unless method_defined? :args
end
class VariableNode < Node
attr_accessor :comment unless method_defined? :comment
end
module HasSignature
def sass_signature(format = :text)
"#{name}#{arglist_to_sass(format)}"
end
private
def arglist_to_sass(format = :text)
if args && args.any?
"(#{args.map{|a| arg_to_sass(a, format)}.join(", ")})"
else
""
end
end
def arg_to_sass(arg, format = :text)
name, default_value = arg
sass_str = ""
if format == :html
ddv = %Q{ data-default-value="#{h(default_value.to_sass)}"} if default_value
sass_str = %Q{#{name.to_sass} }
else
sass_str = "#{name.to_sass}"
if default_value
sass_str << " = "
sass_str << default_value.to_sass
end
end
sass_str
end
end
class MixinDefNode < Node
attr_accessor :name unless method_defined? :name
attr_accessor :args unless method_defined? :args
attr_accessor :comment unless method_defined? :comment
unless included_modules.include?(HasSignature)
include HasSignature
alias sass_signature_without_prefix sass_signature
def sass_signature(mode = :definition, format = :text)
prefix = case mode
when :definition
"="
when :include
"+"
end
"#{prefix}#{sass_signature_without_prefix(format)}"
end
end
end
class FunctionNode < Node
attr_accessor :name unless method_defined? :name
attr_accessor :args unless method_defined? :args
attr_accessor :comment unless method_defined? :comment
include HasSignature unless included_modules.include?(HasSignature)
end
class ImportNode < RootNode
attr_accessor :imported_filename unless method_defined? :imported_filename
end
class CommentNode < Node
unless defined?(PRE_COMMENT)
PRE_COMMENT = %r{(^ */*\**(\s*\|)?( |$))}
end
unless defined?(POST_COMMENT)
POST_COMMENT = %r{ *\*/$}
end
def self.clean(docstring)
docstring.gsub(/@doc off(.*?)@doc on/m, '')
end
def docstring
v = value
v = v.join("\n") if v.respond_to?(:join)
v.gsub(PRE_COMMENT, '').gsub(POST_COMMENT, '')
end
def doc
if value == "@doc off"
false
elsif value == "@doc on"
true
end
end
end
end
module Script
class Color < Literal
def to_sass(options = {})
if options[:format] == :html
%Q{#{to_s} }
else
to_s
end
end
end
end
end
v0.12.2~dfsg/doc-src/lib/examples.rb 0000644 0000000 0000000 00000001136 11771656742 016010 0 ustar root root def example_haml
markup_item = @item.children.detect{|child| child.identifier =~ /markup/}
markup_item.reps.find { |r| r.name == :default }.content_at_snapshot(:raw)
end
def example_html
Haml::Engine.new(example_haml).render
end
def example_sass
markup_item = @item.children.detect{|child| child.identifier =~ /stylesheet/}
markup_item.reps.find { |r| r.name == :default }.content_at_snapshot(:raw)
end
def example_scss
Sass::Engine.new(example_sass).to_tree.to_scss
end
def example_css
Sass::Engine.new(example_sass, Compass.sass_engine_options.merge(:line_comments => false)).render
end v0.12.2~dfsg/doc-src/lib/stylesheets.rb 0000644 0000000 0000000 00000014070 11771656742 016547 0 ustar root root require 'rdiscount'
def stylesheets_dir(framework)
Compass::Frameworks[framework].stylesheets_directory
end
def tree_key(item)
"tree/"+[item[:framework], item[:stylesheet]].join("/")
end
def tree(item)
@site.cached(tree_key(item)) do
file = File.join(stylesheets_dir(item[:framework]), item[:stylesheet])
contents = File.read(file)
syntax = item[:stylesheet] =~ /\.scss$/ ? :scss : :sass
Sass::Engine.new(contents, :syntax => syntax).send :to_tree
end
end
def imports(item)
sass_tree = tree(item)
imports = []
sass_tree.children.each do |child|
if child.is_a?(Sass::Tree::ImportNode)
imports << child.imported_filename
end
end
imports.sort
end
def reference_item(options)
stylesheet = options[:stylesheet]
path = stylesheet_path(stylesheet)
if path
@site.cached("reference/item/#{path}") do
@items.detect do |i|
if i.identifier =~ /^\/reference/ && i[:stylesheet]
i[:stylesheet] == path
end
end
end
end
end
def departialize(path)
path.gsub(%r{(\b|/)_}){|m| m.size > 1 ? "/" : ""}
end
def reference_path(options)
if item = reference_item(options)
rep = item.reps.find { |r| r.name == :default }
rep.path
end
end
def import_paths
paths = []
if @item[:stylesheet]
paths << [File.join(Compass::Frameworks[@item[:framework]].stylesheets_directory,
File.dirname(@item[:stylesheet])),
@item[:stylesheet]["/"] ? File.dirname(@item[:stylesheet]) : ""]
end
paths += Compass::Frameworks::ALL.inject([]) {|m, f| m << f.stylesheets_directory}.map!{|p|[p, '']}
paths
end
def stylesheet_path(ss)
possible_names = possible_filenames_for_stylesheet(ss)
import_paths.each do |import_path|
possible_names.each do |filename|
full_path = File.join(import_path.first, filename)
if File.exist?(full_path)
return "#{import_path.last}#{"/" if import_path.last && import_path.last.length > 0}#{filename}"
end
end
end
nil
end
def possible_filenames_for_stylesheet(ss)
ext = File.extname(ss)
path = File.dirname(ss)
path = path == "." ? "" : "#{path}/"
base = File.basename(ss)[0..-(ext.size+1)]
extensions = if ext.size > 0
[ext]
else
[".scss", ".sass"]
end
basenames = ["_#{base}", base]
filenames = []
basenames.each do |basename|
extensions.each do |extension|
filenames << "#{path}#{basename}#{extension}"
end
end
filenames
end
def mixins(item)
sass_tree = tree(item)
mixins = []
comment = nil
sass_tree.children.each do |child|
if child.is_a?(Sass::Tree::MixinDefNode)
child.comment = comment && Sass::Tree::CommentNode.clean(comment)
comment = nil
mixins << child
elsif child.is_a?(Sass::Tree::CommentNode)
comment ||= ""
comment << "\n" unless comment.empty?
comment << child.docstring
else
comment = nil
end
end
mixins.reject{|m| m.comment =~ /@private/}
end
def functions(item)
sass_tree = tree(item)
functions = []
comment = nil
sass_tree.children.each do |child|
if child.is_a?(Sass::Tree::FunctionNode)
child.comment = comment && Sass::Tree::CommentNode.clean(comment)
comment = nil
functions << child
elsif child.is_a?(Sass::Tree::CommentNode)
comment ||= ""
comment << "\n" unless comment.empty?
comment << child.docstring
else
comment = nil
end
end
functions.reject{|m| m.comment =~ /@private/}
end
def constants(item)
sass_tree = tree(item)
constants = []
comment = nil
sass_tree.children.each do |child|
if child.is_a?(Sass::Tree::VariableNode)
child.comment = comment && Sass::Tree::CommentNode.clean(comment)
comment = nil
child.name.tr!("_",'-')
constants << child
elsif child.is_a?(Sass::Tree::CommentNode)
comment ||= ""
comment << "\n" unless comment.empty?
comment << child.docstring
else
comment = nil
end
end
constants.reject{|c| c.comment =~ /@private/}
end
def all_constants
@items.inject([]) do |variables, item|
next variables unless item.identifier =~ %r{/reference}
next variables unless item[:stylesheet]
variables += constants(item).map{|v| [item, v] }
end
end
def all_mixins
@items.inject([]) do |all_mixins, item|
next all_mixins unless item.identifier =~ %r{/reference}
next all_mixins unless item[:stylesheet]
all_mixins += mixins(item).map{|m| [item, m] }
end
end
def all_functions
@items.inject([]) do |all_functions, item|
next all_functions unless item.identifier =~ %r{/reference}
next all_functions unless item[:stylesheet]
all_functions += functions(item).map{|f| [item, f] }
end
end
# Sass Only Functions from 3.1.10 (Brainy Betty)
# Not as elegant, but does the trick.
def sass_functions
[:rgb, :rgba, :hsl, :hsla, :red, :green, :blue, :hue, :saturation, :lightness, :alpha, :opacity, :opacify, :fade_in, :transparentize, :fade_out, :lighten, :darken, :saturate, :desaturate, :adjust_hue, :adjust_color, :scale_color, :change_color, :mix, :grayscale, :complement, :invert, :unquote, :quote, :type_of, :unit, :unitless, :comparable, :percentage, :round, :ceil, :floor, :abs, :length, :nth, :join, :append, :zip, :index, :if]
end
def example_items
@site.cached("examples") do
@items.select do |i|
i.identifier =~ /^\/examples/ && i[:example]
end
end
end
def item_for_function_name(function_name)
@items.detect do |item|
(item.identifier =~ %r{helpers}) && item[:documented_functions] && item[:documented_functions].include?(function_name)
end
end
def examples_for_item(item)
@site.cached("examples/#{item.identifier}") do
example_items.select do |i|
i[:framework] == item[:framework] &&
i[:stylesheet] == item[:stylesheet]
end
end
end
def examples(item, mixin = nil)
examples = examples_for_item(item)
if mixin
examples = examples.select {|i| i[:mixin] == mixin.name }
else
examples = examples.reject {|i| i[:mixin] }
end
examples.map{|i| i.reps.find{|r| r.name == :default}}
end
def format_doc(docstring)
if docstring
RDiscount.new(docstring).to_html
end
end
v0.12.2~dfsg/doc-src/content/ 0000755 0000000 0000000 00000000000 11771656742 014550 5 ustar root root v0.12.2~dfsg/doc-src/content/blog.haml 0000644 0000000 0000000 00000000453 11771656742 016340 0 ustar root root ---
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]
v0.12.2~dfsg/doc-src/content/screencast.haml 0000644 0000000 0000000 00000001466 11771656742 017554 0 ustar root root ---
title: Compass Documentation
crumb: Docs
body_id: home
---
%h1 Screencast Tutorial
%p
This screencast will walk you through getting set up,
learning Sass, and then how to use Compass to style a webpage.
v0.12.2~dfsg/doc-src/content/index.haml 0000644 0000000 0000000 00000007077 11771656742 016535 0 ustar root root ---
title: Compass Home
crumb: Home
body_id: home
layout: homepage
---
%h1#logo Compass
%h2 Compass is an open-source CSS Authoring Framework .
.overview
.info-box.compass
%h4 Why designers love Compass.
%ol
%li Experience cleaner markup without presentational classes.
%li It’s chock full of the web’s best reusable patterns .
%li It makes creating sprites a breeze.
%li Compass mixins make CSS3 easy.
%li Create beautiful typographic rhythms .
%li Download and create extensions with ease.
.info-box.sass
%h4 Compass uses Sass.
%p
Sass is an extension of CSS3 which
adds nested rules, variables, mixins, selector inheritance, and more.
Sass generates well formatted CSS and makes your stylesheets
easier to organize and maintain.
= render 'partials/ad'
%h3 Brilliant people use Compass, including these wildly talented folks:
%ul#featured_sites
%li
%a(href="http://status.heroku.com/")
%img(src="/images/sites/status.heroku.jpg")
%span.title Heroku Addons
%span.url http://status.heroku.com
%li
%a(href="http://sencha.com/products/touch/")
%img(src="/images/sites/sencha.jpg")
%span.title Sencha Touch
%span.url http://sencha.com/products/touch
%li
%a(href="http://caring.com/")
%img(src="/images/sites/caring.jpg")
%span.title Caring.com
%span.url http://caring.com
%li
%a(href="http://hubblesite.org/")
%img(src="/images/sites/hubblesite.jpg")
%span.title HubbleSite
%span.url http://hubblesite.org
%li
%a(href="http://dailymile.com/")
%img(src="/images/sites/dailymile.jpg")
%span.title DailyMile
%span.url http://dailymile.com
%li
%a(href="http://cofamilies.com/")
%img(src="/images/sites/cofamilies.jpg")
%span.title Cofamilies
%span.url http://cofamilies.com
%li
%a(href="http://jumpstartlab.com")
%img(src="/images/sites/jumpstartlab.jpg")
%span.title Jumpstart Lab
%span.url http://jumpstartlab.com
%li
%a(href="http://green.cals.cornell.edu/")
%img(src="/images/sites/cornell.jpg")
%span.title Cornell University - CALS
%span.url http://green.cals.cornell.edu
%li
%a(href="http://busyconf.com/")
%img(src="/images/sites/busyconf.jpg")
%span.title BusyConf
%span.url http://busyconf.com
%section.book
%h3 Save 37% on the Book: (Currently In Beta)
%p
%a(href="http://www.manning.com/netherland/")
%img(src="http://www.manning.com/netherland/netherland_cover150.jpg" alt="Sass & Compass in Action")
Compliments of Manning.com is a standing 37% discount on
Sass and Compass in Action .
Use promo code sasscomp37
at manning.com on the MEAP, eBook and pBook of Sass and
Compass in Action. All pBook purchases include free eFormats (PDF, ePub, and Kindle)
as soon as available.
%section.gui
%h3 Hate the Command Line?
%a(href="http://compass.handlino.com/")
%img(src="/images/compass.app.png")
%p
Buy Compass.app
for Windows and Mac for just $10.
%p.note
Note: Compass.app is a product of Handlino, Inc but
30% of all proceeds go to Compass's charity of choice: UMDF.org .
v0.12.2~dfsg/doc-src/content/help/ 0000755 0000000 0000000 00000000000 11771656742 015500 5 ustar root root v0.12.2~dfsg/doc-src/content/help/index.haml 0000644 0000000 0000000 00000004772 11771656742 017464 0 ustar root root ---
title: Compass Help
crumb: Help
classnames:
- help
- getting-started
layout: site
---
%article
%h1 Getting started with Compass
:markdown
Compass is an open-source CSS authoring framework which uses the [Sass stylesheet
language](http://sass-lang.com) to make writing stylesheets powerful and easy. If you're
not familiar with Sass, you can take a look at [these simple tutorials](http://sass-lang.com/tutorial.html)
to get caught up.
An introduction to Compass from Lorin Tackett on Vimeo .
:markdown
## Installing Compass
Compass is a tool that runs on the command line. On any system with ruby installed, open your terminal and type:
gem install compass
This will install Compass and Sass too. If you want to verify that compass is installed:
compass version
## Manual Setup
compass create /path/to/project
cd /path/to/project
compass watch
Now you can edit the `*.scss` files in the `sass` directory with the text editor of your choice.
the `compass watch` process will automatically compile your them into css in the stylesheets directory whenever they change.
The files in the `sass` directory are yours and you can change them, delete them, add new ones, etc.
## Manual setup using the Blueprint Framework
When starting a project from scratch:
compass create /path/to/project --using blueprint
When installing into an existing project:
cd /path/to/project
compass install blueprint
To read more about using the Blueprint framework with Compass, [see the docs](/reference/blueprint/)
## Rails Setup
compass init rails /path/to/myrailsproject
Using Blueprint with Rails:
compass init rails /path/to/myrailsproject --using blueprint
v0.12.2~dfsg/doc-src/content/help/tutorials/ 0000755 0000000 0000000 00000000000 11771656742 017526 5 ustar root root v0.12.2~dfsg/doc-src/content/help/tutorials/spriting/ 0000755 0000000 0000000 00000000000 11771656742 021365 5 ustar root root v0.12.2~dfsg/doc-src/content/help/tutorials/spriting/magic-selectors.markdown 0000644 0000000 0000000 00000003707 11771656742 026221 0 ustar root root ---
title: Sprite Magic Selectors
layout: tutorial
crumb: Magic Selectors
classnames:
- tutorial
---
# Sprite Tutorial
<%= sprite_tutorial_links %>
## 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:
* `my-buttons/glossy.png`
* `my-buttons/glossy_hover.png`
* `my-buttons/glossy_active.png`
* `my-buttons/glossy_target.png`
Now in our sass file we add:
@import "my-buttons/*.png";
a {
@include my-buttons-sprite(glossy)
}
And your stylesheet will compile to:
.my-buttons-sprite, a {
background: url('/my-buttons-sedfef809e2.png') no-repeat;
}
a {
background-position: 0 0;
}
a:hover, a.glossy_hover, a.glossy-hover {
background-position: 0 -40px;
}
a:target, a.glossy_target, a.glossy-target {
background-position: 0 -60px;
}
a:active, a.glossy_active, a.glossy-active {
background-position: 0 -20;
}
Alternatively you can use the `@include all-my-buttons-sprites;` after the import and get the following output:
.my-buttons-sprite, .my-buttons-glossy {
background: url('/my-buttons-sedfef809e2.png') no-repeat;
}
.my-buttons-glossy {
background-position: 0 0;
}
.my-buttons-glossy:hover, .my-buttons-glossy.glossy_hover, .my-buttons-glossy.glossy-hover {
background-position: 0 -40px;
}
.my-buttons-glossy:target, .my-buttons-glossy.glossy_target, .my-buttons-glossy.glossy-target {
background-position: 0 -60px;
}
.my-buttons-glossy:active, .my-buttons-glossy.glossy_active, .my-buttons-glossy.glossy-active {
background-position: 0 -20px;
}
## Disabling
To disable this feature set `$disable-magic-sprite-selectors` to true before calling the sprite mixin
a {
$disable-magic-sprite-selectors:true;
@include my-buttons-sprite(glossy)
}
v0.12.2~dfsg/doc-src/content/help/tutorials/spriting/sprite-layouts.markdown 0000644 0000000 0000000 00000002425 11771656742 026140 0 ustar root root ---
title: Sprite layouts
layout: tutorial
crumb: Sprite layouts
classnames:
- tutorial
---
# Sprite Tutorial
<%= sprite_tutorial_links %>
## Sprite Layouts
Example:
$icon-layout:horizontal;
@import "icon/*.png";
$dropcap-layout:diagonal
@import "dropcap/*.png";
## Vertical
@import "mysprite/*.png";
Example Output:

## Horizontal
$mysprite-layout:horizontal;
@import "mysprite/*.png";
Example Output:

Notes:
* Responds to the same configuration options that vertical has.
## Diagonal
$mysprite-layout:diagonal;
@import "mysprite/*.png";
Example Output:

Notes:
* Configuration options do not effect the layout
* This is incredibly resource intensive on the browser
## Smart
$mysprite-layout:smart;
@import "mysprite/*.png";
Example Output:

Notes:
* Configuration options do not effect the layout
* Most efficient use of browser memory
Example icons from [Open Icon Library](http://openiconlibrary.sourceforge.net/) and are released under public domain v0.12.2~dfsg/doc-src/content/help/tutorials/spriting/customization-options.markdown 0000644 0000000 0000000 00000004630 11771656742 027535 0 ustar root root ---
title: Sprite Customization
layout: tutorial
crumb: Customization
classnames:
- tutorial
---
#Sprite Tutorial
<%= sprite_tutorial_links %>
## Customization Options
### Options per Sprite Map
When constructing the sprite map, the entire sprite map and it's associated stylesheet
can be configured in the following ways. Each option is specified by setting a [configuration
variable](/help/tutorials/configurable-variables/) before importing the sprite. The variables
are named according to the name of the folder containing the sprites. In the examples below
the sprites were contained within a folder called `icon`.
* `$-spacing` -- The amount of transparent space, in pixels, around each sprite.
Defaults to `0px`. E.g. `$icon-spacing: 20px`.
* `$-repeat` -- Wether or not each sprite should repeat along the x axis. Defaults
to `no-repeat`. E.g. `$icon-repeat: repeat-x`.
* `$-position` -- The position of the sprite in the sprite map along the x-axis. Can
be specified in pixels or percentage of the sprite map's width. `100%` would cause the
sprite to be on the right-hand side of the sprite map. Defaults to `0px`.
E.g. `$icon-position: 100%`.
* `$-sprite-dimensions` -- Whether or not the dimensions of the sprite should be
included in each sprite's CSS output. Can be `true` or `false`. Defaults to `false`.
* `$-sprite-base-class` -- The base class for these sprites. Defaults to `.-sprite`.
E.g. `$icon-sprite-base-class: ".action-icon"`
* `$-clean-up` -- Whether or not to removed the old sprite file when a new one is created. Defaults to true
### Options per Sprite
When constructing the sprite map, each sprite can be configured in the following ways:
* `$--spacing` -- The amount of transparent space, in pixels, around the sprite. Defaults
to the sprite map's spacing which defaults to `0px`. E.g. `$icon-new-spacing: 20px`.
* `$--repeat` -- Wether or not the sprite should repeat along the x axis. Defaults
to the sprite map's repeat which defaults to `no-repeat`. E.g. `$icon-new-repeat: repeat-x`.
* `$--position` -- The position of the sprite in the sprite map along the x-axis. Can
be specified in pixels or percentage of the sprite map's width. `100%` would cause the
sprite to be on the right-hand side of the sprite map. Defaults to the sprite map's
position value which defaults to `0px`. E.g. `$icon-new-position: 100%`.
v0.12.2~dfsg/doc-src/content/help/tutorials/configurable-variables.haml 0000644 0000000 0000000 00000002070 11771656742 024776 0 ustar root root ---
title: Working with Configurable Variables
layout: tutorial
classnames:
- tutorial
---
:markdown
Working with Configurable Variables
===================================
There are two ways of defining a variable in Sass. The first, most common, approach is
simple assignment. For example:
$my-constant : #fedcba
The second approach is called guarded assignment. In this case, the constant is only
set if it does not already have a value. For example:
$my-constant : #fedcba !default
Many compass modules use guarded assignment to allow you to set defaults for that module.
In order for these configurable variables to work correctly, you must set the variables
*before* you import the module. For example:
$blueprint-grid-columns = 12
@import "blueprint/grid"
Because of this, it is common to have one or more partials
that set the constants first and get imported before any other
imports in your stylesheet(s). This is commonly referred to as
the "base" stylesheet and is usually named `_base.scss` or `_base.sass`. v0.12.2~dfsg/doc-src/content/help/tutorials/extending.markdown 0000644 0000000 0000000 00000004303 11771656742 023257 0 ustar root root ---
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 two methods `construct_sprite`, and `save(filename)`
Once inside the class 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)
### Configuration
To enable your sprite engine from the config file set
sprite_engine = :
The example below will load `Compass::SassExtension::Sprites::ChunkyPngEngine.new(width, height, images)`
sprite_engine = :chunky_png
### Class Definition
module Compass
module SassExtensions
module Sprites
class ChunkyPngEngine < Compass::SassExtensions::Sprites::Engine
def construct_sprite
#do something
end
def save(filename)
#save file
end
end
end
end
end
## 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. v0.12.2~dfsg/doc-src/content/help/tutorials/blueprint.haml 0000644 0000000 0000000 00000004155 11771656742 022402 0 ustar root root ---
title: Blueprint Framework
layout: tutorial
classnames:
- tutorial
---
%h1= item[:title]
%h2#semantic-blueprint Semantic Blueprint Template
%p
The semantic template assumes that you will write your own selectors
and apply the blueprint mixins to them to achieve a design that does
not use any presentational classes. This is the preferred approach for
using Blueprint with compass, but if you want a more traditional
approach, consider the Basic
Blueprint Template .
%h2 Getting Started with Semantic Blueprint
%p
Once you get Compass installed, you are ready to create a new
blueprint project. In your terminal enter the following commands:
%pre.shell
%code
%span.prompt<> $
compass create my_project --using blueprint/semantic
%br>
%span.prompt<> $
cd my_project
%hr
%h2#basic-blueprint Basic Blueprint Template
%p
The basic template is the starting point for working with blueprint
in compass. It can be used to generate CSS that is virtually identical
to the Blueprint CSS. If all you want is an easy way to customize the
grid or typography, you’ll be using these libraries. Since the basic
library is built on top of the blueprint modules, customization will
require that you refer to the particular module you want to customize.
%p
If you want to get started with the Basic Template because it feels
more familiar to you, that's fine. It's very easy to transition to
semantic selectors when you're ready.
%h2 Getting Started with Basic Blueprint
%p
Once you get Compass installed, you are ready to create a new
blueprint project. In your terminal enter the following commands:
%pre.shell
%code
%span.prompt<> $
compass create my_project --using blueprint/basic
%h2 Blueprint Plugins
%p
The core blueprint plugins are available, but must be installed
into your project. Follow the instructions below:
%ul
%li
%a(href="/reference/blueprint/buttons/") Blueprint Buttons
%li
%a(href="/reference/blueprint/link_icons/") Blueprint Link Icons
v0.12.2~dfsg/doc-src/content/help/tutorials/configuration-reference.markdown 0000644 0000000 0000000 00000041465 11771656742 026107 0 ustar root root ---
title: Configuration Reference
layout: tutorial
classnames:
- tutorial
---
# Configuration Reference
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.
## Basic format
Most configuration properties are a simple assignment to a configuration property.
For example:
css_dir = "stylesheets"
Most configuration properties have a value that is a “basic” type. There are three
basic types that can be set to a property:
* **String** – Text is surrounded by either single or double quotes.
E.g. `"this is a string"`
* **Symbol** – A symbol starts with a colon and has no spaces in it.
Symbols are used to represent values where the set of possible values are limited.
E.g. `:foo` or `:foo_bar_baz`
* **Boolean** – `true` or `false`
There are two kinds of composite values:
* **Array** – An Array is a comma delimited list of basic values surrounded by
square brackets. E.g. `["one", "two", "three"]`.
* **Hash** – A Hash is an association or mapping of one value to another.
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"}`
## Comments
Use the hash sign `#` to comment out everything from the hash sign to the end
of the line.
## Import Note for Windows Users
The backslash character (`\`) is a special character in a string delimited by
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"`.
## Loading Compass Plugins
Compass relies on the ruby `require` mechanism to load other libraries of code.
To load a compass-compatible plugin, simply require it at the top of your
configuration file. If you used the -r option to access another library at project
creation time, this will already be set up for you.
Example:
require 'ninesixty'
require 'susy'
## 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.
## Inspecting Configuration Settings passed via the Command Line
When using the compass command line, configuration options that you set on the
command line can be inspected within the configuration file. For instance,
if you set the environment:
$ compass compile -e production --force
Then you can inspect the value like so:
output_style = (environment == :production) ? :compressed : :expanded
Values that are not set on the CLI will be `nil` even though they will have a default value
later on.
## Configuration Properties
Property Name
Type
Description
project_type
Symbol
Can be :stand_alone
or
:rails
. Defaults to :stand_alone
.
environment
Symbol
The environment mode.
Defaults to :production
, can also be :development
project_path
String
Not needed in :stand_alone
mode
where it can be inferred by context. Sets the path to the root of the project.
http_path
String
The path to the project when running within the
web server. Defaults to "/"
.
css_dir
String
The directory where the css stylesheets are kept.
It is relative to the project_path
.
Defaults to "stylesheets"
.
css_path
String
The full path to where css stylesheets are kept.
Defaults to <project_path>/<css_dir>
.
http_stylesheets_path
String
The full http path to stylesheets on the web server. Defaults to http_path + "/" + css_dir
.
sass_dir
String
The directory where the sass stylesheets are kept.
It is relative to the project_path
. Defaults to "sass"
.
sass_path
String
The full path to where sass stylesheets are kept.
Defaults to <project_path>/<sass_dir>
.
images_dir
String
The directory where the images are kept.
It is relative to the project_path
.
Defaults to "images"
.
images_path
String
The full path to where images are kept.
Defaults to <project_path>/<images_dir>
.
http_images_path
String
The full http path to images on the web server.
Defaults to http_path + "/" + images_dir
.
generated_images_dir
String
The directory where generated images are kept.
It is relative to the project_path
.
Defaults to the value of images_dir
.
generated_images_path
String
The full path to where generated images are kept.
Defaults to the value of <project_path>/<generated_images_dir>
.
http_generated_images_path
String
The full http path to generated images on
the web server. Defaults to http_path + "/" + generated_images_dir
.
javascripts_dir
String
The directory where the javascripts are kept.
It is relative to the project_path
. Defaults to
"javascripts"
.
javascripts_path
String
The full path to where javascripts are kept.
Defaults to <project_path>/<javascripts_dir>
.
http_javascripts_path
String
The full http path to javascripts on the web server.
Defaults to http_path + "/" + javascripts_dir
.
output_style
Symbol
The output style for the compiled css.
One of: :nested
, :expanded
, :compact
,
or :compressed
.
relative_assets
Boolean
Indicates whether the compass helper functions
should generate relative urls from the generated css to assets, or absolute urls
using the http path for that asset type.
additional_import_paths
Array of Strings
Other paths on your system from which to import
sass files. See the add_import_path
function for a simpler
approach.
disable_warnings
Boolean
Set this to true to silence deprecation warnings.
sass_options
Hash
These options are passed directly to the
Sass compiler. For more details on the format of sass options, please read the
sass options documentation .
line_comments
Boolean
Indicates whether line comments should be added
to compiled css that says where the selectors were defined. Defaults to false
in production mode, true in development mode.
preferred_syntax
Symbol
Can be :scss
or :sass
.
Defaults to :scss
.
fonts_dir
String
The directory where the font files are kept.
Standalone projects will default to <css_dir>/fonts
.
Rails projects will default to "public/fonts"
.
fonts_path
String
The full path to where font files are kept.
Defaults to <project_path>/<fonts_dir>
.
http_fonts_path
String
The full http path to font files on the web server.
http_fonts_dir
String
The relative http path to font files on the web server.
sprite_engine
Symbol
Defaults to :chunky_png
chunky_png_options
Hash
Defaults to {:compression => Zlib::BEST_COMPRESSION}
. See the chunky_png wiki for more information
sprite_load_path
Array
Defaults to [images_path]
## Configuration Functions
**`add_import_path`** – Call this function to add a path to the list of sass import
paths for your compass project. E.g.:
add_import_path "/Users/chris/work/shared_sass"
---
**`asset_host`** – Pass this function a block of code that will define the asset
host url to be used. The block must return a string that starts with a protocol
(E.g. http). The block will be passed the root-relative url of the asset.
For example, this picks one of four asset hosts numbered 0-3, depending on
the name of the asset:
asset_host do |asset|
"http://assets%d.example.com" % (asset.hash % 4)
end
By default there is no asset host used. When `relative_assets` is true
the asset host configuration is ignored.
---
**`asset_cache_buster`** – Pass this function a block of code that defines the
cache buster strategy to be used. The block must return nil, a string or a hash.
If the returned value is a hash the values of :path and/or :query is used to generate
a cache busted path to the asset. If a string value is returned, it is added as a query string.
The returned values for query strings must not include the starting `?`.
The block will be passed the root-relative url of the asset.
If the block accepts two arguments, it will also be passed a path
that points to the asset on disk — which may or may not exist.
# Increment the deploy_version before every release to force cache busting.
deploy_version = 1
asset_cache_buster do |http_path, real_path|
if File.exists?(real_path)
File.mtime(real_path).strftime("%s")
else
"v=#{deploy_version}"
end
end
Busting the cache via path:
asset_cache_buster do |path, real_path|
if File.exists?(real_path)
pathname = Pathname.new(path)
modified_time = File.mtime(real_path).strftime("%s")
new_path = "%s/%s-%s%s" % [pathname.dirname, pathname.basename(pathname.extname), modified_time, pathname.extname]
{:path => new_path, :query => nil}
end
end
To disable the asset cache buster:
asset_cache_buster :none
---
**`watch`** -- React to changes to arbitrary files within your project. Can be invoked
more than once. Example:
watch "images/**/*" do |project_dir, relative_path|
if File.exists?(File.join(project_dir, relative_path))
puts "File size of #{relative_path} is: #{File.size(File.join(project_dir, relative_path))}"
end
end
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.
## 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 © 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 v0.12.2~dfsg/doc-src/content/help/tutorials/integration.markdown 0000644 0000000 0000000 00000005757 11771656742 023633 0 ustar root root ---
title: Application Integration
layout: tutorial
crumb: Application Integration
classnames:
- tutorial
---
# Application Integration
## Ruby on Rails
### Rails 3.1
Just add compass to your Gemfile like so:
gem 'compass'
Also checkout this [gist](https://gist.github.com/1184843)
### Rails 3
compass init rails /path/to/myrailsproject
### Rails 2.3
rake rails:template LOCATION=http://compass-style.org/rails/installer
## Sinatra
require 'compass'
require 'sinatra'
require 'haml'
configure do
set :haml, {:format => :html5, :escape_html => true}
set :scss, {:style => :compact, :debug_info => false}
Compass.add_project_configuration(File.join(Sinatra::Application.root, 'config', 'compass.rb'))
end
get '/stylesheets/:name.css' do
content_type 'text/css', :charset => 'utf-8'
scss(:"stylesheets/#{params[:name]}" )
end
get '/' do
haml :index
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.rb' # when using Compass > 0.10
Compass.configuration.parse 'compass.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 = File.expand_path(File.join(File.dirname(__FILE__), '..'))
css_dir = "output/stylesheets"
sass_dir = "content/stylesheets"
images_dir = "assets/images"
javascripts_dir = "assets/javascripts"
fonts_dir = "assets/fonts"
http_javascripts_dir = "javascripts"
http_stylesheets_dir = "stylesheets"
http_images_dir = "images"
http_fonts_dir = "fonts"
To filter the stylesheets using Sass and Compass, call the sass filter with Sass engine options taken from Compass, like this:
compile '/stylesheets/*' do
filter :sass, sass_options.merge(:syntax => item[:extension].to_sym)
end
### Nanoc Projects using the formal approach
* [This Site](https://github.com/chriseppstein/compass/tree/master/doc-src)
v0.12.2~dfsg/doc-src/content/help/tutorials/upgrading.markdown 0000644 0000000 0000000 00000002207 11771656742 023253 0 ustar root root ---
title: Upgrading Compass
layout: tutorial
crumb: Upgrading
classnames:
- tutorial
---
Upgrading Compass
=================
So a new version of compass is out and you'd like to upgrade, but you're not sure how.
Well you've come to the right place.
There's a few things you should know.
1. **What is my currently installed compass version?**
You can find out your compass version by running `compass version`
on the command line.
2. **What is the latest compass version?**
The latest version of compass is proudly displayed [here](https://rubygems.org/gems/compass).

3. **What is the latest preview release?** There's not always a preview release,
but when there is, you can see the latest version [here](https://rubygems.org/gems/compass)

4. Compass keeps a very detailed list of changes in every release. You can read
the [changelog](/CHANGELOG/) to get up to speed on what has changed.
If you're scared to upgrade, that's silly. Read [this](./im-scared/). v0.12.2~dfsg/doc-src/content/help/tutorials/spriting.markdown 0000644 0000000 0000000 00000015056 11771656742 023140 0 ustar root root ---
title: Spriting with Compass
layout: tutorial
crumb: Spriting
classnames:
- tutorial
---
# Spriting with Compass
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.
## Sprite Tutorial Contents
<%= sprite_tutorial_links(true) %>
## Setup
For this tutorial, let's imagine that in your project's image folder there are four icons:
* `images/my-icons/new.png`
* `images/my-icons/edit.png`
* `images/my-icons/save.png`
* `images/my-icons/delete.png`
Each is an icon that is 32px square.
## Basic Usage
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
The simplest way to use these icon sprites is to let compass give you a class for each sprite:
@import "my-icons/*.png";
@include all-my-icons-sprites;
And you'll get the following CSS output:
.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
.my-icons-delete { background-position: 0 0; }
.my-icons-edit { background-position: 0 -32px; }
.my-icons-new { background-position: 0 -64px; }
.my-icons-save { background-position: 0 -96px; }
You can now apply the `my-icons-XXX` classes to your markup as needed.
Let's go over what happened there. The import statement told compass to [generate a
stylesheet that is customized for your sprites](https://gist.github.com/729507). This
stylesheet is [magic](#magic-imports), it is not written to disk, and it can be customized
by setting configuration variables before you import it. See the section below on
[Customization Options](customization-options). The goal of this stylesheet is to provide a
simple naming convention for your sprites so that you they are easy to remember and use. You
should never have to care what the is name of the generated sprite map, nor where a sprite
is located within it.
## Nested Folders
****Note**: The use of `orange` is only for this example, "icon" represents the folder name that contains your sprites.
Sprites stored in a nested folder will use the last folder name in the path as the sprite name.
Example:
@import "themes/orange/*.png";
@include all-orange-sprites;
## Selector Control
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
If you want control over what selectors are generated, it is easy to do. In this example,
this is done by using the magic `my-icons-sprite` mixin. Note that the mixin's name is dependent
on the name of the folder in which you've placed your icons.
@import "my-icons/*.png";
.actions {
.new { @include my-icons-sprite(new); }
.edit { @include my-icons-sprite(edit); }
.save { @include my-icons-sprite(save); }
.delete { @include my-icons-sprite(delete); }
}
And your stylesheet will compile to:
.my-icons-sprite,
.actions .new,
.actions .edit,
.actions .save,
.actions .delete { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
.actions .new { background-position: 0 -64px; }
.actions .edit { background-position: 0 -32px; }
.actions .save { background-position: 0 -96px; }
.actions .delete { background-position: 0 0; }
## Sass Functions
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
Getting the image dimensions of a sprite
You can get a unit value by using the magical dimension functions `-sprite-height` and `-sprite-width`
If you are looking to just return the dimensions see the [docs](/reference/compass/utilities/sprites/base/#mixin-sprite-dimensions)
Example:
@import "icon/*.png";
$box-padding: 5px;
$height: icon-sprite-height(some_icon);
$width: icon-sprite-width(some_icon);
.somediv {
height:$height + $box-padding;
width:$width + $box-padding;
}
## Magic Imports
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
As noted above, compass will magically create sprite stylesheets for you. Some people like
magic, some people are scared by it, and others are curious about how the magic works. If
you would like to avoid the magic, you can use compass to generate an import for you. On the
command line:
compass sprite "images/my-icons/*.png"
This will create file using your project's preferred syntax, or you can specify the
output filename using the `-f` option and the syntax will be inferred from the extension.
If you do this, you'll need to remember to regenerate the import whenever you rename, add,
or remove sprites.
Using the magic imports is recommended for most situations. But there are times when you
might want to avoid it. For instance, if your sprite map has more than about 20 to 30
sprites, you may find that hand crafting the import will speed up compilation times. See
the section on [performance considerations](#performance) for more details.
## Performance Considerations
Reading PNG files and assembling new images and saving them to disk might have a non-trivial
impact to your stylesheet compilation times. Especially for the first compile. Please keep
this in mind.
## Large numbers of sprites
The magic stylesheet can get very large when there are large numbers of sprites. 50 sprites
will cause there to be over 150 variables created and then passed into the
`sprite-map` [function](/reference/compass/helpers/sprites/#sprite-map).
You may find that customizing the sprite function call to only pass those values that you
are overriding will provide a small performance boost.
See a [concrete example](https://gist.github.com/747970).
## Oily PNG
Compass generates PNG files using a pure-ruby library called
[`chunky_png`](https://github.com/wvanbergen/chunky_png). This library can be made faster by
installing a simple C extension called [`oily_png`](https://github.com/wvanbergen/oily_png).
Add it to your `Gemfile` if you have one in your project:
gem 'oily_png'
Or install the Rubygem:
gem install oily_png
Compass will automatically detect its presence.
v0.12.2~dfsg/doc-src/content/help/tutorials/extensions.markdown 0000644 0000000 0000000 00000037567 11771656742 023513 0 ustar root root ---
title: Creating Compass Extensions
layout: tutorial
classnames:
- tutorial
---
Compass Extensions
==================
Compass, at its heart, is a framework upon which sass-based stylesheet frameworks
are built. It provides the tools for building, installing and using reusable
stylesheets that provide anything from full-fledged layout frameworks to designs
for widgets or even full page designs. All using the power of sass to keep the
semantic meaning of the html pages clear and free of design details.
This document describes the compass extension toolset so that you can build
your own compass extension.
Basic Extension Layout
----------------------
my_extension
|
|- stylesheets (this directory will be on the sass load path)
| |
| |- my_extension (not technically required, but it's good to scope imports by the name of the extension)
| | |
| | |- _module_one.sass (this file would be imported using @import my_extension/module_one.sass
)
| | |- _module_two.sass (this file would be imported using @import my_extension/module_two.sass
)
| | |- ...
| |
| |- _my_extension.sass (This file will import the entire extension using @import my_extension.sass
)
|
|- templates (this is where templates/patterns go)
| |
| |- project (this should be provided if you'd like people to be able to base their project on the extension)
| | |
| | |- manifest.rb (this file should declare the contents of the template)
| | |- screen.sass (this would be the main stylesheet, importing from your extension and demonstrating its use)
| | |- print.sass (this file would set up basic print styles)
| | |- ie.sass (if you want, you can provide custom styles for IE)
| |
| |- some_pattern
| |
| |- manifest.rb
| |- some.sass (some sass is probably in order, always import from the extension library as much as possible)
| |- some_script.js (yes, you can provide javascript code)
| |- some_image.png (and images)
| |- some_content.html.haml (and even html and haml)
| |- some_other_file.txt (and other arbitrary files)
|
|- lib (optional ruby code)
|
|- my_extension.rb (this code can register your framework if you deviate from conventions and require sass extensions, etc.)
|
|- my_extension
|
|- sass_extensions.rb (this is the standard location to place sass functions)
Names in bold are part of the extension naming convention.
Generating an Extension
-----------------------
If you want a leg up to get started working on your extension,
you can use compass to generate an extension with the following command:
compass create my_extension --using compass/extension
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
-----------------------
### Library File Location
The extension library file referenced above as `my_extension/lib/my_extension.rb`
can actually be stored at any of the following three locations:
1. `my_extension/compass_init.rb`
2. `my_extension/lib/my_extension.rb` (NOTE: You must use this one if you're distributing as a rubygem.)
3. `my_extension/my_extension.rb`
The first of those locations found (in the above order) will be loaded.
The compass_init.rb file takes priority, so that extensions that want to work
differently as compass extensions than they do as normal ruby libraries,
have a way of targeting compass.
### Stylesheet and Template Locations
If you'd like to store your stylesheets and/or templates in a non-standard location within your extension,
you must provide a library file and register the extension explicitly like so:
base_directory = File.join(File.dirname(__FILE__), '..')
stylesheets_dir = File.join(base_directory, 'my', 'stylesheets')
templates_dir = File.join(base_directory, 'my', 'templates')
Compass::Frameworks.register('my_extension', :stylesheets_directory => stylesheets_dir, :templates_directory => templates_dir)
If you're following the standard naming convention, but the stylesheet and
template directories are not at the top level, you can just do this instead:
# path from the library file to where you're keeping your compass stuff.
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
---------------------
The following are not required, but are standards that your framework
should attempt to adhere to unless there's a good reason not to do so.
1. Have a single import for your framework.
2. Break up your framework into modules so that people can import just smaller
pieces for faster load times when they're not using everything.
3. Use partials (files starting with an underscore) for stylesheets that are meant
to be imported. If you do not Sass will generate css
files for your libraries in some configurations.
4. Provide a project template. If you do not, your project should only be
providing widgets or page designs, etc.
Building a Template (a.k.a. Pattern)
====================================
Manifest Files
--------------
The manifest file declares the template contents and tells compass information
about the files in the template.
### An Example Manifest File
description "My awesome compass plugin."
stylesheet 'screen.sass', :media => 'screen, projection'
stylesheet 'partials/_base.sass'
stylesheet 'print.sass', :media => 'print'
stylesheet 'ie.sass', :media => 'screen, projection', :condition => "lt IE 8"
image 'grid.png'
javascript 'script.js'
html 'welcome.html.haml', :erb => true
file 'README'
help %Q{
This is a message that users will see if they type
compass help my_extension
You can use it to help them learn how to use your extension.
}
welcome_message %Q{
This is a message that users will see after they install this pattern.
Use this to tell users what to do next.
}
You may also see some real manifest files here:
* [blueprint](http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/templates/project/manifest.rb)
* [compass-css-lightbox](http://github.com/ericam/compass-css-lightbox/blob/master/templates/project/manifest.rb)
### Manifest Declarations
**Easy Mode:** If you just have some basic files and nothing fancy going on, simply place this line in your manifest:
discover :all
If the file is missing `discover :all` is the default
This will cause compass to find all the files in your template and use the files' extension to determine where they should go. Alternatively, you can request that compass only discover files of a certain type. For example, the following will only discover javascript and image assets, you could then declare other file types on your own.
discover :javascripts
discover :images
The following types may be discovered: `:stylesheets`, `:images`, `:javascripts`, `:fonts`, `:html`, `:files`, and `:directories`
**Normal Mode:** There are seven kinds of manifest declarations:
1. `stylesheet` - Declares a sass file.
2. `image` - Declares an image.
3. `javascript` - Declares a javascript file.
4. `font` - Declares a font file.
5. `html` - Declares an html file.
6. `file` - Declares a random file.
7. `directory` - Declares a directory should be created.
All declarations take the path to the file as their first argument. Note that the
normal slash `/` can and should be used in a manifest. Compass will take care of
the cross platform issues. The path to the file will be reproduced in the user's
project, so please keep that in mind when creating folders. The location where
files are going to be installed is dictated by the user's project configuration,
however, a template can place things into subdirectories relative to those locations.
Common options:
* `:erb` - When set to true, the file will be processed via the ERB templating language.
See the "Advanced Manifests" section below for more details.
* `:to` - The location where the file should be installed relative to the
type-specific location.
* `:like` - Most often used with a `file` declaration, this option allows you to
install into the location of another manifest type (and also :css). E.g. :like => :css
Stylesheet options:
* `:media` - this is used as a hint to the user about the media attribute of the
stylesheet link tag.
* `:condition` - this is used to hint the user that a conditional comment should be
used to import the stylesheet with the given condition.
Directory options:
* `:within` - where the directory should be created. If omitted, the directory
will be relative to the project directory. Can be one of: the following
* `sass_dir`
* `javascripts_dir`
* `fonts_dir`
* `images_dir`
HTML files:
You can provide html as haml or as plain html. If you provide haml, the haml will be
converted to html when it is installed, unless the project allows haml files.
Providing html files is usually done to demonstrate how to use a more complicated
design and to get the user started off with working product.
### Advanced Manifests and Templates
* ERB Processing - This can be used to customize the contents of the file in an
extension template. The template will be processed in the context of a
TemplateContext instance, which gives you access to the full project configuration
information as well as the command line options. Since it's unlikely many templates
will need this functionality, I leave it as an exercise of the user to figure it out
and if they can't to contact the compass-devs mailing list for assistance.
* `no_configuration_file!` - calling this method within the manifest will tell
the installer to skip the creation of a configuration file.
* `skip_compilation!` - calling this method within the manifest will tell the
installer to skip compilation of sass files to css.
Distributing Extensions as Ruby Gems
------------------------------------
Rubygems is a flexible, easy-to-use system for distributing ruby software.
If you have any questions about rubygems, I suggest that you start looking
for help [here](http://help.rubygems.org/).
The big advantages of using rubygems to distribute your extension is that
it allows your extension to be a dependency for other projects and that each
install is versioned, which makes supporting your extension easier.
Tips for Developing Extensions
------------------------------
* If you're developing a simple extension, you may find it convenient to place
your extension within an existing compass project in the extension folder.
* Never specify an extension in your imports as this can cause issue when the
syntax of a file changes.
Packaging an Extension as a RubyGem
-----------------------------------
You do not _have_ to make your extension a ruby gem. But if you do, you get some benefits you would not have otherwise:
* Releases
* Versions
* A standard way of asking your users what release they are using.
* Better integration with ruby-based projects via tools like
[Bundler](http://gembundler.com/).
### Creating a Gem
Before you begin, please ensure you have gem version `1.3.6` or greater. `gem -v` will tell you the currently installed version.
1. Define your gemspec file at the top of your extension. Here's [an example of
one](http://github.com/ericam/compass-css-lightbox/blob/master/css-lightbox.gemspec).
The gemspec should have the same name as your gem.
2. Register your framework by adding `lib/my_extension.rb` and registering it:
require 'compass'
extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
Compass::Frameworks.register('my_extension', :path => extension_path)
This is how compass knows where to find your extension's files when a user requires it.
For more options, go back up and read about [Stylesheet and Template Locations](#registration).
3. Build a gem: `gem build my_extension.gemspec`. This will build your gem file and
add the current version to the name. E.g. `my_extension-0.0.1.gem`
4. Test your gem by installing it locally: `gem install my_extension-0.0.1.gem`
### Releasing a Gem
The ruby community is nice and will host your gem files for free. To release your gem:
gem push my_extension-0.0.1.gem
Your ruby gem will be hosted on [rubygems.org](http://rubygems.org/).
Please familiarize yourself with [their documentation](http://rubygems.org/pages/gem_docs).
Installing Extensions
=====================
How extensions are installed varies according to the decisions you make about
how you are packaging and releasing your gem. There will be a standard approach
in a future release, but until then, it is suggested that you provide your users
with succinct installation instructions.
Installing Extensions Released as RubyGems
------------------------------------------
When creating a new project:
sudo gem install my_extension
compass create my_project -r my_extension --using my_extension
The `-r` option is annoying and will not be needed in a future version of compass.
But for now, it tells compass to find and load the extension from the local
rubygems repository.
To install via rubygems into an existing project:
gem install my_extension
# edit the project configuration file and add:
require 'my_extension'
compass install my_extension
Or if you have other patterns besides the project pattern:
compass install my_extension/pattern
Installing Ad-hoc Extensions
----------------------------
Ad-hoc extensions are any set of files and folders following the basic conventions
described above. They could be installed via a zip file or by checking the code out
from source control. Ad-hoc extensions will be automatically found in the extensions
directory of a project and registered for import without needing a `require` statement
in the compass configuration file.
Currently, ad-hoc extensions can only be installed into the extensions directory
of an existing compass project. This will be fixed in a future release of compass.
Until then, you may need to instruct your users to create a bare project to get started:
compass create my_project --bare
This will create a project directory, a sass directory (with no sass files) and a configuration file.
The standard location for extensions is `project_root/extensions` for stand-alone
projects and `project_root/vendor/plugins/compass_extensions` for rails projects.
Additionally, the user may customize their extensions directory by setting
`extensions_dir` in their compass configuration file.
To install into an existing project, simply place the extension into a project's
extension directory. This could be done via a git clone or by extracting an archive.
The name of the directory it creates should be the name of the extension. The project
will now have access to the extension.
Verifying that an Extension is Installed Correctly
--------------------------------------------------
The user can verify that they have access to your extension by typing:
compass help
And they should see the framework in the list of available frameworks.
Alternatively, if you've provided a `help` message in the manifest, then
the user can type:
compass help my_extension
- or -
compass help my_extension/pattern_name
*Note:* The user might need to provide the `-r` option to help in order for compass to
find a gem-based extension before a project exists. This is not needed for
extensions installed into the extensions directory, or if the project is already
required in the current directory's project configuration.
v0.12.2~dfsg/doc-src/content/help/tutorials/upgrading/ 0000755 0000000 0000000 00000000000 11771656742 021506 5 ustar root root v0.12.2~dfsg/doc-src/content/help/tutorials/upgrading/im-scared.markdown 0000644 0000000 0000000 00000005066 11771656742 025125 0 ustar root root ---
title: I'm Scared to Upgrade
layout: tutorial
crumb: Scared to Upgrade?
classnames:
- tutorial
---
# I'm scared to upgrade.
Why? Don't ya trust me? I won't break your stylesheets. Cross my heart. All those
200+ github issues were feature requests. Honest. But you know, they might change
a little. Probably not in any meaningful way. Like a default that used to be
specified in the output might be omitted because it's the browser default anyway.
## Trust but verify.
But you should probably keep me on my toes. Follow these simple steps to see
what changed to your stylesheets:
*(Steps beginning with a $ are command line commands. Don't type the $.)*
1. $ cd my_compass_project
2. $ compass compile --force
3. $ cp -r stylesheets stylesheets.backup
4. $ gem install compass # you might need to type sudo first if you're on mac or linux.
5. $ compass compile --force
6. Take note of any deprecation warnings printed in red during the compile.
7. If you have textmate and installed the `mate` command line tool:
$ diff -r stylesheets.backup stylesheets | mate
8. If you have not installed the `mate` tool:
$ sudo ln -s /Applications/TextMate.app/Contents/Resources/mate /usr/local/bin/mate
Then perform step 7.
9. If you do not have Textmate, run the diff command like so:
$ diff -y -r stylesheets.backup stylesheets | less
10. Scroll or use your arrow keys to review the differences between the files.
11. If you're satisfied: $ git commit -a -m "Upgraded compass"
12. If you're scared again:
1. Don't panic.
2. Read the [CHANGELOG](http://compass-style.org/CHANGELOG/) and
see if the changes are explained there.
3. Send an email to the [mailing list](http://groups.google.com/group/compass-users)
explaining the problem and providing enough context like snippets from your diff
and the relevant snippets of your sass/scss files. In rare cases we might request
that you construct a simple compass project that exhibits the issue and make an
archive of it and send us an email with it attached.
4. If it's pretty obviously a bug. Please file an issue
on [github](http://github.com/chriseppstein/compass/issues). If you're experiencing
a crash, please run the command with the --trace option and record the output for
diagnostic purposes.
5. $ sudo gem uninstall compass
Select the newest version of compass. You have now downgraded to the old
version of compass.
6. $ compass compile --force
7. Diff the folders as in steps 7 through 9.
13. Breathe a sigh of relief.
v0.12.2~dfsg/doc-src/content/help/tutorials/upgrading/lemonade_upgrade_guide.markdown 0000644 0000000 0000000 00000002074 11771656742 027725 0 ustar root root ---
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;
} v0.12.2~dfsg/doc-src/content/help/tutorials/upgrading/antares.markdown 0000644 0000000 0000000 00000010566 11771656742 024717 0 ustar root root ---
title: Compass v0.11 Upgrade
layout: tutorial
crumb: Upgrading to v0.11
classnames:
- tutorial
---
# Upgrading to the Compass Antares Release (v0.11)
Many mixins and certain uses of mixins have been deprecated, but your
existing stylesheets should still work out of the box with one exception:
users who are using the `css3/transform` module should update their imports
to import `css/transform-legacy` when they upgrade. They should then upgrade
to the new `css/transform` module at their convenience.
You should read about what changed, update your stylesheets accordingly
and then update your imports to the new version.
## Box Shadow
You may get a deprecation warning using the `box-shadow` mixin.
You can resolve this in one of the following ways:
1. Change your use of the `box-shadow` and instead use `single-box-shadow`.
This mixin has the same behavior and arguments as the old `box-shadow` mixin.
2. Keep using `box-shadow`, change how you pass the arguments. The new
`box-shadow` takes up to 10 comma-delimited shadows. Each shadow is
how the values should appear in the CSS (space separated).
## Text Shadow
You may get a deprecation warning using the `text-shadow` mixin.
You can resolve this in one of the following ways:
1. Change your use of the `text-shadow` and instead use `single-text-shadow`.
This mixin has the same behavior and arguments as the old `text-shadow` mixin.
2. Keep using `text-shadow`, change how you pass the arguments. The new
`text-shadow` takes up to 10 comma-delimited shadows. Each shadow is
how the values should appear in the CSS (space separated).
## CSS Transforms
The transform module was largely re-written to support 3D transforms. If you
are using it, it is suggested that you read the [new module's documentation][new_transform]
and adjust your code appropriately. Many mixin names and constants have changed.
For your convenience, the [old CSS transform module][old_transform] can still be imported, but it
is deprecated and will be removed in the next release.
## Gradients
The Compass gradient support now more closely emulates the CSS3 specification of how gradients
are represented and passed around. The `linear-gradient` and `radial-gradient` mixins
have been deprecated and instead, you should use the `linear-gradient()` and `radial-gradient()`
functions in conjunction with mixins for the [properties that support gradients][image_stylesheet] like
`background` / `background-image`, `border-image`, `list-style` / `list-style-image`,
and `content`.
After upgrading, you'll receive deprecation warnings for your usage of the old gradient
mixins and a suggested replacement value for each. If you'd rather keep the old mixins in
your project for convenience, just copy the following to your project after changing your imports:
@mixin radial-gradient($color-stops, $center-position: center center, $image: false) {
@include background-image($image, radial-gradient($center-position, $color-stops));
}
@mixin linear-gradient($color-stops, $start: top, $image: false) {
@include background-image($image, linear-gradient($start, $color-stops));
}
Or for sass files:
=radial-gradient($color-stops, $center-position: center center, $image: false)
+background-image($image, radial-gradient($center-position, $color-stops))
=linear-gradient($color-stops, $start: top, $image: false)
+background-image($image, linear-gradient($start, $color-stops))
## 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/ v0.12.2~dfsg/doc-src/content/help/tutorials/command-line.markdown 0000644 0000000 0000000 00000006571 11771656742 023646 0 ustar root root ---
title: Compass Command Line Documentation
layout: tutorial
classnames:
- tutorial
---
Compass Command Line Documentation
==================================
This page lists the compass commands you can use to set up and manage your project.
You may also find one of these walk throughs useful:
* HOWTO: [Compile your stylesheets for production](/help/tutorials/production-css/)
Project Commands
----------------
### Create a new compass project
compass create path/to/project [--using blueprint] [--sass-dir=sass ...] [--project-type=rails]
### Initialize an existing project to work with compass
compass init rails path/to/project [--using blueprint]
### Install a pattern from an extension into a project
compass install blueprint/buttons [path/to/project]
### Compile the project's sass files into css
compass compile [path/to/project]
### Watch the project for changes and compile whenever it does
compass watch [path/to/project]
### Emit a configuration file at the location specified.
compass config [path/to/config] [--sass-dir=sass --css-dir=css ...]
### Validate the generated CSS.
compass validate [path/to/project]
Misc commands
-------------
### Generate a background image that can be used to verify grid alignment
compass grid-img W+GxH [path/to/grid.png]
Where:
W
= Width of 1 column in pixels.
G
= Width of 1 gutter in pixels.
H
= Height of the typographic baseline in pixels.
Examples:
# 40px column, 10px gutter, 20px height at /grid.png
compass grid-img 40+10
# 40px column, 20px gutter, 28px height at /grid.png
compass grid-img 40+20x28
# 60px column, 20px gutter, 28px height at images/wide_grid.png
compass grid-img 60+20x28 images/wide_grid.png
### Enter into a console for testing SassScript in a compass environment.
compass interactive
### Print out statistics about your stylesheets
compass stats
### Emit the version of compass
compass version
### Unpack a framework or extension into your project
compass unpack
Get Help on the Command Line
----------------------------
### Get help on compass
compass help
### Get help on an extension
compass help extension_name
### Get help about an extension pattern
compass help extension_name/pattern_name
### Get help about a particular sub command
compass help command_name
v0.12.2~dfsg/doc-src/content/help/tutorials/contributing.markdown 0000644 0000000 0000000 00000036744 11771656742 024017 0 ustar root root ---
title: Contributing Stylesheets
crumb: Contributing
layout: tutorial
classnames:
- tutorial
---
Contributing Stylesheets to Compass
===================================
Thank you for your interest in contributing to Compass. Our goal is to make it as easy
as we can for you to contribute changes to compass -- So if there's something here that
seems harder than it ought to be, please let us know.
If you find a bug **in this document**, you are bound to contribute a fix. Stop reading now
if you do not wish to abide by this rule.
**Step 1**: If you do not have a github account, create one.
**Step 2**: Fork Compass to your account. Go to the [main repo](http://github.com/chriseppstein/compass)
and click the fork button.

Now we're at a decision point. What kind of change do you intend to make?
* [Fix a typo (or some other trivial change)](#trivial-changes)
* [Documentation Changes](#documentation-changes)
* [Fixing Stylesheet Bugs](#stylesheet-bugs)
* [New Stylesheet Features](#stylesheet-changes)
* [Ruby Changes](#ruby-changes)
Here's some general information about the project you might find useful along the way:
* [Submitting Patches](#patches)
* [Project Structure](#project-structure)
* [General Philosophy](#project-philosophy)
* [Stylesheet Conventions](#stylesheet-conventions)
* [Miscellaneous Stuff](#faq)
* [Setting up Git](#setting-up-git)
* [Using Compass while Under Development](#running-local-code)
* [Running Tests](#running-tests)
* [Recovering from a cherry-pick or a rebase](#recovering-from-rebased-or-cherry-picked-changesets)
Making Trivial Changes
Thanks to Github, making small changes is super easy. After forking the project navigate
to the file you want to change and click the edit link.

Change the file, write a commit message, and click the `Commit` button.

Now you need to get your change [accepted](#patches).
Making Documentation Changes
The compass documentation is stored in two places. First, the `doc-src` directory is
where the documentation lives -- however much of the documentation is generated
from comments in the Sass files themselves. More information on [changing
documentation][documentation]. Once your changes are pushed, please
[submit them](#patches).
Fixing Stylesheet Bugs
**Step 3**: If this is a bug you discovered. Please [report it][issues] before working on a fix.
This helps us better understand the patch.
**Step 4**: Get [the code](#setting-up-git) if you haven't yet done so.
**Step 5**: Fix the bug and commit the changes. Please make sure to mention the bug
id in your commit message like so:
Fixed the display of the fizzlebuzz in IE6.
Closes GH-123.
**Step 6**: Verify the fix in as many browsers as you can as well as against your own
project. How to [use compass while changing it](#running-local-code).
**Step 7**: Make sure the tests pass. More info on [running tests](#running-tests)
If the tests fail, fix the tests or the stylesheets accordingly. If the tests, don't
fail, that means this aspect was not well enough tested. Please [add or augment
a test](#writing-tests).
You're done. Please [submit your changes](#patches).
Making Stylesheet Changes
It is a good idea to discuss new features ideas with the compass users and developers
before building something. Please don't be shy; send an email to the [compass mailing
list](http://groups.google.com/group/compass-users).
Many feature ideas are good but not obviously a good fit for the compass core library.
In these cases, you can and should create a [compass extension][extensions]. Sometimes
this is because the concept does not align with the [compass philosophy](#project-philosophy).
But sometimes it's just because we think the idea needs time to bake. [Documentation on
making extensions.][extensions]
**Step 3**: Get [the code](#setting-up-git) if you haven't yet done so.
**Step 4**: Add the feature -- contact the mailing list if you have any questions.
**Step 5**: Add a test case. More info on [writing tests for compass](#writing-tests).
**Step 6**: Documentation - Add or update the reference documentation. Add
an example of using the feature. See the [doc readme for details][documentation].
You're done. Please [submit your changes](#patches).
Making Ruby Changes
At this time, if you're a rubyist who's planning on working on the ruby-side of
things, it's assumed you know how to read code and use standard ruby tools like
rake, gem, bundler, test/unit, cucumber, rspec, etc. If you have any questions,
please ask. No changes will be accepted without accompanying tests.
Submitting Patches
If you are submitting features that have more than one changeset, please create a
topic branch to hold the changes while they are pending merge and also to track
iterations to the original submission. To create a topic branch:
$ git checkout -b new_branch_name
... make more commits if needed ...
$ git push origin new_branch_name
You can now see these changes online at a url like:
http://github.com/your_user_name/compass/commits/new_branch_name
If you have single-commit patches, it is fine to keep them on master. But do keep in
mind that these changesets might be
[cherry-picked](#recovering-from-rebased-or-cherry-picked-changesets).
Once your changeset(s) are on github, select the appropriate branch containing your
changes and send a pull request. Make sure to choose the same upstream branch that
you developed against (probably stable or master). Most of the description of your
changes should be in the commit messages -- so no need to write a whole lot in the
pull request message. However, the pull request message is a good place to provide a
rationale or use case for the change if you think one is needed. More info on [pull
requests][pulls].

Pull requests are then managed like an issue from the [compass issues page][issues].
A code review will be performed by a compass core team member, and one of three outcomes
will result:
1. The change is rejected -- Not all changes are right for [compass's
philosophy](#project-philosophy). If your change is rejected it might be better
suited for a plugin, at least until it matures and/or proves itself with the users.
2. The change is rejected, *unless* -- Sometimes, there are missing pieces, or
other changes that need to be made before the change can be accepted. Comments
will be left on the commits indicating what issues need to be addressed.
3. The change is accepted -- The change is merged into compass, sometimes minor
changes are then applied by the committer after the merge.
Project Structure
compass/
bin/
compass - CLI executable
devbin/ - development scripts after installing the bundle
doc-src/ - source for documentation
docs/ - generated documentation
examples/ - fully working compass projects that you can explore
features/ - tests for compass
frameworks/ - All frameworks in this directory are loaded automatically
compass/ - The compass framework
stylesheets/ - The compass libraries
templates/ - The compass project templates and patterns
blueprint/
stylesheets/ - The blueprint libraries
templates/ - The blueprint project templates and patterns
lib/
compass.rb - The main compass ruby library
compass/
app_integration/ - integration with app frameworks
commands/ - UI agnostic support for the CLI
configuration/ - support for project configuration
exec/ - UI code for the CLI
installers/ - support for installing templates
sass_extensions/ - enhancements to Sass
functions/ - Sass functions exposed by compass
monkey_patches/ - Changes to sass itself
test/ - unit tests
General Philosophy
1. Users specify their own selectors. Compass never forces a user
to use a presentational class name.
2. Compass does not require javascript. It is a CSS framework.
3. Compass core is "design agnostic". This is why compass core has no
grid framework -- grids are not design agnostic.
4. Compass frameworks are not special. If compass can do it, so should an extension
be able.
5. Sass is awesome -- Compass should make sass more accessible and
demonstrate how to use Sass to its fullest potential.
6. Developing across browsers is hard and will always be hard. It takes
a community to get it right.
7. By default, Compass supports as many browsers as it can. Where it can't
it progressively enhances. Where it degrades, the documentation should
make a note. Deviation from this requires an excellent reason.
8. Compass is a proving ground for Sass features. The watcher and color
functions are examples of features that started in Compass and got
moved to Sass.
Stylesheet Conventions
1. All framework stylesheets are partials. Their filename begin with an underscore.
Otherwise, Sass will create stylesheets directly into the user's CSS directory.
2. Compass imports do not emit styles. There are a few limited exceptions to this like
the resets and base classes for inheritance.
3. Mixins with two-level defaults. Mixins often provide two levels of default
values. The first is a global default that can be overridden once. The second
is a default that can be overridden when the mixin is included.
4. Mixin argument names are part of the public API, make sure they are understandable and not
needlessly truncated or terse.
5. If adding a new folder of stylesheets, add a single stylesheet with the same name that
imports all of the stylesheets in the folder.
6. Try to avoid passing selectors as arguments. This is what mixins are for.
Common Problems & Miscellaneous Info
Setting up Git
Please follow [these instructions](http://help.github.com/git-email-settings/)
to set up your email address and attribution information.
Download your git repo:
git clone git@github.com:your_username/compass.git
Set up a remote to the main repo:
cd compass
git remote add chriseppstein git://github.com/chriseppstein/compass.git
Getting recent changes from the main repo:
git fetch chriseppstein
Using Compass while Under Development
1. Use the bin script. `/path/to/compass/bin/compass` is a version of the compass
command line that uses the local changes you have made. You can add `/path/to/compass/bin`
to your `$PATH`, or refer to it directly.
2. Build and install a gem:
1. Edit VERSION.yml and add a build indicator like so (**Do not commit this change**):
---
:major: 0
:minor: 10
:patch: 6
:build: something-uniq-to-me.1
2. `gem build compass.gemspec`
3. `gem install compass-0.10.6.something-uniq-to-me.1.gem` -- If installing to your
system gems, you'll probably need to add `sudo` to the front. If you don't know
what that means, you probably need to add `sudo` to the front.
3. In a [bundled][bundler] environment, you can configure your gem to use compass
while you work on it like so:
gem 'compass', :path => "/Users/myusername/some/path/to/compass"
Bundler will perform some sort of charm on ruby to make it work.
4. Configuring ruby directly. If you're a ruby pro, you probably don't need to be
told that you can set compass on the load path like so:
export RUBYLIB=/Users/myusername/some/path/to/compass/lib
Running Tests
1. You must have Ruby installed on your system. After [setting up git](#setting-up-git),
change to the root directory of your git checkout of Compass.
cd compass
2. Install the bundler Ruby gem.
gem install bundler
If installing to your system gems, you'll probably need to add `sudo` to the
front of that command. If you don't know what that means, you probably need
to add `sudo` to the front.
3. Install development dependencies:
bundle install --binstubs devbin
4. Running core library and stylesheet tests:
bundle exec rake test features
5. Running behavior tests
./devbin/cucumber
If stylesheet tests fail, the output of the test project is captured in
`test/fixtures/stylesheets//saved/` and the error message will report where
the error was. Here's an example:

Writing Stylesheet Tests
Compass has stylesheet tests to ensure that each stylesheet compiles, can be imported directly
without any other dependencies and that refactorings that should not affect the output, don't.
At some point, it would be great to have a test system that verifies that the stylesheets
*work correctly* in various browsers. If you have ideas for how to accomplish this in a sane
way, please let us know.
In the `test/fixtures/stylesheets` directory, there are a number of compass projects.
The tests work by adding or updating the sass files, running the tests to make sure they fail,
and then changing the expected css output to make the test pass. It is rudimentary, but as
a safety net, it has caught a number of problems that might have been missed otherwise.
If you add a new stylesheet to compass, please make sure to add a new test stylesheet
that only imports the newly added stylesheet and add rules that use the new features in that
stylesheet.
You cherry-picked/rebased
my changes. What should I do?
Depending on any number of reasons, including but not limited to the alignment of the stars,
Your changes might not be merged into compass using a simple merge. For instance, we might
decide to place a change against master into stable instead, or we might squish all your
changes together into a single commit at the time of merge, or we might want a change you've
submitted but not a change that it was placed onto top of. In these cases, there are
a couple of ways you can react:
1. If you have some changes on a branch that were not yet accepted, but other changes on that
branch were accepted then you should run the following command (make sure to fetch first):
`git checkout branch_name; git rebase chriseppstein/master` (assuming the change was applied
to the master branch)
2. If all your changes on the topic branch were accepted or you don't care to keep it around
anymore: `git checkout master; git branch -D branch_name; git push origin :branch_name`
[pulls]: http://help.github.com/pull-requests/
[issues]: http://github.com/chriseppstein/compass/issues
[documentation]: http://github.com/chriseppstein/compass/blob/stable/doc-src/README.markdown
[bundler]: http://gembundler.com/
[extensions]: /help/tutorials/extensions/
v0.12.2~dfsg/doc-src/content/help/tutorials/testing.markdown 0000644 0000000 0000000 00000001044 11771656742 022746 0 ustar root root ---
title: Testing Your Stylesheets
layout: tutorial
crumb: Testing
classnames:
- tutorial
---
# Test Unit
require 'compass/test_case'
class StylesheetsTest < Compass::TestCase
def test_stylesheets
my_sass_files.each do |sass_file|
assert_compiles(sass_file) do |result|
assert_not_blank result
end
end
end
protected
def my_sass_files
Dir.glob(File.expand_path(File.join(File.dirname(__FILE__), "../..", "app/stylesheets/**/[^_]*.sass")))
end
end v0.12.2~dfsg/doc-src/content/help/tutorials/production-css.markdown 0000644 0000000 0000000 00000001636 11771656742 024254 0 ustar root root ---
title: Production Stylesheets
layout: tutorial
classnames:
- tutorial
---
Production Stylesheets
======================
See the [Configuration Reference](/help/tutorials/configuration-reference/) for a
complete list of available configuration options.
Strategies for Compiling Stylesheets for Production
---------------------------------------------------
**Option A:** Use the compass production defaults.
compass compile -e production --force
*Note:* This only changes the compass defaults, options you've specified explicitly
in your configuration will not be changed.
**Option B:** Override your configuration file settings on the command line
compass compile --output-style compressed --force
**Option C:** Create a separate configuration file for production
cp config.rb prod_config.rb
..edit prod_config.rb to suit your needs..
compass compile -c prod_config.rb --force
v0.12.2~dfsg/doc-src/content/help/tutorials/exclude_vendor_prefixes.markdown 0000644 0000000 0000000 00000005440 11771656742 026210 0 ustar root root ---
title: Removing Vendor Prefixes from Compass Stylesheets
layout: tutorial
crumb: Removing Vendor Prefixes from Compass
classnames:
- tutorial
---
# Removing Vendor Prefixes from Compass Stylesheets
Compass makes it easy to code many of the CSS3 vendor prefixed properties, without having to type it all out by hand.
## Easy Vendor Prefixes
Let's say you wanted to add a border radius to an element like this:
.round {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
With Compass it's easier to use the `border-radius` mixin:
.round {
@include border-radius(4px);
}
That mixin will create all of the vendor prefixed CSS properties you need, with much less of a chance of a typo or inconsistent display. It will also take care of any browser specific implementations of the CSS property that don't match up to the W3C specification.
.round {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
## Problem
The problem with that solution, as good as it is, is that all of those browser prefixes will cruft up your stylesheet quickly if you use a lot of them, and/or aren't using `@extend` to keep them to a minimum.
Of particular note are the generated Opera `(-o-border-radius)` and Konquerer `(-khtml-border-radius)` properties, which are added to create support for those browsers. As great as those browsers may be, they often account for a very small minority of a website's traffic, traffic that may not compensate for the full weight of their support when using experimental CSS3 properties.
## Solution
Thankfully, Compass includes a selection of default boolean variables that you can override, allowing you to globally turn off the support for the various vendor prefixes:
$experimental-support-for-mozilla : true !default;
$experimental-support-for-webkit : true !default;
$support-for-original-webkit-gradients : true !default;
$experimental-support-for-opera : true !default;
$experimental-support-for-microsoft : true !default;
$experimental-support-for-khtml : true !default;
If you set any of the above variables to `false`, Compass will skip those prefixes when it processes your stylesheet.
So to exclude Opera and Konquerer vendor prefixes from your CSS, add the following code just above your include of the CSS3 module in your base SCSS file:
$experimental-support-for-opera:false;
$experimental-support-for-khtml:false;
@import "compass/css3";
The resultant output will be as follow:
.round {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
}
v0.12.2~dfsg/doc-src/content/help/tutorials/best_practices.markdown 0000644 0000000 0000000 00000010764 11771656742 024274 0 ustar root root ---
title: Best practices
crumb: Best practices
layout: tutorial
classnames:
- tutorial
---
# Best Practices
Here are some best practices for making your projects easier to build and
simpler to maintain.
## Use a Base stylesheet file
Create a `_base.scss` [partial][1] to initialize your stylesheets with common
variables and ([often][2]) the framework utilities you plan to use:
### _base.scss
$blueprint-grid-columns : 24;
$blueprint-grid-width : 30px;
$blueprint-grid-margin : 10px;
$font-color : #333;
@import "compass/reset";
@import "compass/utilities";
@import "blueprint";
// etc.
The `_base.scss` file is also a great place to keep your own custom mixins, so
they’re available to any stylesheet that includes it.
Then you can include this file in all other stylesheets:
### application.scss
@import "base";
#wrapper {
@include container;
}
// etc.
It is important to define any compass/framework constants that you want to override
in base.scss first, before @import-ing the framework files. See [Working with
Configurable Variables][3], for a specific example. Note that you can refer to `_base.scss` without the
leading underscore and without the extension, since it is a [partial][1].
## Write your own Custom Mixins
Mixins let you insert any number of style rules into a selector (and its
descendants!) with a single line. This is a great way to [DRY][4] up your
stylesheet source code and make it much more maintainable. Using mixins will
also make your stylesheet look like self-documented source code -- It’s much
more obvious to read something like `@include round-corners(6px, #f00)` than the whole
list of rules which define that appearance.
## Presentation-free Markup
CSS was created to extract the presentational concerns of a website from the
webpage content. Following this best practice theoretically results in a website
that is easier to maintain. However, in reality, the functional limitations of
CSS force abstractions down into the markup to facilitate the [DRY][4] principle
of code maintainability. Sass allows us to move our presentation completely to
the stylesheets because it let's us create abstractions and reuse entirely in
that context. Read [this blog post][5] for more information on the subject.
Once you have clean markup, style it using Mixins and Inheritance. With clean
and clear abstractions you should be able to read stylesheets and imagine what
the webpage will look like without even loading the page in your web browser.
If you find your CSS is getting too bloated due to sharing styles between
semantic selectors, it may be time to refactor. For instance this stylesheet
will be unnecessarily bloated:
@mixin three-column {
.container { @include container; }
.header,
.footer { @include column(24); }
.sidebar { @include column(6); }
article { @include column(10); }
.rightbar { @include column(8); }
}
body#article,
body#snippet,
body#blog-post { @include three-column; }
Instead, ask yourself "what non-presentational quality do these pages share in
common?" In this case, they are all pages of content, so it's better to apply a
body class of "content" to these pages and then style against that class.
## Nest selectors, but not too much.
It's easier to style a webpage from scratch or starting from some common base
point for your application than it is to contend with unwanted styles bleeding
into your new design. In this way, it is better to use some basic nesting of
styles using some selector early in the markup tree. And then to refactor as patterns of use emerge to reduce bloat.
It's important to remember that long selectors incur a small rendering
performance penalty that in aggregate can slow down your web page. There is
no need to exactly mimic your document structure in your css. Instead nest
only deep enough that the selector is unique to that part of the document.
For instance, don't use `table thead tr th` when a simple `th` selector will
suffice. This might mean that you have to separate your styles into several
selectors and let the document cascade work to your advantage.
[1]: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials
[2]: http://groups.google.com/group/compass-users/browse_frm/thread/0ed216d409476f88
[3]: http://compass-style.org/help/tutorials/configurable-variables/
[4]: http://c2.com/cgi/wiki?DontRepeatYourself
[5]: http://chriseppstein.github.com/blog/2009/09/20/why-stylesheet-abstraction-matters/
v0.12.2~dfsg/doc-src/content/help/tutorials.haml 0000644 0000000 0000000 00000001677 11771656742 020404 0 ustar root root ---
title: Compass Tutorials
crumb: Tutorials
classnames:
- tutorial
layout: tutorial
---
%h1 Compass Tutorials
:markdown
These tutorials are still a work-in-progress, if you have questions that aren't covered here let us know on the [Compass users mailing list](http://groups.google.com/group/compass-users) where there are lots of
friendly Compass users standing by to help you out.
## 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/).
## 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/).
v0.12.2~dfsg/doc-src/content/CHANGELOG.markdown 0000644 0000000 0000000 00000177602 11771656742 017620 0 ustar root root ---
title: Compass History
crumb: CHANGELOG
body_id: changelog
layout: default
---
COMPASS CHANGELOG
=================
Upgrading compass is pretty easy.
Don't let all these details [scare you...](http://compass-style.org/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.12.2 (06/24/2012)
-------------------
* [Vertical Rhythm Module] Removed the `$ie-font-ratio` constatnt in
favor of a more clear `$browser-default-font-size` constant.
* [Vertical Rhythm Module] The `establish-baseline` mixin now styles the
`` element instead of the `` element. This makes the
vertical rhythm module work better with `rem` based measurements.
* [CSS3] Added 3D transform support for Mozillia, IE, and Opera.
* [CSS3] Added `-ms` support for css3 columns. Add support for the columns shorthand property.
* [CSS3] Added `-ms` and `-webkit` support for CSS Regions. [Docs](/reference/compass/css3/regions/)
* [CSS3] Added mixins for column-break properties to the columns module.
* [CSS3] Added a css3/hyphenation module for the `word-break` and `hyphens` properties.
* [CSS3] Made the API more consistent across the different mixins in the transitions module.
* [CSS3] The text-shadow mixin now supports the spread parameter and it is used to progressively enhance browsers that support it.
* [CSS3] Add a mixin for the unofficial `filter` property. [Docs](/reference/compass/css3/regions/)
* [CSS3] Removed the `-ms` prefix for gradients and transforms.
Microsoft took so long to release them, that the spec was approved first.
* [CLI] Added a `-I` option for adding sass import paths via the CLI during compilation and project set up.
* [Configuration] For better ruby and rails integration, the `add_import_path` command now accepts
[Sass::Importer](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#custom_importers) objects
and [Ruby Pathname](http://www.ruby-doc.org/stdlib-1.9.3/libdoc/pathname/rdoc/Pathname.html) objects.
* Reverted the [hide-text](/reference/compass/typography/text/replacement/#mixin-hide-text) mixin to the `-9999` method. If you prefer the [Kellum method](http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/) then you need to set `$hide-text-direction` to `right` in your stylesheets.
* `$legacy-support-for-mozilla` can be set to `false` to disable output
for Firefox 3.6 or earlier.
* Cleaned up the inline-block mixin to have less output and make the vertical-alignment of that mixin configurable or even turned off. [Details](https://github.com/chriseppstein/compass/commit/84e9a684b9697d728a37abb14cb0aae2c4d2a790)
* Output of SVG and original webkit gradients is now omitted when using
the degree-based linear gradient syntax.
* Added a `--fonts-dir` configuration flag for the compass command line.
* Added `tint()` and `shade()` color helper functions, for better ligthening/darkening of colors.
0.12.1 (03/14/2012)
-------------------
* Fixed a bug in font-files mime-type detection.
* Code cleanup and better documentation for the vertical-rhythm module.
* Add support for installing compass on Macs using a [one-click installer](https://github.com/chriseppstein/compass/downloads).
0.12.rc.2 (03/11/2012)
----------------------
### Stylesheet Changes
* Improved [hide-text mixin](/reference/compass/typography/text/replacement/#mixin-hide-text) for better performance and accessibility.
* Added [squish-text mixin](/reference/compass/typography/text/replacement/#mixin-squish-text) to hide text on inline elements.
* Compass css3 transitions module now correctly handled transitioning of
prefixed properties.
### Misc Changes
* Fix the mime-type of embedded `woff` font files. Add support for Embedded OpenType fonts.
* New math functions are now available: `e()`, `logarithm($number[, $base = e()])`, `square-root($number)`
and `pow($number, $exponent)`
0.12.rc.1 (02/02/2012)
----------------------
Give warnings for users who upgrade without knowing about the compass-rails gem.
0.12.rc.0 (01/31/2012)
----------------------
### Stylesheet Changes
* Removed -ms prefix from box-sizing
* Added sprite_names sass function
* Added -ms prefix to transitions
### Command Line
* Added support for `--debug-info` and `--no-debug-info` to the compass compile command
### Rails Integration
Rails projects must now use the [`compass-rails`](https://github.com/compass/compass-rails)
gem to integrate with compass. Please read the [README](https://github.com/Compass/compass-rails/blob/master/README.md) for upgrade instructions. More information in this [blog post](/blog/2012/01/29/compass-and-rails-integration/).
0.12.alpha.3 (12/23/2011)
-------------------------
* The `$round-to-nearest-half-line` config variable was added. When
true, the vertical rhythm module will round line heights to the
nearest half-line to avoid awkwardly large gaps between lines of text.
Defaults to false.
* Added `reset-baseline` to the vertical rhythm module so you can force the baseline to reset.
* Merges in the stable changes between 0.11.5 and 0.11.6.
0.12.alpha.2 (11/28/2011)
-------------------------
* Bug fixes for Rails 2.x applications.
0.12.alpha.1 (11/14/2011)
-------------------------
* font-files helper: Stop requiring font type when the type can be guessed from URL
* inline-font-files: actually works now
* Upgrade CSS3 Pie to 1.0beta5
* log sprite generation and removal to the console
* Added a new helper function `compass-env()` that returns the current compass environment (development, production)
* Added the ability to inline a sprite image by setting `$-inline:true` before you call `@import`
* Removed `-khtml` prefixes by default you can still enable them by setting `$experimental-support-for-khtml:true;`
* Improved rails 3.1 integration
* `true` and `false` are now valid sprite names
* Removed deprecated forms of the box-shadow, text-shadow, and transform
mixins.
0.12.alpha.0 (8/30/2011)
------------------------
* Support for the rails 3.1 asset pipeline
* Added support for diagonal, horizontal, and smart sprite layout
* Fixed a bug with spacing in horizontal layout
* Changed the descriptions of the sin, cos, and tan to be more descriptive
* Fixed trig functions via issue #498
* Fixed the default `http_path` in rails
* Sprites can now have a `sprite_load_path` that is an array of directories that
contain source images for sprites handy for using sprites in extensions or gems
* Added a new set of configuration properties for generated images.
`generated_images_dir`, `generated_images_path`, `http_generated_images_dir`,
and `http_generated_images_path` can now be set to control where generated
images are written and how they are served. Added a corresponding
`generated-image-url()` helper function. These should rarely be needed and
will default to your corresponding image directories and paths.
0.11.8 (02/26/2012)
-------------------
* Fix a bug in gradients that used the transparent keyword
* Add filesize to the `compass stats` output.
0.11.7 (01/05/2012)
-------------------
* Update to font-face mixin to make it work on IE8.
0.11.6 (12/23/2011)
-------------------
* Added `user-select` mixin to control the selection model and granularity of an element.
It accepts one argument (`$select`) from the following options:
`none` | `text` | `toggle` | `element` | `elements` | `all` | `inherit`.
* The border-image property now takes a keyword called `fill` to
indicate that the image should also fill the element. If you pass the
`fill` keyword to the `border-image` mixin it will only be output in the
standard (non-prefixed) versions of the property.
* Don't use the deprecated callback method `on_updating_stylesheet` in Sass if
the new version is available.
0.11.5 (07/10/2011)
-------------------
* Updated the list of elements returned by the `elements-of-type()` helper.
It now understands `html5-block` and `html5-inline` and other types now
return html5 elements in them by default.
* Fix warning logic in vertical-rhythms module.
* Fix typo in the css3/transition module.
0.11.4 (07/03/2011)
-------------------
* Vertical rhythm now supports absolute units like pixels.
Set `$relative-font-sizing` to `false` to enable.
* Vertical rhythm now has a minimum padding that defaults to 2px.
This makes some edge cases look better.
* New mixin `force-wrap` prevents URLs and long lines of text from breaking layouts.
* Fix absolute path detection on windows.
* Fix the mime type returned for inline svg images.
* Allow multiple transitions in the CSS3 `transition` mixin.
* The Blueprint `:focus` styles no longer clobbers cascade-based overrides unnecessarily.
* The Blueprint grid-background vertical rhythm is now based off of $blueprint-font-size,
rather than a static value of 20px
0.11.3 (06/11/2011)
-------------------
**Note:** Due to some internal changes to compass you may have issue with your sass cache. Run `compass clean` to clear your cache.
* The `pie-clearfix` mixin has been updated. If you have to
support Firefox < 3.5, please update your stylesheets
to use `legacy-pie-clearfix` instead.
* Added a new command: `compass clean` which removes any generated
css files and clears the sass cache.
* Enable IE 10 support for flexible box with the -ms prefix.
* A small change to how generated sprites are named for better
rails 3.1 compatibility.
* Fixes for the compass --quiet mode.
* It is now possible to generate cache buster urls that manipulate
the path of the image instead of the query string. This makes
images work better with proxies, but will require some web server
configuration. [Docs](/help/tutorials/configuration-reference/#asset-cache-buster)
* Numerous small bug fixes to sprites.
* Sprite Engines are now classes see [Docs](/help/tutorials/extending) for more information
* Sprite classes have bee re-factored into modules for readability
* Sprites will no longer cause `undefined method 'find' for #` when adding or removing sprite files
0.11.2 (06/10/2011)
-------------------
* Sprites will now by default remove any old versions of the sprite. A new configuration
variable has been created to override this.
* Nested sprites are now supported using globs `@import 'nested/**/*.png';`.
* Fixed a bug that was causing sprite variable options to not get passed to the image classes.
* Sass Colors will no longer cause an error if you use them as sprite names.
* Added support for -ms gradients in background-image and background properties
* Give a better error if Sass::Script::Functions.declare does not exist.
0.11.1 (04/25/2011)
-------------------
* This release fixed some Gem dependency issues with Sass.
0.11.0 (04/24/2011)
-------------------
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
#### Breaking Changes & Deprecations:
* 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
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.
* 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
* 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`
* [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)`.
### 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
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](/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.
* To generate a simple linear gradient in IE6 & 7, you can now use
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.
### 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, 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.
* 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.
* 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 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.
### 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
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.
* 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.
### 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)
-------------------
* [Command Line] compass config -p -- will now print out the configuration value
for that property for the current project
* [CSS3] Bug fix: In webkit, when the last gradient color stop was a percent less than 100%,
the intermediate values were being scaled to that value.
* [Command Line] You can now pass --no-line-comments to the Compass command line to disable
line comments.
* [Configuration] Make the compass configuration file more self documenting by adding comments
for `preferred_syntax`, `output_style`, and `line_comments`.
* Work around IE compatibility issues with the :last-child selector.
[Commit](http://github.com/jdsiegel/compass/commit/c1fb764dba9c54cc5d02f2f7de213fb21ac6ca09).
* [Command Line] Only the action is colorized in command line output now.
* [Command Line] Compass Validator has been upgraded and fine-tuned. It is now using the
"css3" profile to validate and provides a more consistent UI with other compass commands.
To upgrade: `gem install compass-validator`
* [CSS3] The box-shadow `$spread` value now defaults to using the browser default instead of 0.
Set $default-box-shadow-spread to 0 if you prefer the older behavior. Since the browser is supposed
to default to 0, you should see no change except less CSS output.
* [CSS3] The output order of the `box-shadow` mixin now matches the W3C specification.
The color and inset values used to be swapped.
0.10.6 (10/11/2010)
-------------------
* HTML5 reset includes box-model reset for newer browsers.
* Fix encoding issue for ruby 1.9 users of the font-face mixin.
* Make it easier to disable the asset cache buster: `asset_cache_buster :none`
* Can now set `$padding` to `false` to make the `horizontal-list` mixin skip the
padding properties.
* It is now possible to disable support for legacy IE browsers.
See [the docs](/reference/compass/support/) for more information.
0.10.5 (08/29/2010)
-------------------
* The [HTML5 Reset mixin][html5-reset] now resets the following new elements:
`canvas`, `details`, `figcaption`, `hgroup`, `menu`, `summary`
* A new Utility mixin has been added: [inline-block-list][inline-block-list].
* Compass projects can now (as was always intended) use paths outside of the project directory
for css, images, fonts, etc by configuring those locations using `xxx_path` instead of
`xxx_dir`. For instance: `css_path = "/var/www/docroot/css"`. It is recommended
to set the corresponding `http_xxx_path` when you do this, for instance:
`http_stylesheets_path = "/css"`. On the command line, all absolute urls are
treated as paths instead of relative directories so
`--css-dir /var/www/docroot/css` will set `css_path`. Should both a directory
and a path be specified, the path will override the corresponding directory.
* A new command is available that will unpack an extension from the system location into
your extensions folder. Run `compass help unpack` for more information.
0.10.4 (8/08/2010)
------------------
* [Rails] Fixed a bug introduced in 0.10.3 that caused rails applications using the old configuration file (config/compass.config) to break.
* [Extensions] Make it easier to create manifest files by allowing template files to be discovered. See the Manifest Declarations section of [extensions tutorial](http://compass-style.org/help/tutorials/extensions/) for details.
* [Rails] Don't install configuration files when installing extensions.
* [Compass Core] All url helpers now accept a second argument that when true will cause only the path to be emitted. This allows the url helpers to be used with IE filters.
0.10.3 (8/1/2010)
-----------------
### !important
All rails users should run the following command:
compass init rails --prepare
This will update your compass initializer file.
### Compass Core
* Add missing clearfix import to horizontal-list.
* Emit less css for inline lists with the same result.
* New helper `opposite-position($position)` returns the opposite value of a position. [Documentation](http://compass-style.org/reference/compass/helpers/constants/)
* Allow horizontal lists to be floated to the right.
* Bugfix for inline-font-files helper.
* `+font-face` mixin no longer uses `$postscript` name or `$style` type variables, in favor of the Paul Irish [smiley bulletproof technique](http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/). Older declarations will still work, but will not apply the variables and will display a deprecation warning.
* `+box-shadow` now supports `$spread` length and `$inset` declarations.
* The gradient mixins output official w3c declarations along with the `-webkit` and `-moz` prefixed versions. The official code is based on the w3c spec and is nearly ideantical to the mozilla version, although it is currently not supported by any browser.
* `+opacity` no longer uses any prefixed variations, as IE uses `filter` and
all other modern browsers support the official spec or nothing at all.
* Support for specifying horizontal and vertical radii for the shorthand border-radius property.
* The `has-layout` mixin now uses pixels instead of ems to work around an opera bug.
### Blueprint
* Two colors used in typography can now be customized.
* Support for inputs of type email.
### Extensions
* Extensions can now create empty directories with the `directory` directive. [Docs](http://compass-style.org/help/tutorials/extensions/).
* It's now easier to load extensions from a configuration file using the `load` and `discover` directives.
### Rails
As stated above, all rails users should run the following command:
compass init rails . --prepare
This will fix a bug in the rails initializer that caused compass extensions to not be recognized when placed into the `vendor/plugins/compass_extensions` directory. It will also make sure that future bugs in the boot process won't require an end-user action to fix.
### Contributors:
* [Milo Winningham](http://github.com/quadule)
* [jonathanpberger](http://github.com/jonathanpberger)
* [Stephan Kaag](http://github.com/stephankaag)
0.10.2 (May 31, 2010)
---------------------
This is a bug fix release. [Details on Github.](http://github.com/chriseppstein/compass/compare/v0.10.1...v0.10.2)
0.10.1 (May 15, 2010)
---------------------
* Fixed a regression in the Blueprint module, the blueprint reset
was no longer automatically applying the reset styles. This behavior
is restored in this release. If you `@import blueprint/reset` and
then apply the reset mixin yourself, you should remove the mixin
call or change your import to `blueprint/reset/utilities`.
* Added a subcommand for emitting sass imports for the sass CLI.
* Added a subcommand for listing the available frameworks.
* Fixed a number of bugs related to Sass & Rails integration
* Fixed some documentation issues in the command line and on the website.
0.10.0 (May 10, 2010)
---------------------
This changelog entry is condensed from a very long beta release. You can read [the 0.10.0 beta release notes here](/CHANGELOG-v0-10-0-beta/).
### Gem Location
The compass gem is now (and has been for some time) hosted on [rubygems.org](http://rubygems.org). If you have an old version
installed from github, please remove it:
sudo gem uninstall chriseppstein-compass
### Sass 3:
* Compass now depends on Sass 3 -- Please be prepared to upgrade.
Things won't break but you'll have a lot of deprecation warnings.
Upgrading is pretty easy thanks to the `sass-convert` tool. See the
[Sass Changelog](http://sass-lang.com/yardoc/file.SASS_CHANGELOG.html)
for more information.
* All compass stylesheets are now written in the SCSS syntax,
if you import compass framework stylesheets with an explicit
`.sass` extension, then you'll receive deprecation warnings
directing you to update your stylesheets.
* A new command line switch `--syntax` (or `-x`) has been added
to commands that install stylesheets into your project that
allows you to select the syntax to use (scss or sass)
* A new configuration option `preferred_syntax` now exists
and defaults to `:scss`. Please update your project's configuration
file with `preferred_syntax = :sass` if you prefer to use the
indentation-based syntax.
* You may silence deprecation warnings by adding
`sass_options = {:quiet => true}` to your configuration.
### Command-Line:
* The compass command-line tool has been re-written to allow be easier to
use and be more flexible. The old command line is still supported at
this time. "compass help" will get you started on using the new
command line syntax.
* Allow specification of a height for the grid image
* For the truly hardcore compass users, you may now create a
compass project using "compass create my_project --bare"
and you'll have a completely bare project created for you with no
sass files provided for you.
* Get stats on your compass project with "compass stats". You'll
need to install the "css_parser" ruby gem to get stats on your
css files.
* Command line switch (--boring) to turn off colorized output.
* Color any output from the `Sass::Engine` red during compilation.
* If you only want to compile certain files, you can now
specify them when invoking compass compile. E.g. `compass compile src/foo.sass`
### Configuration:
* The entire configuration infrastructure has been re-written to make it
easier to support the various sources of configuration data (project type,
config file, command line, and hard coded defaults)
* Whether to generate relative links to assets is now controlled by a
separate boolean configuration flag called `relative_assets` in the
configuration file and `--relative-assets` on the command line.
Setting `http_images_path` to `:relative` is deprecated.
* You may now configure the http locations for your project by simply setting
`http_path` for the top level path of the project. You
may also set `http_images_dir`, `http_stylesheets_dir`, and
`http_javascripts_dir` relative to the `http_path` instead of
setting the absolute `http_XXX_path` counterparts.
* You may now configure the fonts directory for your project (fonts_dir).
By default, for standalone projects, it is the "fonts" subdirectory of
your css directory. Rails projects will default to "public/fonts".
* The sass cache location can now be set in the compass config
file using the `cache_dir` property and the cache can be disabled by setting
`cache = false`.
* In your configuration file, setting `http_images_path` to `:relative` is
deprecated in favor of setting `relative_assets` to `true`
### Rails:
**IMPORTANT:** Existing rails projects _must_ change their compass initializer file to:
require 'compass'
rails_root = (defined?(Rails) ? Rails.root : RAILS_ROOT).to_s
Compass.add_project_configuration(File.join(rails_root, "config", "compass.rb"))
Compass.configure_sass_plugin!
Compass.handle_configuration_change!
* The rails template has been updated to use the latest haml and compass versions.
* Compass now supports Rails 3, but asset_host and cache_buster integration is disabled.
* When configuring Sass during initialization,
Compass now passes the template locations as an array of tuples
instead of as a hash. This preserves ordering in all versions
of ruby and ensures that the deprecated imports do not take precedence.
### Compass Core:
* A new helper function `stylesheet-url(path)` can now be used to refer
to assets that are relative to the css directory.
* Compass sprite mixins are now more flexible and feature rich.
* Fixed the `append-selector` function to allow comma-delimited selectors
for both arguments instead of just the first
* There is no longer any outline on unstyled links in the :active and :focused states.
* New CSS3 Compatibility Mixins. You can import them all with `@import compass/css3.sass`
Read the [documentation][http://compass-style.org/reference/compass/css3/].
* The import for `+inline-block` has moved from "compass/utilities/general/inline_block"
to "compass/css3/inline-block".
* The import for `+opacity` has moved from "compass/utilities/general/opacity"
to "compass/css3/opacity"
* Note: If you are using the `+opacity` or `+inline-block` mixins,
you may need to update your imports.
* `+min-height`, `+min-width`, and `+bang-hack` mixins in the
compass/utilities/general/min.sass module. (Credit: [Adam Stacoviak][adamstac])
* Split out `+hide-text` as its own mixin. (Credit: [Andrew Vit][avit])
* Support :first-child and :last-child pseudo selectors for +horizontal-list. (Credit: Cody Robbins)
* Added new helper functions: `image_width("path/to/image.png")` & `image_height("path/to/image.png")` that return the size in pixels. (Credit: Deepak Jois & Richard Aday)
* The `pretty-bullets` mixin will now infer the image dimensions by
reading the image file if the image dimensions are not provided.
* In addition to installing the `binding.xml`, the configuration constant
`$use-mozilla-ellipsis-binding` must now be set to `true`
to support any version of mozilla less than 3.6 in the `+ellipsis` mixin.
### Blueprint:
* The useless blueprint "modules" folder will be removed. Please update your
blueprint imports by removing the modules folder. Deprecation warnings will be
emitted if you use the old imports.
* Blueprint mixins that used to accept a "body selector" argument, are now
deprecated, instead you should pass `true` to them and mix them into
the selector of your choice.
* Make the primary blueprint mixins easier to use by allowing them to be
nested when passing true as the first argument.
The old approach of passing a selector as the first argument is now deprecated
in favor of a simple flag to indicate nesting or not.
* Take margins into account in liquid grid. (Credit: Christoffer Eliesen)
### YUI:
* YUI was upgraded to 2.7.0
* Yahoo has deprecated the YUI CSS framework, as such YUI has been extracted to a plugin.
If you use it, please [install it](http://github.com/chriseppstein/yui-compass-plugin).
### Extensions:
* Extensions can now be installed locally by unpacking them into a project's
"extensions" directory. Rails projects use "vendor/plugins/compass/extenstions".
* Extensions can deliver html to projects if they like. The html can be in
haml and will be transformed to html and can contain inline, compass-enabled
sass.
* All files can be processed using ERB before being copied into the user's
project.
* Compass extensions can now add support for other application frameworks.
These extensions can help compass understand the project structure of that
framework as well as provide runtime integration for ruby-based apps.
Contact me if you plan to do this -- the first couple times may be a little
rough.
* Compass extensions can now add new command line commands. Contact me if you
plan to do this -- the first couple times may be a little rough.
* Extensions can now provide help documentation just after a project is
created and on demand when the user uses the command line help system.
This can be done via the manifest file or by adding a USAGE.markdown file
at the top level of the framework template.
### Miscellaneous:
* Lot of new docs can be found at: [http://compass-style.org/](http://compass-style.org/).
* The compass configuration object is no longer a singleton, this makes it
possible for other ruby software to manage multiple compass projects at a
time.
* Compass no longer requires rubygems in order to work, this is a ruby
best-practice.
* The command line tool is now tested using the cucumber testing framework.
* Removed support for the rip package manager.
* Removed the dependency on RMagic for grid image generation.
(Credit: [Richard Wöber][der-rich])
* The `unobtrusive-logo` mixin is deprecated and will be removed.
If you use this, please move the source to your project.
0.8.17 (September 24, 2009)
---------------------------
* The enumerate function now accepts an optional fourth parameter that specifies the separator to be used.
Enables fixing a bug in the Compass 960 Plugin.
0.8.16 (September 12, 2009)
---------------------------
* Fixed a bug in compass that assumed compass extensions would provide stylesheets.
0.8.15 (September 5, 2009)
--------------------------
* Upgrade the FSSM library to 0.0.6 to fix bugs on windows.
0.8.14 (September 2, 2009)
--------------------------
* Upgrade the FSSM library to 0.0.4 to fix bugs and enable FS Events on Mac OS.
0.8.13 (August 30, 2009)
------------------------
* [Blueprint] Mixins have been added for these as +prepend-top and +append-bottom and grid classes will be generated by +blueprint-grid.
* [Command Line] The watch mode has been re-implemented to use the FSSM library by Travis Tilley. OSX users will
now have support for filesystem monitoring. Fixes an infinite looping bug that occured with syntax users.
0.8.12 (August 22, 2009)
------------------------
Bug Fix Release:
* [Compass Core] Bug fix to sprites: fixed width and height assignments for x and y position variables
* Ruby 1.9.1 fix: binding for parse_string
* [Rails] Don't suggest creating a stylesheet link to partials.
0.8.10 (August 16, 2009)
------------------------
Bug Fix Release:
* Write files in binary mode to avoid data corruption when installing images on windows.
Fixes [Issue #39](http://github.com/chriseppstein/compass/issues/#issue/39)
0.8.9 (August 9, 2009)
----------------------
Bug Fix Release:
* [Blueprint] The default screen.sass generated invalid selectors due to improper nesting. A better fix is coming in the next release.
0.8.8 (July 21, 2009)
---------------------
Bug Fix Release:
* [Compass Core] Fixed a bug in alternating_rows_and_columns. Improper nesting caused some styles to be improperly rendered.
[Commit](http://github.com/chriseppstein/compass/commit/e277ed2cd3fded0b98ddaa87fc4d3b9d37cb7354)
* [YUI] Fixed a bug in yui grids where the .first div wouldn't get the right styles in some rare cases due to incorrect nesting.
[Commit](http://github.com/chriseppstein/compass/commit/4bfcef4f376ee6e5d5a2b47419d2f21ef4c6eff8)
0.8.7 (July 09, 2009)
---------------------
Bug Fix Release:
* Load haml-edge only if it's all new and shiny. Closes GH-26.
[Commit](http://github.com/chriseppstein/compass/commit/59a6067b3a67a79bfd9a5ce325fc1be4bb6c9e78)
* [Blueprint] Added more descriptive comments to the Blueprint IE template.
[Commit](http://github.com/chriseppstein/compass/commit/8684966be1e8166a986ae81abd3daf6c44ed4f94)
* [Rails] Fixed a bug in rails integration if the request is not set on the controller.
[Commit](http://github.com/chriseppstein/compass/commit/7fba6028d8073a9124a6505aab9246b5b459db34)
* [Blueprint] Fixed a bug in the calculations for the +colborder mixin. Closes GH-25.
[Commit](http://github.com/chriseppstein/compass/commit/d2b1370c80a32f70ae6ec94126b737f4f0fc0851)
0.8.6 (July 08, 2009)
---------------------
### Rails
* The rails installer now correctly references the haml 2.2 dependency.
[Commit](http://github.com/chriseppstein/compass/commit/85bb337f50a3a3dfaafa2820d5463f7296140c9e)
by [Filip Tepper][filiptepper].
* When installing into a new rails project, set the http paths correctly for stylesheets and javascripts
in the configuration file.
[Commit](http://github.com/chriseppstein/compass/commit/94e9696b30a9a9fd750c45e6fe3c2bc93eba506a)
* Fixed a bug in asset hosts support when compiling outside the context of a controller.
[Commit](http://github.com/chriseppstein/compass/commit/6b8bbd22b13ef4c329777913a633948e66e3da99)
### Command Line
* Fixed a bug that caused the output after installing to not display the conditional comments.
[Commit](http://github.com/chriseppstein/compass/commit/48a0356ad8bc7b965e64f82498a9adcc1872abad)
### Compass Core
* Fixed a copy & paste error in image_url() that caused the http_images_path to not get picked up unless the
http_stylesheets_path was also set.
[Commit](http://github.com/chriseppstein/compass/commit/b7a9772efb89b2b882d3fafe02813c0fc650719a)
0.8.5 (July 06, 2009)
---------------------
The Compass::TestCase class now inherits from ActiveSupport::TestCase if it exists.
[Commit](http://github.com/chriseppstein/compass/commit/71d5ae8544d1c5ae49e28dcd6b3768fc39d7f01c)
0.8.4 (July 06, 2009)
---------------------
Fixed a bug in rails integration introduced in 0.8.3.
0.8.3 (July 06, 2009)
---------------------
Note: Compass now depends on the stable release of haml with version 2.2.0 or greater.
### Compass Core
* A new helper function `stylesheet_url(path)` can now be used to refer to assets that are relative to the css directory.
[Commit](http://github.com/chriseppstein/compass/commit/ff5c8500144272ee2b94271b06cce1690cbbc000).
* Cross browser ellipsis mixin is now available. Use `compass -p ellipsis` to install it into your project since it
requires some additional assets.
[Commit](http://github.com/chriseppstein/compass/commit/3d909ceda997bdcde2aec09bd72e646098389e7d).
### Blueprint
* The +colruler mixin now accepts an argument for the color.
[Commit](http://github.com/chriseppstein/compass/commit/a5393bbb7cd0941ab8add5be188aea1d6f9d4b00)
by [Thomas Reynolds][tdreyno].
### Extensions
* A bug was fixed related to how javascript installation as part of an extension manifest.
[Commit](http://github.com/chriseppstein/compass/commit/a5393bbb7cd0941ab8add5be188aea1d6f9d4b00)
by [dturnbull][dturnbull].
* When installing a file, the :like option can now be set to have it installed into the
same location as what it is like. E.g. `file 'foo.xml', :like => :css` will install
the foo.xml file into the top level of the project's css directory.
[Commit](http://github.com/chriseppstein/compass/commit/21cfce33db81e185ce5517818844a9849b5a836e).
### Configuration
* Setting `http_images_path` to `:relative` is now **deprecated**. Instead, please set `relative_assets` to
`true`.
[Commit](http://github.com/chriseppstein/compass/commit/956c437fe9ffaad08b6b34d91b6cfb80d6121a2f).
* New configuration option `http_path` can be used to set the project's path relative to the server's root.
Defaults to "/". The http paths to images, stylesheets, and javascripts are now assumed to be relative to that
path but can be overridden using the `http_images_path`, `http_css_path`, `http_javascripts_path`.
[Commit](http://github.com/chriseppstein/compass/commit/6555ab3952ae37d736d54f43ee7053c2a88f4a69).
### Command Line
* A new command line option `--relative-assets` can be used to cause links to assets generated
via compass helper functions to be relative to the target css file.
[Commit](http://github.com/chriseppstein/compass/commit/956c437fe9ffaad08b6b34d91b6cfb80d6121a2f).
0.8.2 (July 04, 2009)
---------------------
Fixed a bug that caused touch to fail on windows due to open files. (Contributor: Joe Wasson)
0.8.1
-----
Fixed some build issues and a bug in the rewritten --watch mode that caused changes to partials to go unnoticed.
0.8.0
-----
### Rails
* image_url() now integrates with the rails asset handling code when
stylesheets are generated within the rails container.
**This causes your rails configuration for cache busting and asset hosts
to be used when generating your stylesheets**. Unfortunately, all
that code runs within the context of a controller, so the stylesheets
have to be generated during first request to use this functionality. If you
need to compile stylesheets offline, use the compass configuration file to set
the asset_host
and asset_cache_buster
.
[Commit](http://github.com/chriseppstein/compass/commit/998168160b11c8702ded0a32820ea15b70d51e83).
* An official Rails template for Compass is now [provided][rails_template].
[Commit](http://github.com/chriseppstein/compass/commit/f6948d1d58818ef8babce8f8f9d775562d7cd7ef)
by [Derek Perez][perezd].
### Blueprint
* The Blueprint port has been upgraded to match Blueprint 0.9. The following changes were made as part
of that project:
* Removed body margins from blueprint scaffolding by default.
The old body styles can be reinstated by mixing +blueprint-scaffolding-body into your body selector(s).
[Commit](http://github.com/chriseppstein/compass/commit/45af89d4c7a396fae5d14fab4ef3bab23bcdfb6a)
by [Enrico Bianco][enricob].
* A bug in the calculations affecting the +colborder mixin has been fixed.
[Commit](http://github.com/chriseppstein/compass/commit/4b33fae5e5c5421580ba536116cb10194f1318d1)
by [Enrico Bianco][enricob].
Related [commit](http://github.com/chriseppstein/compass/commit/0a0a14aab597d2ec31ff9d267f6ee8cfad878e10).
* Blueprint now has inline form support. Mix +blueprint-inline-form into a form selector to make it inline.
[Commit](http://github.com/chriseppstein/compass/commit/56c745b939c763cfcc5549b54979d48ab1309087)
by [Enrico Bianco][enricob].
* Please update the conditional comment that surrounds your IE stylesheet to use "lt IE 8" as the condition
as these styles are not needed in IE8. New blueprint projects will now use this conditional as their default.
[Commit](http://github.com/chriseppstein/compass/commit/77f6e02c0ec80d2b6fd19e611ced02be003c98ae)
by [Enrico Bianco][enricob].
* Explicitly define image interpolation mode for IE so that images aren't jagged when resizing.
[Commit](http://github.com/chriseppstein/compass/commit/63075f82db367913efcce5e1d0f5489888e86ca4)
by [Enrico Bianco][enricob].
* When starting a new project based on Blueprint, a more complete screen.sass file will be
provided that follows compass best practices instead of matching blueprint css exactly. A
partials/_base.sass file is provided and already set up for blueprint customization.
[Commit](http://github.com/chriseppstein/compass/commit/11b6ea14c3ee919711fa4bdce349f88b64b68d51)
* The sizes and borders for form styling can now be altered via mixin arguments.
[Commit](http://github.com/chriseppstein/compass/commit/b84dd3031b82547cff8e1ef1f85de66d98cd162b)
by [Thomas Reynolds][tdreyno].
* Grid borders can now be altered via mixin arguments.
[Commit](http://github.com/chriseppstein/compass/commit/0a0a14aab597d2ec31ff9d267f6ee8cfad878e10)
by [Thomas Reynolds][tdreyno].
* The reset file for blueprint has moved from compass/reset.sass to blueprint/reset.sass. Please
update your imports accordingly. Also note that some of the reset mixin names have changed
(now prefixed with blueprint-*).
[Commit](http://github.com/chriseppstein/compass/commit/2126240a1a16edacb0a758d782334a9ced5d9116)
by [Noel Gomez][noel].
### Compass Core
* **Sprites**. A basic sprite mixin is now available. Import compass/utilities/sprites.sass and use the +sprite-img
mixin to set the background image from a sprite image file. Assumes every sprite in the sprite image
file has the same dimensions.
[Commit](http://github.com/chriseppstein/compass/commit/1f21d6309140c009188d350ed911eed5d34bf02e)
by [Thomas Reynolds][tdreyno].
* **Reset**. The compass reset is now based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/).
which makes no attempt to apply base styles like the blueprint reset does. **Existing compass projects
will want to change their reset import to point to blueprint/reset.sass** -- which is where the old
default reset for compass projects now lives -- see the blueprint notes above for more information.
[Commit](http://github.com/chriseppstein/compass/commit/2126240a1a16edacb0a758d782334a9ced5d9116)
by [Noel Gomez][noel].
* A bug was fixed in the tag_cloud mixin so that it actually works.
[Commit](http://github.com/chriseppstein/compass/commit/be5c0ff6731ec5e0cdac73bc47f5603c3db899b5)
by [Bjørn Arild Mæland][Chrononaut].
### Sass Extensions
* The inline_image(image_path)
function can now be used to generate a data url that embeds the image data in
the generated css file -- avoiding the need for another request.
This function works like image_url()
in that it expects the image to be a path
relative to the images directory. There are clear advantages and disadvantages to this approach.
See [Wikipedia](http://en.wikipedia.org/wiki/Data_URI_scheme) for more details.
NOTE: Neither IE6 nor IE7 support this feature.
[Commit](http://github.com/chriseppstein/compass/commit/5a015b3824f280af56f1265bf8c3a7c64a252621).
### Configuration
* **Asset Hosts**. You can now configure the asset host(s) used for images via the image_url() function.
Asset hosts are off unless configured and also off when relative urls are enabled.
[Commit](http://github.com/chriseppstein/compass/commit/ef47f3dd9dbfc087de8b12a90f9a82993bbb592e).
In your compass configuration file, you must define an asset_host algorithm to be used like so:
# Return the same host for all images:
asset_host {|path| "http://assets.example.com" }
# Return a different host based on the image path.
asset_host do |path|
"http://assets%d.example.com" % (path.hash % 4)
end
* **Configurable Cache Buster**. You can now configure the cache buster that gets placed at the end of
images via the image_url function. This might be useful if you need to coordinate the query string
or use something other than a timestamp.
[Commit](http://github.com/chriseppstein/compass/commit/ef47f3dd9dbfc087de8b12a90f9a82993bbb592e)
Example:
asset_cache_buster do |path, file|
"busted=true"
end
* You can now set/override arbitrary sass options by setting the sass_options
configuration property
to a hash. [Commit](http://github.com/chriseppstein/compass/commit/802bca61741db31da7131c82d31fff45f9323696).
* You can now specify additional import paths to look for sass code outside the project.
[Commit](http://github.com/chriseppstein/compass/commit/047be06a0a63923846f53849fc220fb4be69513b).
This can be done in two ways:
1. By setting additional_import_paths
to an array of paths.
2. By (repeatedly) calling add_import_path(path)
* The compass configuration can now be placed in PROJECT_DIR/.compass/config.rb if you so choose.
[Commit](http://github.com/chriseppstein/compass/commit/69cf32f70ac79c155198d2dbf96f50856bee9504).
### Command Line
* **Watch Improvements** The watch command was rewritten for robustness and reliability. The most
important change is that generated css files will be deleted if the originating sass file is removed while
watching the project. [Commit](http://github.com/chriseppstein/compass/commit/0a232bd922695f6f659fac9f90466745d4425839).
* The images and javascripts directories may now be set via the command line.
[Commit](http://github.com/chriseppstein/compass/84aec053d0109923ea0208ac0847684cf09cefc1).
* The usage output (-h) of the command-line has been reformatted to make it more readable and understandable.
[Commit](http://github.com/chriseppstein/compass/f742f26208f4c5c783ba63aa0cc509bb19e06ab9).
* The configuration file being read can now be specified explicitly using the -c option.
This also affects the output location of the --write-configuration command.
NOTE: The -c option used to be for writing the configuration file, an infrequently used option.
[Commit](http://github.com/chriseppstein/compass/d2acd343b899db960c1d3a377e2ee6f58595c6b1).
* You can now install into the current working directory by explicitly setting the command line mode to -i
and providing no project name.
[Commit](http://github.com/chriseppstein/compass/f742f26208f4c5c783ba63aa0cc509bb19e06ab9).
### Compass Internals
* Some internal code was reorganized to make managing sass extensions and functions more manageable.
* Some internal code was reorganized to make managing ruby application integration more manageable.
* The compass unit tests were reorganized to separate rails testing from other tests.
* The [Rip Packaging System](http://hellorip.com) is now supported.
[Commit](http://github.com/chriseppstein/compass/commit/56f36577c7654b93a349f74abf274327df23402b)
by [Will Farrington](http://github.com/wfarr).
* A [licence is now available](http://github.com/chriseppstein/compass/blob/master/LICENSE.markdown)
making the copyrights and terms of use clear for people who care about such things.
0.6.14
------
Extracted the css validator to an external gem that is only required if you try to use the validation feature.
This makes the compass gem a lot smaller (0.37MB instead of 4MB). To install the validator:
sudo gem install chriseppstein-compass-validator --source http://gems.github.com/
0.6.8 thru 0.6.13
-----------------
The compass gem is now built with Jeweler instead of Echoe. No changes to speak of. These versions were bug
fixes and working out the new release process.
0.6.7
-----
Bug fix release.
### Rails
The output_style will no longer be set in the compass.config file. Instead compass will use the runtime rails environment to set a sensible default.
### Command Line
The Sass cache directory will be placed into the sass directory of the project instead of the directory from where the compass command was ran.
### Compass Core
Extracted two new mixins from +horizontal-list. The new +horizontal-list-container and +horizontal-list-item mixins can be used to build your
horizontal list when you need more control over the selectors (E.g. when working with nested lists).
0.6.6
-----
The Haml project now releases a gem called haml-edge that is built from the haml master branch instead of stable. Compass now depends on this gem and will continue to do so until haml 2.2 is released. This should reduce the number of installation problems that have been encountered by new users.
### Command Line
* Fixed a bug that had broken the --write-configuration (-c) option.
* The --force option will now force recompilation. Useful when the stylesheets don't appear to need a recompile according to the file timestamps.
### Unit tests
* Some unit tests were cleaned up for clarity and to better take advantage of the compass project management facilities.
0.6.5
-----
### Compass Core
Converted all mixins definitions referencing images to use the new sass function image\_url()
. The following mixins were affected:
* +pretty-bullets
* +replace-text
The calls to these mixins should now pass a path to the image that is relative to the images directory of the project.
### Command Line
* Required frameworks specified from the command line will now be added into the initial project configuration file.
0.6.4
-----
### Command Line
Added a command line option --install-dir that will emit the directory where compass is installed. Useful for debugging and drilling into the compass examples and libraries.
0.6.3
-----
### Rails
Bug fix: The http_images_path configuration default should be "/images" instead of "/public/images".
### Command Line
These changes, coupled with upcoming changes to Sass result in significantly reduced time spent on compilation for large projects.
* The compass command line will no longer recompile sass files that haven't changed (taking import dependencies into account).
* The compass command line will now respect the -q (quiet) option during compilation. Additionally, the quiet option will be set by default when watching a project for changes.
0.6.2
-----
### Blueprint
Split the push and pull mixins into sub-mixins that separate the common styles from the ones that vary. The generated css when using presentational class names will be smaller as a result. The existing +push
and +pull
mixins continue to work as expected. The following mixins were added:
+push-base
+push-margins
+pull-base
+pull-margins
Additonally, the liquid plugin was updated to have a span mixin that matches elsewhere.
### YUI
Added Yahoo's version of the css reset. To use it, mix into the top level of your project:
@import yui/modules/reset.sass
+reset
### Rails
* Conditionally defining #blank? on String/NilClass (Erik Bryn )
* Set compass environment in plugin based on RAILS_ENV (Lee Nussbaum )
0.6.1
-----
Maintenance release that fixes several bugs in the handling of configuration files.
0.6.0
-----
### New Core Functionality: **Patterns**
Patterns give a framework or plugin access to the compass installer framework
to install customizable sass, html as well as image and javascript assets.
A pattern is a folder in the plugin's templates directory. It must
have a manifest file that tells compass what to install and where.
Unlike the project template, a pattern can be stamped out any number of
times.
It is best for pattern stylesheets to only provide example usage to get
the user started. All the core styles for the pattern should be
distributed as part of the framework's stylesheets as mixins to
facilitate easy upgrades and bug fixing on the part of the pattern's
maintainer.
Example Usage:
compass --framework blueprint --pattern buttons
Please read the
[Wiki Page](http://wiki.github.com/chriseppstein/compass/patterns) for more information.
### New Command-line options:
1. --validate
Validate your project's compiled css. Requires java and probably only works on Mac and Unix.
2. --grid-img [DIMENSIONS]
Generate a background image to test grid alignment. Dimension is given as
+. Defaults to 30+10.
3. -p, --pattern PATTERN
When combined with with the --framework option, will stamp a plugin's pattern named PATTERN.
4. -n, --pattern-name NAME
When combined with the --pattern option, the pattern that gets stamped out will
be isolated in subdirectories named NAME.
5. -c, --write-configuration
Emit a compass configuration file into the current directory, taking any existing configuration
file and any command line options provided into account. (command line options override
configuration file options).
### New Sass Functions:
Compass projects can call these sass functions within their sass files, if you find them useful.
1. enumerate(prefix, start, end)
Generates selectors with a prefix and a numerical ending
counting from start to end. E.g. enumerate("foo", 1, 3) returns "foo-1, foo-2, foo-3"
2. image_url(path)
Uses the compass configuration to convert a path relative to the compass
project directory to a path that is either absolute for serving in an HTTP
context or that is relative to whatever css file the function was being
compiled into. In the future, this function may also tap into the rails
asset host configuration.
### New Compass Core Mixins
1. +float-left
& +float-right
In order to include fixes for IE's double-margin bug universally,
floats were implemented as a utility mixins. These are available by importing
compass/utilities/general/float.sass which also imports the clearfix module.
2. +pie-clearfix
Implementation of the
[position-is-everything clearfix](http://www.positioniseverything.net/easyclearing.html)
that uses content :after.
### Blueprint 0.8
The Compass port of Blueprint has been upgraded from 0.7.1 to 0.8.0. The 0.8.0 release
brings many bug fixes and a few backward incompatible changes if you use it's presentational
classnames (you don't do that, do you?). Upgrading to 0.8 is automatic when you upgrade to
compass 0.6.0. The Blueprint team didn't release a detailed changelog for me to point at here.
One of the key features of the release was the inclusion of three new core blueprint plugins
(a.k.a. folders you can copy). These are what prompted the development of the compass patterns
feature and two of them are packaged as patterns:
1. Buttons
To install: compass --framework blueprint --pattern buttons
Then follow your nose.
2. Link Icons
To install: compass --framework blueprint --pattern link\_icons
Then follow your nose.
The third plugin is the RTL (right-to-left) plugin. To use this one, simply import it after the import
of the blueprint grid and your mixins will be redefined to work in a left to right manner. Additionally,
it provides +rtl-typography mixin that works in conjunction with +blueprint-typography and should be mixed
in with it.
Lastly, I've rewrote some of the presentational class name generation code so that it very nearly
matches the blueprint CSS. Please note that they are not 100% the same because we fix some bugs
that are not yet fixed in blueprint-css and we use a different clearfix implementation.
### Bug Fixes
1. A Safari bug related to the +clearfix mixin was resolved.
2. Running the compass command line installer a second time.
### Bugs Introduced
Almost definitely. Please let me know if you encounter any problems and I'll get a patch out
[tdreyno]: http://github.com/tdreyno
[noel]: http://github.com/noel
[enricob]: http://github.com/enricob
[perezd]: http://github.com/perezd
[Chrononaut]: http://github.com/Chrononaut
[rails_template]: http://github.com/chriseppstein/compass/raw/4e7e51e2c5491851f66c77abf3f15194f2f8fb8d/lib/compass/app_integration/rails/templates/compass-install-rails.rb
[dturnbull]: http://github.com/dturnbull
[filiptepper]: http://github.com/filiptepper
[pixelmatrix]: http://github.com/pixelmatrix
[jsilver]: http://github.com/jsilver
[avit]: http://github.com/avit
[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/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
v0.12.2~dfsg/doc-src/content/frameworks.haml 0000644 0000000 0000000 00000011535 11771656742 017600 0 ustar root root ---
title: Plugins and frameworks
crumb: Plugins and frameworks
---
%h3
Adding Frameworks to Compass
%ul
%li
Add a folder under
%code
compass/frameworks
%li
Register it by creating a file in
%code
compass/lib/compass/frameworks/
%li
Require it in
%code
compass/lib/compass/frameworks.rb
\.
%h3
Supported Frameworks
%table.datagrid
%tr
%th Framework
%th Version
%th Status
%th Homepage
%th Documentation
%tr
%td Compass Core
%td 0.10
%td pre5
%td
%a
http://compass-style.org
%td
You are currently viewing the Compass docs.
%tr
%td Blueprint
%td 0.8.0
%td Stable
%td
%a
http://blueprintcss.org/
%td
%a{:href => "/reference/blueprint/"}
Blueprint docs
%tr
%td YUI
%td 2.5.2
%td Beta
%td
%a
http://developer.yahoo.com/yui/grids/
%td
%a{:href => "http://wiki.github.com/chriseppstein/yui-compass-plugin/"}
YUI docs
%tr
%td 960
%td 1.0
%td Stable
%td
%a
http://960.gs/
%td
%a{:href => "http://github.com/chriseppstein/compass-960-plugin"}
Compass960 plugin on Github
%h3
Compass plugins
%p
Compass allows you to easily download, install, and upgrade plugins that share design and design elements between users and projects.
%p
For instructions on how to install a plugin, please refer to the individual plugin's instructions.
%h3 Released Plugins
%h4 Frameworks
%ul
%li
%a{ :href => "http://github.com/chriseppstein/compass-960-plugin" }
960.gs
– a lightweight CSS framework for producing fixed-width grid-based layouts
%li
%a{ :href => "http://github.com/adamstac/grid-coordinates" }
Grid Coordinates
– a lightweight CSS framework for producing fixed-width grid-based layouts, based on
%a{ :href => "http://1kbgrid.com/" }
1KB CSS Grid
(which was loosely based on 960.gs). Supports nested grids.
%li
%a{ :href => "http://github.com/alexcabrera/graphpaper" }
GraphPaper
– a lightweight CSS framework for producing fixed-width grid-based layouts
%li
%a{ :href => "http://github.com/tdreyno/compass-baseline" }
Baseline
– a CSS framework for producing grid-based layouts (up to 8 columns) with typography. See
%a{ :href => "http://baselinecss.com/" }
http://baselinecss.com/
%li
%a{ :href => "http://github.com/bangpound/compass-drupal-zen-plugin" }
Drupal Zen
– adds the Drupal Zen theme STARTERKIT to Compass
%li
%a{ :href => "http://github.com/ericam/compass-susy-plugin" }
Susy
– a semantic CSS framework creator. Susy is an expert at fluid grids in an elastic (or fluid, or fixed) shell that will never activate the horizontal scroll bar.
%h3
Colors
%ul
%li
%a{ :href => "http://github.com/chriseppstein/compass-colors" }
Compass Colors
– for working with colors in Sass, and generating color themes
%h3
Widgets
%ul
%li
%a{ :href => "http://github.com/imathis/fancy-buttons" }
Fancy Buttons
–
%a{ :href => "http://sass-lang.com/tutorial.html#mixins" }
mixins
to get beautiful buttons with
%span.caps
CSS
gradients that degrade nicely. Uses Compass Colors.
%h3
Misc
%ul
%li
%a{ :href => "http://github.com/tdreyno/compass-slickmap" }
Slickmap
– plugin for
%a{ :href => "http://astuteo.com/slickmap/" }
slickmap
sitemaps
%h3
Sass Libraries
%p
Libraries are simply Sass stylesheets or
%a{ :href => "http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials" }
partials
\.
%ul
%li
%a{ :href => "http://github.com/handcrafted/handcrafted-compass-mixins/blob/master/_border-radius.scss" }
Handcrafted Rounded Corners
%li
%a{ :href => "http://github.com/ntreadway/JQuery.tools.tabs.scss" }
Ntreadway JQuery tools tabs
%h3
Plugins that are Works-In-Progress
%ul
%li
%a{ :href => "http://github.com/hpoydar/compass-aristo-plugin" }
Aristo
%li
%a{ :href => "http://github.com/marnen/compass-elastic-plugin" }
Elastic
%li
%a{ :href => "http://github.com/jtoy/compass-fluid960-plugin" }
Fluid 960
%li
%a{ :href => "http://github.com/kosmas58/compass-jquery-plugin" }
jQuery
%li
%a{ :href => "http://github.com/djmaze/compass-yaml-plugin" }
%span.caps
YAML
%h3
Other Sass-based Projects
%ul
%li
%a{ :href => "http://github.com/jazen/css" }
Jazen’s
%span.caps
CSS
Framework
– Sass library that
%em
should
be a compass plugin.
%li
%a{ :href => "http://github.com/teejayvanslyke/sassafras" }
Sassafras
– Color Scheme Generator for Sass
%li
%a{ :href => "http://github.com/danboy/tenplate" }
Tenplate
– Another Sass library with rails helpers.
v0.12.2~dfsg/doc-src/content/copyright.markdown 0000644 0000000 0000000 00000002015 11771656742 020322 0 ustar root root ---
title: Compass Copyright
crumb: Copyright
body_id: copyright
layout: article
---
Compass Documentation
by Christopher M. Eppstein
is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License .
Permissions beyond the scope of this license may be available at http://compass-style.org/copyright/ .
v0.12.2~dfsg/doc-src/content/CHANGELOG-v0-11-beta.markdown 0000644 0000000 0000000 00000032643 11771656742 021266 0 ustar root root ---
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. v0.12.2~dfsg/doc-src/content/search-data.js.erb 0000644 0000000 0000000 00000001753 11771656742 020037 0 ustar root root function unique(arrayName)
{
var newArray = new Array();
label: for (var i = 0; i < arrayName.length; i++)
{
for (var j = 0; j < newArray.length; j++)
{
if (newArray[j] == arrayName[i])
continue label;
}
newArray[newArray.length] = arrayName[i];
}
return newArray;
}
function search(query, callback) {
var terms = $.trim(query).replace(/[\W\s_]+/m,' ').toLowerCase().split(/\s+/);
var matching_ids = null;
for (var i = 0; i < terms.length; i++) {
var term = terms[i];
var exactmatch = index.terms[term] || [];
var approxmatch = index.approximate[term] || [];
var ids = unique(exactmatch.concat(approxmatch));
if (matching_ids) {
matching_ids = $.grep(matching_ids, function(id) {
return ids.indexOf(id) != -1;
});
} else {
matching_ids = ids;
}
}
callback($.map(matching_ids, function(id){ return index.items[id]; }))
}
var index = <%= search_index.to_json %>;
v0.12.2~dfsg/doc-src/content/reference/ 0000755 0000000 0000000 00000000000 11771656742 016506 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/ 0000755 0000000 0000000 00000000000 11771656742 020153 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/utilities.haml 0000644 0000000 0000000 00000000635 11771656742 023035 0 ustar root root ---
title: Compass Utilities
crumb: Utilities
framework: compass
sidebar: true
stylesheet: compass/_utilities.scss
classnames:
- reference
- core
- utilities
meta_description: Provides basic mixins for common styling patterns.
layout: core
nav_stylesheet: compass/_utilities.scss
---
- render 'reference' do
%p
The Compass Utilities module provides some basic mixins
for common styling patterns.
v0.12.2~dfsg/doc-src/content/reference/compass/reset/ 0000755 0000000 0000000 00000000000 11771656742 021275 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/reset/utilities.haml 0000644 0000000 0000000 00000000727 11771656742 024161 0 ustar root root ---
title: Compass Reset Utilities
crumb: Reset Utilities
framework: compass
stylesheet: compass/reset/_utilities.scss
layout: core
meta_description: Mixins for resetting elements.
classnames:
- reference
- core
- utilities
---
- render 'reference' do
: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.
v0.12.2~dfsg/doc-src/content/reference/compass/css3/ 0000755 0000000 0000000 00000000000 11771656742 021026 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/css3/font_face.haml 0000644 0000000 0000000 00000000623 11771656742 023616 0 ustar root root ---
title: Compass Font Face
crumb: Font Face
framework: compass
stylesheet: compass/css3/_font-face.scss
meta_description: Specify a downloadable font face for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
Provides a mixin to support @font-face. See CSS3 spec: @font-face .
v0.12.2~dfsg/doc-src/content/reference/compass/css3/background_origin.haml 0000644 0000000 0000000 00000000715 11771656742 025362 0 ustar root root ---
title: Compass Background Origin
crumb: Background Origin
framework: compass
stylesheet: compass/css3/_background-origin.scss
meta_description: Specify the background origin for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
Provides a mixin for the background origin property. See CSS3 spec: background-origin property .
v0.12.2~dfsg/doc-src/content/reference/compass/css3/columns.haml 0000644 0000000 0000000 00000000627 11771656742 023356 0 ustar root root ---
title: Compass Columns
crumb: Columns
framework: compass
stylesheet: compass/css3/_columns.scss
meta_description: Specify a columnar layout for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
Provides a mixin for the CSS3 Multi-column layout module. See CSS3 spec: Multi-colum layout module .
v0.12.2~dfsg/doc-src/content/reference/compass/css3/box_sizing.haml 0000644 0000000 0000000 00000000714 11771656742 024046 0 ustar root root ---
title: Compass Box Sizing
crumb: Box Sizing
framework: compass
stylesheet: compass/css3/_box-sizing.scss
meta_description: Specify the box sizing for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
Provides a mixin for the box-sizing
property, which allows you to change how the box model works. See W3C CSS3 spec: box-sizing .
v0.12.2~dfsg/doc-src/content/reference/compass/css3/background_size.haml 0000644 0000000 0000000 00000001000 11771656742 025031 0 ustar root root ---
title: Compass Background Size
crumb: Background Size
framework: compass
stylesheet: compass/css3/_background-size.scss
meta_description: Specify the background size for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
This mixin provides cross browser access to the CSS3 background-size
attribute using supported vendor prefixes. See CSS3 spec: background-size .
v0.12.2~dfsg/doc-src/content/reference/compass/css3/shared.haml 0000644 0000000 0000000 00000000645 11771656742 023144 0 ustar root root ---
title: Shared CSS3 Utilities
crumb: Shared Utilities
framework: compass
stylesheet: compass/css3/_shared.scss
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
This module provides support to the other CSS3 modules.
You may want to use it to provide your own support for other
CSS3 proposals as they are being worked on and before support
is added to compass.
v0.12.2~dfsg/doc-src/content/reference/compass/css3/transform-legacy.haml 0000644 0000000 0000000 00000000676 11771656742 025157 0 ustar root root ---
title: Compass Transform (Legacy)
crumb: Transform (legacy)
framework: compass
stylesheet: compass/css3/_transform-legacy.scss
meta_description: Specify the 2D transformation for many browsers.
layout: core
deprecated: true
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p.warning
This import is deprecated. Please import
transform instead.
v0.12.2~dfsg/doc-src/content/reference/compass/css3/transition.haml 0000644 0000000 0000000 00000000603 11771656742 024062 0 ustar root root ---
title: Compass Transition
crumb: Transition
framework: compass
stylesheet: compass/css3/_transition.scss
meta_description: Specify a style transition for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
Provides a mixin for CSS3 transitions. See CSS3 Spec: transitions .
v0.12.2~dfsg/doc-src/content/reference/compass/css3/background_clip.haml 0000644 0000000 0000000 00000000703 11771656742 025017 0 ustar root root ---
title: Compass Background Clip
crumb: Background Clip
framework: compass
stylesheet: compass/css3/_background-clip.scss
meta_description: Specify the background clip for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
Provides a mixin for background-clip
. See CSS3 spec: background-clip .
v0.12.2~dfsg/doc-src/content/reference/compass/css3/images.haml 0000644 0000000 0000000 00000003242 11771656742 023137 0 ustar root root ---
title: Compass Images
crumb: Images
framework: compass
stylesheet: compass/css3/_images.scss
meta_description: Specify linear gradients and radial gradients for many browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
:markdown
Provides mixins that work across many modern browsers with the latest
CSS3 image rendering primitives.
These mixins provide intelligent cross-browser access to properties that accept
images or image-like values (e.g. gradients). The syntax is very straightforward,
it is exactly like the css syntax that you would use for the corresponding CSS3
properties: Values are comma and space delimited, just as they would be for a property.
Vendor prefixes are used only when necessary.
Example (more examples are available by following the links below):
.in-css3 {
background: url(foo.png),
linear-gradient(top left, #333, #0c0),
radial-gradient(#c00, #fff 100px);
}
.with-compass {
@include background(image-url("foo.png"),
linear-gradient(top left, #333, #0c0),
radial-gradient(#c00, #fff 100px));
}
To enable SVG gradient support in Opera and IE9, set
$experimental-support-for-svg: true
in your stylesheet.
NOTE: At this time, Opera renders incorrectly an SVG background on a element
with a border, repeating the gradient towards the end. You can set
background-repeat: no-repeat
to avoid this, but the gradient
will not fill the area completely.
v0.12.2~dfsg/doc-src/content/reference/compass/css3/border_radius.haml 0000644 0000000 0000000 00000001134 11771656742 024514 0 ustar root root ---
title: Compass Border Radius
crumb: Border Radius
framework: compass
stylesheet: compass/css3/_border-radius.scss
meta_description: Specify the border radius for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
The border-radius mixin is used to give a block element rounded corners. It automatically outputs the correct vendor specific syntax for each browser (e.g. -webkit-border-radius
and -moz-border-radius
). See CSS3 spec: border-radius .
v0.12.2~dfsg/doc-src/content/reference/compass/css3/filter.haml 0000644 0000000 0000000 00000000464 11771656742 023162 0 ustar root root ---
title: Compass Filter
crumb: Filter
framework: compass
stylesheet: compass/css3/_filter.scss
meta_description: Specify the (image) filter for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
The filter mixin is used to apply filters to images.
v0.12.2~dfsg/doc-src/content/reference/compass/css3/text-shadow.haml 0000644 0000000 0000000 00000000632 11771656742 024141 0 ustar root root ---
title: Compass Text Shadow
crumb: Text Shadow
framework: compass
stylesheet: compass/css3/_text-shadow.scss
meta_description: Specify the text shadow for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
Provides a mixin for CSS text shadows. See CSS3 spec: text-shadow .
v0.12.2~dfsg/doc-src/content/reference/compass/css3/user_interface.haml 0000644 0000000 0000000 00000000520 11771656742 024664 0 ustar root root ---
title: Compass User Interface
crumb: User Interface
framework: compass
stylesheet: compass/css3/_user-interface.scss
meta_description: Declare an element inline block for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
Provides mixins for the CSS3 User Interface module.
v0.12.2~dfsg/doc-src/content/reference/compass/css3/transform.haml 0000644 0000000 0000000 00000002056 11771656742 023707 0 ustar root root ---
title: Compass Transform
crumb: Transform
framework: compass
stylesheet: compass/css3/_transform.scss
meta_description: Specify transformations for many browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
Provides mixins for CSS3 2D and 3D transforms. See
W3C: CSS 2D transforms
and See W3C: CSS 3D transforms .
%p
Safari is the only browser that currently supports 3D transforms.
Because of that it can be important to control whether a given 2D transform
uses the full range of experimental browser prefixes, or only the 3D list.
To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
to switch between the two support lists. The toggle defaults to 'false' (2D),
and also accepts 'true' (3D). Currently the lists are as follows:
2D: Mozilla, Webkit, Opera, Official
3D: Webkit, Official **(Only Safari Supports 3D perspective)**
v0.12.2~dfsg/doc-src/content/reference/compass/css3/box_shadow.haml 0000644 0000000 0000000 00000000533 11771656742 024027 0 ustar root root ---
title: Compass Box Shadow
crumb: Box Shadow
framework: compass
stylesheet: compass/css3/_box-shadow.scss
meta_description: Specify the box shadow for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
The box-shadow mixins are used to apply an inset or drop shadow to a block element.
v0.12.2~dfsg/doc-src/content/reference/compass/css3/box.haml 0000644 0000000 0000000 00000000475 11771656742 022467 0 ustar root root ---
title: Compass Box
crumb: Box
framework: compass
stylesheet: compass/css3/_box.scss
meta_description: This module provides mixins that pertain to the CSS3 Flexible Box.
layout: core
classnames:
- reference
---
- render 'reference' do
%p
This module provides mixins that pertain to the CSS3 Flexible Box.
v0.12.2~dfsg/doc-src/content/reference/compass/css3/inline_block.haml 0000644 0000000 0000000 00000001464 11771656742 024326 0 ustar root root ---
title: Compass Inline Block
crumb: Inline Block
framework: compass
stylesheet: compass/css3/_inline-block.scss
meta_description: Declare an element inline block for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
Provides a cross-browser method to implement display: inline-block;
. Note that this was actually introduced in CSS2, but badly implemented across browsers. See CSS2.1 spec: display .
%blockquote
This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.
v0.12.2~dfsg/doc-src/content/reference/compass/css3/opacity.haml 0000644 0000000 0000000 00000000567 11771656742 023351 0 ustar root root ---
title: Compass Opacity
crumb: Opacity
framework: compass
stylesheet: compass/css3/_opacity.scss
meta_description: Specify the opacity for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
Provides cross-browser CSS opacity. See CSS3 spec: transparency . v0.12.2~dfsg/doc-src/content/reference/compass/css3/appearance.haml 0000644 0000000 0000000 00000000606 11771656742 023772 0 ustar root root ---
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).
v0.12.2~dfsg/doc-src/content/reference/compass/css3/hyphenation.haml 0000644 0000000 0000000 00000001001 11771656742 024207 0 ustar root root ---
title: Compass Hyphenation
crumb: Hyphenation
framework: compass
stylesheet: compass/css3/_hyphenation.scss
meta_description: Mixin for breaking space and injecting hypens into overflowing text
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
:markdown
Provides mixins that pertain to CSS3 Word Breaking and Hyphenation.
See the CSS3 specification: [hyphens](http://www.w3.org/TR/css3-text/#hyphens) and [word-break](http://www.w3.org/TR/css3-text/#word-break).
v0.12.2~dfsg/doc-src/content/reference/compass/css3/pie.haml 0000644 0000000 0000000 00000005517 11771656742 022456 0 ustar root root ---
title: CSS3 Pie
crumb: CSS3 Pie
framework: compass
stylesheet: compass/css3/_pie.scss
meta_description: Compass integration with the css3pie tool.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
:markdown
### Installing
CSS PIE is a javascript library that enhances Internet Explorer
to render many modern CSS3 capabilities wherever possible. To install:
compass install compass/pie
This will install an example stylesheet and a PIE.htc behavior file
that must be loaded into your pages for IE. This file must be delivered
with the following mime-type:
Content-Type: text/x-component
### Conventions
The example stylesheet will walk you through setting up your project with
css3pie support.
### Properties Supported
The following css3 properties are supported:
* border-radius
* box-shadow
* border-image
* background (in the form of -pie-background, use the [background mixin](/reference/compass/css3/images/#mixin-background))
Additionally, PIE supports the following CSS3 features:
* rgba color values
* linear gradients in backgrounds
[Full Documentation on Supported Properties](http://css3pie.com/documentation/supported-css3-features/)
### Caveats
1. PIE only understands shortcut properties, long-hand properties don't
work because the code, in order to be fast, does not attempt to resolve
the stylesheet cascade and so it cannot determine which order to apply
the long-hand properties.
2. Each element that has a PIE behavior attached adds about 10ms to
the page render time. Moderation is recommended.
3. PIE generates content that contains the css3 graphical elements. It has to
insert this content into your page and so it needs a little help from
you. You have two choices:
1. You can make your element `position: relative`.
2. You can give your element a z-index. If you do this you
should also give apply a z-index to an ancestor element that comes before
or itself has a background.
The compass mixins below and the example stylesheet will help get you set up.
### Best Practices
It is suggested that you use Sass's `@extend` directive to mark elements as
PIE elements. The example stylesheet you get when you install `compass/pie`
into your project will walk you through the process of setting that up.
### Notes
* For more information see the [css3pie website](http://css3pie.com/).
* CSS PIE is written by and copyright to: [Jason Johnston](http://twitter.com/lojjic)
* Compass is using css3pie version 1.0-beta3. It can be upgraded by downloading
a new behavior file and replacing the one that comes with compass.
v0.12.2~dfsg/doc-src/content/reference/compass/css3/regions.haml 0000644 0000000 0000000 00000001021 11771656742 023331 0 ustar root root ---
title: Compass CSS Regions
crumb: CSS Regions
framework: compass
stylesheet: compass/css3/_regions.scss
meta_description: Specify CSS Regions for supported browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
Provides two mixins for CSS regions, properties which allow you to flow content into new containers. See the spec draft and Adobe's page on the topic . v0.12.2~dfsg/doc-src/content/reference/compass/helpers/ 0000755 0000000 0000000 00000000000 11771656742 021615 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/helpers/image-dimensions.haml 0000644 0000000 0000000 00000001513 11771656742 025710 0 ustar root root ---
title: Compass Image Dimension Helpers
crumb: Image Dimensions
framework: compass
meta_description: Helper functions for working with image dimensions.
layout: core
classnames:
- reference
- core
- helpers
documented_functions:
- "image-width"
- "image-height"
---
%h1 Compass Image Dimension Helpers
#image-width.helper
%h3
%a(href="#image-width")
image-width($image )
.details
%p
Returns the width of the image found at the path supplied by $image
relative to your project's images directory.
#image-height.helper
%h3
%a(href="#image-height")
image-height($image )
.details
%p
Returns the height of the image found at the path supplied by $image
relative to your project's images directory. v0.12.2~dfsg/doc-src/content/reference/compass/helpers/font-files.haml 0000644 0000000 0000000 00000001710 11771656742 024525 0 ustar root root ---
title: Compass Font Files Helper
crumb: Font Files
framework: compass
meta_description: Helper function for listing fonts.
layout: core
classnames:
- reference
- core
- helpers
documented_functions:
- "font-files"
---
%h1 Compass Font Files Helper
#font-files.helper
%h3
%a(href="#font-files")
font-files([$font ]*)
.details
%p
The font-files
function takes a list of arguments containing the path to each font files relative to your project's font directory.
%p
This helper is used with the font-face
mixin
and is what makes it possible to pass any number of font files.
%p
W3C Reference
.examples
%h4 Examples
%ul
%li
%a(href="/examples/compass/css3/font-face/") Font-face Example
v0.12.2~dfsg/doc-src/content/reference/compass/helpers/color-stops.haml 0000644 0000000 0000000 00000002712 11771656742 024746 0 ustar root root ---
title: Compass Color Stops Helper
crumb: Color Stops
framework: compass
meta_description: Helper function for color-stops.
layout: core
classnames:
- reference
- core
- helpers
documented_functions:
- "color-stops"
---
%h1 Compass Color Stops Helper
#color-stops.helper
%h3
%a(href="#color-stops")
color-stops([$color-stop ]*)
.details
%p
The color-stops helper provides a way to pass an arbitrary number of
colors stops to the gradient mixins .
%p
Any number of comma-delimited color stops can be passed, each color stop
should take the form of a color followed by an optional stopping point (separated by a space).
Where stop values are not provided they will be inferred by assuming an equal distribution
of colors between any specified locations.
%dl
%dg.head
%dt Example Call
%dd Means
%dg#ex1
%dt
color-stops(#FFF,#F00,#00C)
%dd
\#FFF 0%, #F00 50%, #00C 100%
%dg#ex2
%dt
color-stops(#FFF, #F00 25%, #0C0, #00C)
%dd
\#FFF 0%, #F00 25%, #0C0 62.5%, #00C 100%
%dg#ex3
%dt
color-stops(#FFF, #F00 5px, #0C0, #00C 25px)
%dd
\#FFF 0px, #F00 5px, #0C0 15px, #00C 25px
.examples
%h4 Examples
%ul
%li
%a(href="/examples/compass/css3/gradient/") Example of Gradients
v0.12.2~dfsg/doc-src/content/reference/compass/helpers/math.haml 0000644 0000000 0000000 00000005463 11771656742 023421 0 ustar root root ---
title: Compass Math Helpers
crumb: Math
framework: compass
meta_description: Helper math functions.
layout: core
classnames:
- reference
- core
- helpers
documented_functions:
- "pi"
- "sin"
- "cos"
- "tan"
- "e"
- "log"
- "sqrt"
- "pow"
---
%h1 Compass Math Helpers
:markdown
Sass math functions are sufficient for most cases, but in those moments of extreme geekiness these additional functions can really come in handy.
#pi.helper
%h3
%a(href="#pi")
pi()
.details
%p
Returns the value of π.
#sin.helper
%h3
%a(href="#sin")
sin($number )
.details
%p
Returns the sine of a number. If the number is unitless or has a unit of deg
then it will return a unitless result. Unless the number has a unit of deg
it
will be evaluated as radians. Degrees will first be converted to radians.
If the number is any other unit, the units will be passed thru to the result,
and the number will be treated as radians.
#cos.helper
%h3
%a(href="#cos")
cos($number )
.details
%p
Returns the cosine of a number. If the number is unitless or has a unit of deg
then it will return a unitless result. Unless the number has a unit of deg
it
will be evaluated as radians. Degrees will first be converted to radians.
If the number is any other unit, the units will be passed thru to the result,
and the number will be treated as radians.
#tan.helper
%h3
%a(href="#tan")
tan($number )
.details
%p
Returns the tangent of a number. If the number is unitless or has a unit of deg
then it will return a unitless result. Unless the number has a unit of deg
it
will be evaluated as radians. Degrees will first be converted to radians.
If the number is any other unit, the units will be passed thru to the result,
and the number will be treated as radians.
#e.helper
%h3
%a(href="#e")
e()
.details
%p
Returns the value of e .
#log.helper
%h3
%a(href="#log")
log($number , $base )
.details
%p
Calculates the logarithm of a number to a base. Base defaults to e
.
#sqrt.helper
%h3
%a(href="#sqrt")
sqrt($number )
.details
%p
Calculates the square root of a number.
#pow.helper
%h3
%a(href="#pow")
pow($number , $exponent )
.details
%p
Calculates the value of a number raised to the power of an exponent.
v0.12.2~dfsg/doc-src/content/reference/compass/helpers/colors.haml 0000644 0000000 0000000 00000004316 11771656742 023765 0 ustar root root ---
title: Compass Color Helpers
crumb: Colors
framework: compass
meta_description: Helper function for colors.
layout: core
classnames:
- reference
- core
- helpers
documented_functions:
- "adjust-lightness"
- "adjust-saturation"
- "scale-lightness"
- "scale-saturation"
- "shade"
- "tint"
---
%h1 Compass Color Helpers
%p
These color functions are useful for creating generic libraries that have to accept a
range of inputs. For more color functions see
the sass reference
documentation
#adjust-lightness.helper
%h3
%a(href="#adjust-lightness")
adjust-lightness($color , $amount )
.details
%p
Adds $amount
to $color
's lightness value. $amount
can be negative.
#adjust-saturation.helper
%h3
%a(href="#adjust-saturation")
adjust-saturation($color , $amount )
.details
%p
Adds $amount
to $color
's saturation value. $amount
can be negative.
#scale-lightness.helper
%h3
%a(href="#scale-lightness")
scale-lightness($color , $amount )
.details
%p
Scales $color
's lightness value by $amount
.
$amount
can be negative.
#scale-saturation.helper
%h3
%a(href="#scale-saturation")
scale-saturation($color , $amount )
.details
%p
Scales $color
's saturation value by $amount
.
$amount
can be negative.
#shade.helper
%h3
%a(href="#shade")
shade($color , $percentage )
.details
%p
Darkens the $color
by mixing it with black as specified by $percentage
.
#tint.helper
%h3
%a(href="#tint")
tint($color , $percentage )
.details
%p
Lightens the $color
by mixing it with white as specified by $percentage
.
v0.12.2~dfsg/doc-src/content/reference/compass/helpers/inline-data.haml 0000644 0000000 0000000 00000002310 11771656742 024641 0 ustar root root ---
title: Compass Inline Data Helpers
crumb: Inline Data
framework: compass
meta_description: Helper functions for embedding inline data.
layout: core
classnames:
- reference
- core
- helpers
documented_functions:
- "inline-image"
- "inline-font-files"
---
%h1 Compass Inline Data Helpers
#inline-image.helper
%h3
%a(href="#inline-image")
inline-image($image , $mime-type )
.details
%p
Embeds the contents of an image directly inside your stylesheet,
eliminating the need for another HTTP request. For small images,
this can be a performance benefit at the cost of a larger
generated CSS file.
%p
Like the image-url()
helper, the path
specified should be relative to your project's images directory.
#inline-font-files.helper
%h3
%a(href="#inline-font-files")
inline-font-files([$font , $format ]*)
.details
%p
Like the font-files()
helper, but the font
file is embedded within the generated CSS file. v0.12.2~dfsg/doc-src/content/reference/compass/helpers/display.haml 0000644 0000000 0000000 00000001763 11771656742 024134 0 ustar root root ---
title: Compass Display Helpers
crumb: Display Helpers
framework: compass
meta_description: Helper functions for working with the display property.
layout: core
classnames:
- reference
- core
- helpers
documented_functions:
- "elements-of-type"
---
%h1 Compass Display Helpers
%p Helper functions for working with the display property.
#elements-of-type.helper
%h3
%a(href="#elements-of-type") elements-of-type($display )
.details
%p
The following display values exist and will return
the elements listed below the display value.
%dl
%dg.head
%dt Display Value
%dd Elements Returned
- display_map = Compass::SassExtensions::Functions::Display::DEFAULT_DISPLAY
- display_map.keys.each do |key|
%dg
%dt= key
%dd= display_map[key].sort.join(", ")
.examples
%h4 Examples
%ul
%li
%a(href="/examples/compass/helpers/elements-of-type/") Example of elements-of-type
v0.12.2~dfsg/doc-src/content/reference/compass/helpers/cross-browser.haml 0000644 0000000 0000000 00000007647 11771656742 025310 0 ustar root root ---
title: Compass Cross Browser Helpers
crumb: Cross Browser
framework: compass
meta_description: Helper functions for working with vendor prefixed functions.
layout: core
classnames:
- reference
- core
- helpers
documented_functions:
- "prefixed"
- "prefix"
- "-webkit"
- "-moz"
- "-o"
- "-ms"
- "-svg"
- "-pie"
- "-css2"
---
%h1 Compass Cross Browser Helpers
:markdown
These helpers are used by compass to create mixins that can insulate
the user from cross browser syntax and vendor prefix complexities.
If you need to support a new experimental (prefixed) function in your
project using these helpers, you can add support for it adding the following
to your compass configuration file:
Compass::BrowserSupport.add_support("function-name", "webkit", "moz")
For an example of how to use these functions see the
[compass images module](https://github.com/chriseppstein/compass/blob/master/frameworks/compass/stylesheets/compass/css3/_images.scss).
#prefixed.helper
%h3
%a(href="#prefixed")
prefixed($prefix, $arg , ...)
.details
%p
Returns true if any of the arguments require the given prefix.
#prefix.helper
%h3
%a(href="#prefix")
prefix($prefix, $arg , ...)
.details
%p
Transforms the argument(s) into a representation for the rendering engine
indicated by $prefix
. Usually this means just adding a prefix,
but in some cases, this may result in entirely different representations for
the given rendering engine (E.g. linear-gradient).
%p
Values that do not have a specific representation are passed through without
being transformed.
#-webkit.helper
%h3
%a(href="#-webkit")
\-webkit($arg , ...)
.details
%p
This is a shortcut for calling prefix(-webkit, $arg, ...)
.
#-moz.helper
%h3
%a(href="#-moz")
\-moz($arg , ...)
.details
%p
This is a shortcut for calling prefix(-moz, $arg, ...)
.
#-o.helper
%h3
%a(href="#-o")
\-o($arg , ...)
.details
%p
This is a shortcut for calling prefix(-o, $arg, ...)
.
#-ms.helper
%h3
%a(href="#-ms")
\-ms($arg , ...)
.details
%p
This is a shortcut for calling prefix(-ms, $arg, ...)
.
#-svg.helper
%h3
%a(href="#-svg")
\-svg($arg , ...)
.details
%p
This is a shortcut for calling prefix(-svg, $arg, ...)
.
Instead of adding a prefix, it returns a representation of the
arguments using SVG to render them where it can.
#-pie.helper
%h3
%a(href="#-pie")
\-pie($arg , ...)
.details
%p
This is a shortcut for calling prefix(-pie, $arg, ...)
.
It it used to get CSS3 PIE
support where necessary.
#-css2.helper
%h3
%a(href="#-css2")
\-css2($arg , ...)
.details
%p
This is a shortcut for calling prefix(-css2, $arg, ...)
.
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($value , $css2-value )
.details
%p
This function returns a value that is normally $value,
but is $css2-value
when passed through the -css2()
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).
v0.12.2~dfsg/doc-src/content/reference/compass/helpers/urls.haml 0000644 0000000 0000000 00000006076 11771656742 023456 0 ustar root root ---
title: Compass URL Helpers
crumb: URLs
framework: compass
meta_description: Helper functions for working with URLs.
layout: core
classnames:
- reference
- core
- helpers
documented_functions:
- "stylesheet-url"
- "font-url"
- "image-url"
- "generated-image-url"
---
%h1 Compass URL Helpers
:markdown
These url helpers isolate your stylesheets from environmental differences.
They allow you to write the same stylesheets and use them locally without
a web server, and then change them to be using asset hosts in production.
They might also insulate you against some code reorganization changes.
#stylesheet-url.helper
%h3
%a(href="#stylesheet-url")
stylesheet-url($path , $only-path )
.details
%p
Generates a path to an asset found relative to the project's css directory.
%br
Passing a true value as the second argument will cause the only the path to be returned
instead of a url()
function
#font-url.helper
%h3
%a(href="#font-url")
font-url($path , $only-path )
.details
%p
Generates a path to an asset found relative to the project's font directory.
%br
Passing a true value as the second argument will cause the only the path to be returned
instead of a url()
function
#image-url.helper
%h3
%a(href="#image-url")
image-url($path , $only-path , $cache-buster )
.details
%p
Generates a path to an asset found relative to the project's images directory.
%p
Passing a true value as the second argument will cause the only the path to be returned
instead of a url()
function
%p
The third argument is used to control the cache buster on a per-use basis.
When set to false
no cache buster will be used. When a string, that
value will be used as the cache buster.
#generated-image-url.helper
%h3
%a(href="#generated-image-url")
generated-image-url($path, $cache-buster: false)
.details
%p
Generates a path to an image generated during compilation using the
generated_image
related configuration properties.
%p
Most users will never call this helper directly, it is primarily provided
for use by plugins that need to generate paths to images they create. E.g.
The sprite-url()
helper calls this helper.
%p
The second argument is used to control the cache buster on a per-use basis.
Defaults to false
, meaning that no cache buster will be used.
When a string, that value will be used as the cache buster, when true
Compass will generate a cache-buster based on the image's modification time.
v0.12.2~dfsg/doc-src/content/reference/compass/helpers/selectors.haml 0000644 0000000 0000000 00000006040 11771656742 024463 0 ustar root root ---
title: Compass Selector Helpers
crumb: Selectors
framework: compass
meta_description: Helper functions for working with selectors.
layout: core
classnames:
- reference
- core
- helpers
documented_functions:
- "nest"
- "append-selector"
- "enumerate"
- "headings"
- "headers"
---
%h1 Compass Selector Helpers
#nest.helper
%h3
%a(href="#nest")
nest($selector1 , $selector2 , ...)
.details
%p
Nest selectors as if they had been nested within a sass file.
Each selector passed in can be a comma-delimited list of selectors
and they will be permuted as they would be in a sass file.
The generated selectors can be further nested within the sass file
itself.
%p
This function can accept any number of selector arguments.
%dl
%dg
%dt nest(".foo", ".bar", ".baz")
%dd .foo .bar .baz
%dg
%dt nest(".foo, .bar", ".baz")
%dd .foo .baz, .bar .baz
%dg
%dt nest(".foo, .bar", "a, span")
%dd .foo a, .foo span, .bar a, .bar span
#append-selector.helper
%h3
%a(href="#append-selector")
append-selector($selector , $to-append )
.details
%p
This helper function appends any selector with some string. No space or punctuation is
added when appending. The selector can be a comma-delimited list of selectors.
%dl
%dg
%dt append-selector(".foo", ".bar")
%dd .foo.bar
%dg
%dt append-selector("p, div, span", ".bar")
%dd p.bar, div.bar, span.bar
#enumerate.helper
%h3
%a(href="#enumerate")
enumerate($prefix , $from , $through , $separator )
.details
%p
Enumerate the given $prefix
from $from
through $through
.
%p Note: Using the @extend
directive is usually preferred to this helper, which was created before @extend
existed.
.examples
%h4 Examples
%ul
%li
%a(href="/examples/compass/helpers/enumerate/") Example of enumerate
%li
%a(href="/examples/compass/helpers/using-extend-in-place-of-enumerate/") Example of using @extend
in place of enumerate
%a(name="headers")
#headings.helper
%h3
%a(href="#append-selector")
headings($from , $to )
.details
%p
This helper function emits headings. It's best to just see it in action:
%p
Note: This function is aliased to headers()
, both can be used interchangeably.
%dl
%dg
%dt headings()
%dd h1, h2, h3, h4, h5, h6
%dg
%dt headings(all)
%dd h1, h2, h3, h4, h5, h6
%dg
%dt headings(2)
%dd h1, h2
%dg
%dt headings(2,5)
%dd h2, h3, h4, h5
v0.12.2~dfsg/doc-src/content/reference/compass/helpers/sprites.haml 0000644 0000000 0000000 00000012256 11771656742 024157 0 ustar root root ---
title: CSS Sprite Helpers for Compass
crumb: Sprites
framework: compass
meta_description: Helper functions for working with CSS Sprite images.
layout: core
classnames:
- reference
- core
- helpers
documented_functions:
- "sprite-map"
- "sprite"
- "sprite-map-name"
- "sprite-file"
- "sprite-url"
- "sprite-position"
---
%h1 CSS Sprite Helpers for Compass
:markdown
These helpers make it easier to build and to work with css sprites .
While it is allowed to use these directly, to do so is considered "advanced usage".
It is recommended that you instead use the css sprite mixins that are designed to work
with these functions.
See the [Spriting Tutorial](/help/tutorials/spriting/) for more information.
#sprite-map.helper
%h3
%a(href="#sprite-map")
sprite-map($glob , ... )
.details
:markdown
Generates a css sprite map from the files matching the glob pattern. Uses the
keyword-style arguments passed in to control the placement.
Only PNG files can be made into css sprites at this time.
The `$glob` should be glob pattern relative to the images directory that specifies
what files will be in the css sprite. For example:
$icons: sprite-map("icons/*.png");
background: $icons;
This will generate a css sprite map and return a reference to it. It's important to
capture this to a variable, because you will need to use it later when creating
css sprites. In the above example you might end up with a new file named
`images/sprites/icons-a2ef041.png` and your css stylesheet will have:
background: url('/images/sprites/icons-a2ef041.png?1234678') no-repeat;
The exact image name is not something you should depend on as it may change based on the
arguments you pass in. Instead, you can use the `sprite-url()` function to create a
reference to the css sprite map without generating the image again. Alternatively, simply
using the sprite map variable in an property will have the same effect as calling
`sprite-url()`.
For each sprite in the css sprite map you can control the position, spacing, and whether or
not it repeats. You do this by passing arguments to this function that tell each sprite
how to behave. For instance if there is a icons/new.png then you can control it like so:
$icon-sprite: sprite-map("icons/*.png",
$new-position: 100%, $new-spacing: 15px, $new-repeat: no-repeat);
If you don't specify these options they will default to `0%` for `position`,
`0px` for spacing, and `no-repeat` for `repeat`.
Default values for all sprites can be specified by passing values for `$position`,
`$spacing`, and `$repeat`.
#sprite.helper
%h3
%a(href="#sprite")
sprite($map , $sprite , $offset-x , $offset-y )
.details
:markdown
Returns the image and background position for use in a single shorthand property:
$icons: sprite-map("icons/*.png"); // contains icons/new.png among others.
background: sprite($icons, new) no-repeat;
Becomes:
background: url('/images/icons.png?12345678') 0 -24px no-repeat;
#sprite-map-name.helper
%h3
%a(href="#sprite-map-name")
sprite-map-name($map )
.details
:markdown
Returns the name of a css sprite map
The name is derived from the folder than contains the css sprites.
#sprite-file.helper
%h3
%a(href="#sprite-file")
sprite-file($map , $sprite )
.details
:markdown
Returns the relative path (from the images directory) to the original file
used when construction the sprite. This is suitable for passing to the
`image-width` and `image-height` helpers.
#sprite-url.helper
%h3
%a(href="#sprite-url")
sprite-url($map )
.details
:markdown
Returns a url to the sprite image.
#sprite-position.helper
%h3
%a(href="#sprite-position")
sprite-position($map , $sprite , $offset-x , $offset-y )
.details
:markdown
Returns the position for the original image in the sprite.
This is suitable for use as a value to background-position:
$icons: sprite-map("icons/*.png");
background-position: sprite-position($icons, new);
Might generate something like:
background-position: 0 -34px;
You can adjust the background relative to this position by passing values for
`$offset-x` and `$offset-y`:
$icons: sprite-map("icons/*.png");
background-position: sprite-position($icons, new, 3px, -2px);
Would change the above output to:
background-position: 3px -36px;
v0.12.2~dfsg/doc-src/content/reference/compass/helpers/constants.haml 0000644 0000000 0000000 00000001653 11771656742 024501 0 ustar root root ---
title: Compass Constant Helpers
crumb: Constants
framework: compass
meta_description: Helper functions for working with constants.
layout: core
classnames:
- reference
- core
- helpers
documented_functions:
- "opposite-position"
---
%h1 Compass Constant Helpers
:markdown
These helpers manipulate CSS Constants.
#opposite-position.helper
%h3
%a(href="#opposite-position")
opposite-position($position )
.details
:markdown
Returns the opposition position for the position given. Examples:
Input Output
------------------------------- ------------
opposite-position(left) => right
opposite-position(top) => bottom
opposite-position(center) => center
opposite-position(top left) => bottom right
opposite-position(center right) => center left
v0.12.2~dfsg/doc-src/content/reference/compass/reset-legacy.haml 0000644 0000000 0000000 00000001630 11771656742 023402 0 ustar root root ---
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
reset 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/)
v0.12.2~dfsg/doc-src/content/reference/compass/layout.haml 0000644 0000000 0000000 00000000451 11771656742 022333 0 ustar root root ---
title: Compass Layout
crumb: Layout
framework: compass
sidebar: true
stylesheet: compass/_layout.scss
meta_description: Page layout module.
layout: core
classnames:
- reference
- core
- layout
---
- render 'reference' do
%p
This module provides tools to help you with page layout.
v0.12.2~dfsg/doc-src/content/reference/compass/css3.haml 0000644 0000000 0000000 00000001441 11771656742 021671 0 ustar root root ---
title: Compass CSS3
crumb: CSS3
framework: compass
stylesheet: compass/_css3.scss
sidebar: true
layout: core
classnames:
- reference
- core
- css3
meta_description: Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes.
layout: core
---
- render 'reference' do
%p
The CSS3 module provides cross-browser mixins for CSS properties
introduced in CSS3, for example
border-radius
and text-shadow
.
%p
What rendering engines you support for the experimental css properties is governed by
the configurable variables defined in the browser
support module . v0.12.2~dfsg/doc-src/content/reference/compass/reset-legacy/ 0000755 0000000 0000000 00000000000 11771656742 022537 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/reset-legacy/utilities-legacy.haml 0000644 0000000 0000000 00000001232 11771656742 026655 0 ustar root root ---
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
reset utilities 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.
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/ 0000755 0000000 0000000 00000000000 11771656742 022166 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/utilities/color/ 0000755 0000000 0000000 00000000000 11771656742 023304 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/utilities/color/contrast.haml 0000644 0000000 0000000 00000000424 11771656742 026004 0 ustar root root ---
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'
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/general.haml 0000644 0000000 0000000 00000000510 11771656742 024442 0 ustar root root ---
title: Compass General Utilities
crumb: General
framework: compass
stylesheet: compass/utilities/_general.scss
sidebar: true
layout: core
meta_description: Generally useful utilities that don't fit elsewhere.
classnames:
- reference
- core
- utilities
---
- render 'reference' do
%p
Generally useful utilities.
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/color.haml 0000644 0000000 0000000 00000000455 11771656742 024153 0 ustar root root ---
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.
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/general/ 0000755 0000000 0000000 00000000000 11771656742 023603 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/utilities/general/clearfix.haml 0000644 0000000 0000000 00000000544 11771656742 026246 0 ustar root root ---
title: Compass Clearfix
crumb: Clearfix
framework: compass
stylesheet: compass/utilities/general/_clearfix.scss
layout: core
meta_description: Mixins for clearfixing.
classnames:
- reference
- core
- utilities
---
- render 'reference' do
%p
A clearfix will extend the bottom of the element to enclose any
floated elements it contains.
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/general/float.haml 0000644 0000000 0000000 00000000666 11771656742 025563 0 ustar root root ---
title: Compass Float
crumb: Float
framework: compass
stylesheet: compass/utilities/general/_float.scss
layout: core
meta_description: Mixins for cross-browser floats.
classnames:
- reference
- core
- utilities
---
- render 'reference' do
:markdown
This module provides mixins that help you work around the
[double-margin bug in IE5/6][dmb].
[dmb]: http://www.positioniseverything.net/explorer/doubled-margin.html
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/general/hacks.haml 0000644 0000000 0000000 00000000475 11771656742 025545 0 ustar root root ---
title: Compass Hacks
crumb: Hacks
framework: compass
stylesheet: compass/utilities/general/_hacks.scss
layout: core
meta_description: Mixins for hacking specific browsers.
classnames:
- reference
- core
- utilities
---
- render 'reference' do
%p
A collection of mixins for hacking specific browsers.
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/general/min.haml 0000644 0000000 0000000 00000000524 11771656742 025232 0 ustar root root ---
title: Minimum Dimensions
crumb: Minimums
framework: compass
stylesheet: compass/utilities/general/_min.scss
layout: core
meta_description: Mixins for cross-browser min-height and min-width.
classnames:
- reference
- core
- utilities
---
- render 'reference' do
%p
Cross browser implementation of min-height and min-width.
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/general/tag_cloud.haml 0000644 0000000 0000000 00000000377 11771656742 026416 0 ustar root root ---
title: Compass Tag Cloud
crumb: Tag Cloud
framework: compass
stylesheet: compass/utilities/general/_tag-cloud.scss
layout: core
meta_description: Mixin for styling tag clouds.
classnames:
- reference
- core
- utilities
---
= render 'reference'
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/general/reset.haml 0000644 0000000 0000000 00000000523 11771656742 025570 0 ustar root root ---
title: Compass Reset
crumb: Reset
framework: compass
stylesheet: compass/utilities/general/_reset.scss
layout: core
meta_description: Mixins for resetting elements (old import).
classnames:
- reference
- core
- utilities
---
- render 'reference' do
%p
This is a legacy wrapper for the reset/utilities
module.
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/sprites/ 0000755 0000000 0000000 00000000000 11771656742 023657 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/utilities/sprites/base.haml 0000644 0000000 0000000 00000000634 11771656742 025437 0 ustar root root ---
title: Compass Sprite Base
crumb: Sprite Base
framework: compass
stylesheet: compass/utilities/sprites/_base.scss
layout: core
classnames:
- reference
- core
- utilities
---
- render 'reference' do
:markdown
These mixins are useful for working with sprites. This file is imported by
magic sprite imports.
See the [Spriting Tutorial](/help/tutorials/spriting/) for more information.
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/sprites/sprite_img.haml 0000644 0000000 0000000 00000001120 11771656742 026656 0 ustar root root ---
title: Compass Sprite Image
crumb: Sprite Image
framework: compass
stylesheet: compass/utilities/sprites/_sprite-img.scss
layout: core
classnames:
- reference
- core
- utilities
---
- render 'reference' do
:markdown
**Example 1** Simple mixins:
a.twitter
+sprite-img("icons-32.png", 1)
a.facebook
+sprite-img("icons-32.png", 2)
**Example 2** Sharing a common base:
a
+sprite-background("icons-32.png")
&.twitter
+sprite-column(1)
&.facebook
+sprite-row(2)
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/sprites.haml 0000644 0000000 0000000 00000000775 11771656742 024533 0 ustar root root ---
title: Compass Sprites
crumb: Sprites
framework: compass
stylesheet: compass/utilities/_sprites.scss
sidebar: true
layout: core
meta_description: Sprite mixins.
classnames:
- reference
- core
- utilities
---
- 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
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/print.haml 0000644 0000000 0000000 00000001420 11771656742 024162 0 ustar root root ---
title: Compass Print
crumb: Print
framework: compass
stylesheet: compass/utilities/_print.scss
layout: core
meta_description: Control what elements gets printed.
classnames:
- reference
- core
- utilities
---
- render 'reference' do
:markdown
Control what gets printed. Apply the `no-print` (or `noprint`) class to any
elements that should be hidden when printing. Apply the `print-only` class
to those elements which should only appear in your printed pages.
The tricky part about `print-only` is getting the display right when you turn
an element back on in the case where both styles are applied. This mixin
uses the `elements-of-type` function to make sure that elements have the correct
display value according to the element type.
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/tables/ 0000755 0000000 0000000 00000000000 11771656742 023440 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/utilities/tables/borders.haml 0000644 0000000 0000000 00000000376 11771656742 025751 0 ustar root root ---
title: Compass Table Borders
crumb: Table Borders
framework: compass
stylesheet: compass/utilities/tables/_borders.scss
layout: core
meta_description: Add borders to a table.
classnames:
- reference
- core
- utilities
---
= render 'reference'
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/tables/scaffolding.haml 0000644 0000000 0000000 00000000526 11771656742 026565 0 ustar root root ---
title: Compass Table Scaffolding
crumb: Table Scaffolding
framework: compass
stylesheet: compass/utilities/tables/_scaffolding.scss
layout: core
meta_description: Basic styling of tables to get you started.
classnames:
- reference
- core
- utilities
---
- render 'reference' do
%p
Basic styling of tables to get you started.
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/tables/alternating_rows_and_columns.haml 0000644 0000000 0000000 00000000553 11771656742 032252 0 ustar root root ---
title: Compass Table Striping
crumb: Table Striping
framework: compass
stylesheet: compass/utilities/tables/_alternating-rows-and-columns.scss
layout: core
meta_description: Add striping to a table.
classnames:
- reference
- core
- utilities
---
- render 'reference' do
:markdown
Add striping to a table in both directions based on a few colors.
v0.12.2~dfsg/doc-src/content/reference/compass/utilities/tables.haml 0000644 0000000 0000000 00000000450 11771656742 024302 0 ustar root root ---
title: Compass Tables
crumb: Tables
framework: compass
stylesheet: compass/utilities/_tables.scss
layout: core
sidebar: true
meta_description: Style helpers for your tables.
classnames:
- reference
- core
- utilities
---
- render 'reference' do
%p
Style helpers for your tables.
v0.12.2~dfsg/doc-src/content/reference/compass/helpers.haml 0000644 0000000 0000000 00000005410 11771656742 022460 0 ustar root root ---
title: Compass Helpers
crumb: Helpers
framework: compass
sidebar: true
layout: core
classnames:
- reference
- core
- helpers
meta_description: Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes.
layout: core
---
%h1 Compass Helper Functions
:markdown
The compass helpers are functions that augment the [functions provided
by Sass](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html).
All Helpers:
* [adjust-lightness()](/reference/compass/helpers/colors/#adjust-lightness)
* [adjust-saturation()](/reference/compass/helpers/colors/#adjust-saturation)
* [append-selector()](/reference/compass/helpers/selectors/#append-selector)
* [color-stops()](/reference/compass/helpers/color-stops/)
* [cos()](/reference/compass/helpers/math/#cos)
* [css2-fallback()](/reference/compass/helpers/cross-browser/#css2-fallback)
* [e()](/reference/compass/helpers/math/#e)
* [elements-of-type()](/reference/compass/helpers/display/)
* [enumerate()](/reference/compass/helpers/selectors/#enumerate)
* [font-files()](/reference/compass/helpers/font-files/)
* [font-url()](/reference/compass/helpers/urls/#stylesheet-url)
* [headings()](/reference/compass/helpers/selectors/#headings)
* [image-width()](/reference/compass/helpers/image-dimensions/#image-width)
* [image-height()](/reference/compass/helpers/image-dimensions/#image-height)
* [image-url()](/reference/compass/helpers/urls/#image-url)
* [inline-font-files()](/reference/compass/helpers/inline-data/#inline-font-files)
* [inline-image()](/reference/compass/helpers/inline-data/#inline-image)
* [log()](/reference/compass/helpers/math/#log)
* [nest()](/reference/compass/helpers/selectors/#nest)
* [pow()](/reference/compass/helpers/math/#pow)
* [prefix()](/reference/compass/helpers/cross-browser/#prefix)
* [prefixed()](/reference/compass/helpers/cross-browser/#prefixed)
* [pi()](/reference/compass/helpers/math/#pi)
* [sin()](/reference/compass/helpers/math/#sin)
* [sqrt()](/reference/compass/helpers/math/#sqrt)
* [stylesheet-url()](/reference/compass/helpers/urls/#stylesheet-url)
* [scale-lightness()](/reference/compass/helpers/colors/#scale-lightness)
* [shade()](/reference/compass/helpers/colors/#shade)
* [tan()](/reference/compass/helpers/math/#tan)
* [tint()](/reference/compass/helpers/colors/#tint)
* [-css2()](/reference/compass/helpers/cross-browser/#-css2)
* [-moz()](/reference/compass/helpers/cross-browser/#-moz)
* [-ms()](/reference/compass/helpers/cross-browser/#-ms)
* [-o()](/reference/compass/helpers/cross-browser/#-o)
* [-pie()](/reference/compass/helpers/cross-browser/#-pie)
* [-svg()](/reference/compass/helpers/cross-browser/#-svg)
* [-webkit()](/reference/compass/helpers/cross-browser/#-webkit)
v0.12.2~dfsg/doc-src/content/reference/compass/typography/ 0000755 0000000 0000000 00000000000 11771656742 022361 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/typography/lists.haml 0000644 0000000 0000000 00000000366 11771656742 024367 0 ustar root root ---
title: Compass Lists
crumb: Lists
framework: compass
stylesheet: compass/typography/_lists.scss
sidebar: true
layout: core
meta_description: Tools for styling lists.
classnames:
- reference
- core
- typography
---
= render 'reference'
v0.12.2~dfsg/doc-src/content/reference/compass/typography/links/ 0000755 0000000 0000000 00000000000 11771656742 023501 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/typography/links/link_colors.haml 0000644 0000000 0000000 00000000421 11771656742 026657 0 ustar root root ---
title: Compass Link Colors
crumb: Link Colors
framework: compass
stylesheet: compass/typography/links/_link-colors.scss
layout: core
meta_description: Easy assignment of colors to link states.
classnames:
- reference
- core
- typography
---
= render 'reference'
v0.12.2~dfsg/doc-src/content/reference/compass/typography/links/hover_link.haml 0000644 0000000 0000000 00000000415 11771656742 026504 0 ustar root root ---
title: Compass Hover Link
crumb: Hover Link
framework: compass
stylesheet: compass/typography/links/_hover-link.scss
layout: core
meta_description: Underline a link when you hover over it.
classnames:
- reference
- core
- typography
---
= render 'reference'
v0.12.2~dfsg/doc-src/content/reference/compass/typography/links/unstyled_link.haml 0000644 0000000 0000000 00000000542 11771656742 027231 0 ustar root root ---
title: Compass Unstyled Link
crumb: Unstyled Link
framework: compass
stylesheet: compass/typography/links/_unstyled-link.scss
layout: core
meta_description: Make a link appear like regular text.
classnames:
- reference
- core
- typography
---
- render 'reference' do
%p
Makes a link appear like regular text. Not supported by IE 6 or 7.
v0.12.2~dfsg/doc-src/content/reference/compass/typography/text/ 0000755 0000000 0000000 00000000000 11771656742 023345 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/typography/text/force-wrap.haml 0000644 0000000 0000000 00000000562 11771656742 026260 0 ustar root root ---
title: Wrapping Long Text and URLs
crumb: Force Wrap
framework: compass
stylesheet: compass/typography/text/_force-wrap.scss
layout: core
meta_description: Wrap URLs and long lines of text.
classnames:
- reference
- core
- typography
---
- render 'reference' do
%p
This mixin will wrap URLs and long lines of text to prevent text from breaking layouts.
v0.12.2~dfsg/doc-src/content/reference/compass/typography/text/ellipsis.haml 0000644 0000000 0000000 00000000725 11771656742 026040 0 ustar root root ---
title: Truncating Text with Ellipses
crumb: Ellipsis
framework: compass
stylesheet: compass/typography/text/_ellipsis.scss
layout: core
meta_description: Text truncation with ellipsis.
classnames:
- reference
- core
- typography
---
- render 'reference' do
:markdown
There is an XML file that must be installed into your stylesheet
directory in order for this utility to work correctly. To install it:
compass install compass/ellipsis
v0.12.2~dfsg/doc-src/content/reference/compass/typography/text/replacement.haml 0000644 0000000 0000000 00000000411 11771656742 026503 0 ustar root root ---
title: Compass Text Replacement
crumb: Text Replacement
framework: compass
stylesheet: compass/typography/text/_replacement.scss
layout: core
meta_description: Replace text with images.
classnames:
- reference
- core
- typography
---
= render 'reference' v0.12.2~dfsg/doc-src/content/reference/compass/typography/text/nowrap.haml 0000644 0000000 0000000 00000000565 11771656742 025524 0 ustar root root ---
title: Compass No Wrap
crumb: No Wrap
framework: compass
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
- typography
---
- render 'reference' do
%p
Remembering whether or not there's a hyphen in white-space is too hard.
v0.12.2~dfsg/doc-src/content/reference/compass/typography/vertical_rhythm.haml 0000644 0000000 0000000 00000001220 11771656742 026423 0 ustar root root ---
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.
v0.12.2~dfsg/doc-src/content/reference/compass/typography/lists/ 0000755 0000000 0000000 00000000000 11771656742 023517 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/typography/lists/horizontal_list.haml 0000644 0000000 0000000 00000001377 11771656742 027616 0 ustar root root ---
title: Compass Horizontal List
crumb: Horizontal List
framework: compass
stylesheet: compass/typography/lists/_horizontal-list.scss
layout: core
meta_description: Float a list so it appears horizontally.
classnames:
- reference
- core
- typography
---
- render 'reference' do
:markdown
Easy mode using simple descendant li selectors:
ul.nav
+horizontal-list
Advanced mode:
If you need to target the list items using a different selector then use
+horizontal-list-container on your ul/ol and +horizontal-list-item on your li.
This may help when working on layouts involving nested lists. For example:
ul.nav
+horizontal-list-container
> li
+horizontal-list-item
v0.12.2~dfsg/doc-src/content/reference/compass/typography/lists/inline-block-list.haml 0000644 0000000 0000000 00000001512 11771656742 027700 0 ustar root root ---
title: Compass Inline-Block List
crumb: Inline-Block List
framework: compass
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
- typography
---
- render 'reference' do
:markdown
Easy mode using simple descendant li selectors:
ul.nav
+inline-block-list
Advanced mode:
If you need to target the list items using a different selector then use
+inline-block-list-container on your ul/ol and +inline-block-list-item on
your li. This may help when working on layouts involving nested lists. For
example:
ul.nav
+inline-block-list-container
> li
+inline-block-list-item
v0.12.2~dfsg/doc-src/content/reference/compass/typography/lists/bullets.haml 0000644 0000000 0000000 00000000375 11771656742 026041 0 ustar root root ---
title: Compass Bullets
crumb: Bullets
framework: compass
stylesheet: compass/typography/lists/_bullets.scss
layout: core
meta_description: Mixins for managing list bullets.
classnames:
- reference
- core
- typography
---
= render 'reference'
v0.12.2~dfsg/doc-src/content/reference/compass/typography/lists/inline_list.haml 0000644 0000000 0000000 00000000404 11771656742 026671 0 ustar root root ---
title: Compass Inline List
crumb: Inline List
framework: compass
stylesheet: compass/typography/lists/_inline-list.scss
layout: core
meta_description: Style a list as inline text.
classnames:
- reference
- core
- typography
---
= render 'reference'
v0.12.2~dfsg/doc-src/content/reference/compass/typography/links.haml 0000644 0000000 0000000 00000000451 11771656742 024344 0 ustar root root ---
title: Compass Links
crumb: Links
framework: compass
stylesheet: compass/typography/_links.scss
sidebar: true
layout: core
meta_description: Tools for styling anchor links.
classnames:
- reference
- core
- typography
---
- render 'reference' do
%p
Tools for styling anchor links.
v0.12.2~dfsg/doc-src/content/reference/compass/typography/text.haml 0000644 0000000 0000000 00000000440 11771656742 024206 0 ustar root root ---
title: Compass Text
crumb: Text
framework: compass
stylesheet: compass/typography/_text.scss
layout: core
sidebar: true
meta_description: Style helpers for your text.
classnames:
- reference
- core
- typography
---
- render 'reference' do
%p
Utilities for managing text.
v0.12.2~dfsg/doc-src/content/reference/compass/support.haml 0000644 0000000 0000000 00000000666 11771656742 022542 0 ustar root root ---
title: Compass Cross-Browser Support Configuration
crumb: Browser Support
framework: compass
stylesheet: compass/_support.scss
classnames:
- reference
- core
- support
meta_description: Provides configuration options for the Compass Browser Support Matrix.
layout: core
navigable: false
---
- render 'reference' do
%p
You can configure the compass default browser support matrix by
setting these variables as needed.
v0.12.2~dfsg/doc-src/content/reference/compass/layout/ 0000755 0000000 0000000 00000000000 11771656742 021470 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/compass/layout/sticky_footer.haml 0000644 0000000 0000000 00000001776 11771656742 025232 0 ustar root root ---
title: Compass Sticky Footer
crumb: Sticky Footer
framework: compass
stylesheet: compass/layout/_sticky-footer.scss
layout: core
classnames:
- reference
- core
- layout
---
- render 'reference' do
:markdown
This module provides tools needed to lay out your footer such
that it sticks to the bottom of the page.
Mix in to the top level of your stylesheet, so the footer stays
at the bottom of the screen. This mixin relies on the following
HTML structure, and a fixed-height `#footer` element:
If you use the default selectors, this mixin is simple to use.
Just mix it into the top level of your stylesheet:
@include sticky-footer(54px)
You can also define the selectors yourself:
@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer") v0.12.2~dfsg/doc-src/content/reference/compass/layout/stretching.haml 0000644 0000000 0000000 00000000527 11771656742 024511 0 ustar root root ---
title: Compass Stretching
crumb: Stretching
framework: compass
stylesheet: compass/layout/_stretching.scss
layout: core
classnames:
- reference
- core
- layout
---
- render 'reference' do
%p
The stretch mixins allow you to style absolutely positioned elements
such that they will stretch to fill their positioning parent.
v0.12.2~dfsg/doc-src/content/reference/compass/layout/grid_background.haml 0000644 0000000 0000000 00000000640 11771656742 025457 0 ustar root root ---
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.
v0.12.2~dfsg/doc-src/content/reference/compass/typography.haml 0000644 0000000 0000000 00000000653 11771656742 023230 0 ustar root root ---
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.
v0.12.2~dfsg/doc-src/content/reference/compass/reset.haml 0000644 0000000 0000000 00000001332 11771656742 022137 0 ustar root root ---
title: Compass Reset
crumb: Reset
framework: compass
stylesheet: compass/_reset.scss
layout: core
sidebar: true
classnames:
- reference
- core
- reset
meta_description: Adds a CSS Reset into your stylesheet.
---
- render 'reference' do
:markdown
This module applies the [global reset](/reference/compass/reset/utilities/#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/)
v0.12.2~dfsg/doc-src/content/reference/blueprint.haml 0000644 0000000 0000000 00000002422 11771656742 021355 0 ustar root root ---
title: Blueprint Module
crumb: Blueprint
framework: blueprint
stylesheet: _blueprint.scss
layout: blueprint
classnames:
- reference
- blueprint
meta_description: The Blueprint Framework -- ported to Sass.
---
- render 'reference' do
:markdown
The blueprint module is a simple way of importing all of the most
commonly used blueprint modules. In addition, it provides
a single mixin, +blueprint
, that
can be used to generate the blueprint css styles.
### Installing
To create a project using blueprint:
compass create my_project --using blueprint
To add blueprint to an existing compass project:
compass install blueprint
To add blueprint and compass to a Rails project:
compass init rails --using blueprint
### Alternate Project Layouts
For any of the above commands you could have also selected
the `blueprint/basic` or `blueprint/semantic` patterns. The basic
pattern assumes that you'll start out using conventional class-based
blueprint styling techniques, while the semantic template
assumes that you'll be using mixins and `@extend` to style
your site. Example:
compass create my_project --using blueprint/semantic
v0.12.2~dfsg/doc-src/content/reference/blueprint/ 0000755 0000000 0000000 00000000000 11771656742 020512 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/blueprint/utilities.haml 0000644 0000000 0000000 00000000341 11771656742 023366 0 ustar root root ---
title: Blueprint Utilities
crumb: Utilities
framework: blueprint
stylesheet: blueprint/_utilities.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
%p
Some utility classes.
v0.12.2~dfsg/doc-src/content/reference/blueprint/form.haml 0000644 0000000 0000000 00000000317 11771656742 022321 0 ustar root root ---
title: Blueprint Form
crumb: Form
framework: blueprint
stylesheet: blueprint/_form.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
%p
Basic form styles.
v0.12.2~dfsg/doc-src/content/reference/blueprint/reset/ 0000755 0000000 0000000 00000000000 11771656742 021634 5 ustar root root v0.12.2~dfsg/doc-src/content/reference/blueprint/reset/utilities.scss 0000644 0000000 0000000 00000000423 11771656742 024543 0 ustar root root ---
title: Blueprint Reset Utilities
crumb: Reset Utilities
framework: blueprint
stylesheet: blueprint/reset/_utilities.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
%p
Utility mixins for applying a reset and base styling.
v0.12.2~dfsg/doc-src/content/reference/blueprint/interaction.haml 0000644 0000000 0000000 00000000414 11771656742 023673 0 ustar root root ---
title: Blueprint Interaction
crumb: Interaction
framework: blueprint
stylesheet: blueprint/_interaction.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
%p
Some classes that are used in common website interactions.
v0.12.2~dfsg/doc-src/content/reference/blueprint/buttons.haml 0000644 0000000 0000000 00000000434 11771656742 023054 0 ustar root root ---
title: Blueprint Buttons
crumb: Buttons
framework: blueprint
stylesheet: blueprint/_buttons.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
:markdown
Install the buttons module with:
compass install blueprint/buttons
v0.12.2~dfsg/doc-src/content/reference/blueprint/debug.haml 0000644 0000000 0000000 00000000351 11771656742 022442 0 ustar root root ---
title: Blueprint Debug
crumb: Debug
framework: blueprint
stylesheet: blueprint/_debug.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
%p
Styles for debugging your grid alignments
v0.12.2~dfsg/doc-src/content/reference/blueprint/grid.haml 0000644 0000000 0000000 00000000320 11771656742 022275 0 ustar root root ---
title: Blueprint Grid
crumb: Grid
framework: blueprint
stylesheet: blueprint/_grid.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
%p
The blueprint grid.
v0.12.2~dfsg/doc-src/content/reference/blueprint/colors.haml 0000644 0000000 0000000 00000000364 11771656742 022661 0 ustar root root ---
title: Blueprint Colors
crumb: Colors
framework: blueprint
stylesheet: blueprint/_colors.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
%p
Color constants that you can refer to and preset.
v0.12.2~dfsg/doc-src/content/reference/blueprint/scaffolding.haml 0000644 0000000 0000000 00000000451 11771656742 023634 0 ustar root root ---
title: Blueprint Scaffolding
crumb: Scaffolding
framework: blueprint
stylesheet: blueprint/_scaffolding.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
%p
Training wheels... So that your site doesn't look too bad
when you're starting out.
v0.12.2~dfsg/doc-src/content/reference/blueprint/liquid.haml 0000644 0000000 0000000 00000001025 11771656742 022642 0 ustar root root ---
title: Blueprint Liquid
crumb: Liquid
framework: blueprint
stylesheet: blueprint/_liquid.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
:markdown
Import this to have a liquid grid.
The original liquid grid documentation is
[here](http://groups.google.com/group/blueprintcss/msg/d7171a8bef20b9a2).
By default the container takes 80% of the canvas, you can override this:
.container {
width: 99%
}
v0.12.2~dfsg/doc-src/content/reference/blueprint/ie.haml 0000644 0000000 0000000 00000002005 11771656742 021747 0 ustar root root ---
title: Blueprint IE Compatibility
crumb: Internet Explorer
framework: blueprint
stylesheet: blueprint/_ie.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
:markdown
This module should be imported into a stylesheet that will
only be served to legacy versions of Internet Explorer. If
you've used the blueprint project generator, this will be
done for you. In a standard blueprint project you'll need
the following:
@import blueprint/ie
+blueprint-ie
Or if you prefer to use blueprint on only some pages you can
nest these styles. E.g.
@import blueprint/ie
body.blueprint
+blueprint-ie(true)
The stylesheet should then be linked like so:
<!--[if lt IE 8]><link rel="stylesheet" href="/stylesheets/ie.css"
type="text/css" media="screen, projection"><![endif]-->
v0.12.2~dfsg/doc-src/content/reference/blueprint/print.haml 0000644 0000000 0000000 00000001160 11771656742 022507 0 ustar root root ---
title: Blueprint Print
crumb: Print
framework: blueprint
stylesheet: blueprint/_print.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
:markdown
The print stylesheet does sensible things for the printed page.
It's important to note that the grid layout is not applied to the printed page.
You probably want to set non-content sections like headers, footers, asides, and navs
to `display: none;` in your printed page.
See the [compass print utilities][pr_utils] for related functionality.
[pr_utils]: /reference/compass/utilities/print/
v0.12.2~dfsg/doc-src/content/reference/blueprint/rtl.haml 0000644 0000000 0000000 00000000350 11771656742 022154 0 ustar root root ---
title: Blueprint Rtl
crumb: Rtl
framework: blueprint
stylesheet: blueprint/_rtl.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
%p
For grids with use in right-to-left languages.
v0.12.2~dfsg/doc-src/content/reference/blueprint/fancy_type.haml 0000644 0000000 0000000 00000000361 11771656742 023516 0 ustar root root ---
title: Blueprint Fancy Type
crumb: Fancy Type
framework: blueprint
stylesheet: blueprint/_fancy-type.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
%p
Fancy Typography for your website.
v0.12.2~dfsg/doc-src/content/reference/blueprint/link_icons.haml 0000644 0000000 0000000 00000000511 11771656742 023502 0 ustar root root ---
title: Blueprint Link Icons
crumb: Link Icons
framework: blueprint
stylesheet: blueprint/_link-icons.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
:markdown
Install this plugin to get the assets and an example stylesheet:
compass install blueprint/link_icons
v0.12.2~dfsg/doc-src/content/reference/blueprint/typography.haml 0000644 0000000 0000000 00000000424 11771656742 023563 0 ustar root root ---
title: Blueprint Typography
crumb: Typography
framework: blueprint
stylesheet: blueprint/_typography.scss
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
%p
A base typography for your website that follows a typographic rhythm.
v0.12.2~dfsg/doc-src/content/reference/blueprint/reset.haml 0000644 0000000 0000000 00000000452 11771656742 022500 0 ustar root root ---
title: Blueprint Reset
crumb: Reset
framework: blueprint
stylesheet: blueprint/_reset.scss
sidebar: true
layout: blueprint
classnames:
- reference
- blueprint
---
- render 'reference' do
%p
A reset and base styling automatically applied to your webpage
by importing this module.
v0.12.2~dfsg/doc-src/content/reference/compass.haml 0000644 0000000 0000000 00000001200 11771656742 021007 0 ustar root root ---
title: Compass Core Framework
crumb: Compass Core
framework: compass
stylesheet: _compass.scss
classnames:
- reference
- core
meta_description: The Compass Core Framework.
layout: core
---
- render 'reference' do
%p
The compass core framework is a design-agnostic framework that
provides common code that would otherwise be duplicated across
other frameworks and extensions.
%h2 Non Imported Modules
%em You can import these yourself if you want to use them.
%ol
%li= render "partials/reference/import", :import => "compass/_layout.scss"
%li= render "partials/reference/import", :import => "compass/_reset.scss"
v0.12.2~dfsg/doc-src/content/blog/ 0000755 0000000 0000000 00000000000 11771656742 015473 5 ustar root root v0.12.2~dfsg/doc-src/content/blog/atom.haml 0000644 0000000 0000000 00000001231 11771656742 017273 0 ustar root root
%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]
v0.12.2~dfsg/doc-src/content/blog/archive.haml 0000644 0000000 0000000 00000000463 11771656742 017762 0 ustar root root ---
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]
v0.12.2~dfsg/doc-src/content/stylesheets/ 0000755 0000000 0000000 00000000000 11771656742 017124 5 ustar root root v0.12.2~dfsg/doc-src/content/stylesheets/home.scss 0000644 0000000 0000000 00000000634 11771656742 020754 0 ustar root root @import "compass";
@import "core/extensions";
@include reset(global);
@include reset(html5);
@import "core/base-classes";
@import "partials/theme";
@import "partials/layout";
@import "partials/nav";
@import "partials/typography";
@import "partials/main";
@import "partials/home";
@import "partials/ads";
html.dark { @include dark-theme; }
html.light { @include light-theme; }
@import "core/clearing-classes";
v0.12.2~dfsg/doc-src/content/stylesheets/ie.scss 0000644 0000000 0000000 00000000162 11771656742 020415 0 ustar root root ul#featured_sites li {
margin-left: 4px;
margin-top: 4px;
&:hover{ padding: 6px;
img { width: 240px; }}} v0.12.2~dfsg/doc-src/content/stylesheets/screen.scss 0000644 0000000 0000000 00000001121 11771656742 021273 0 ustar root root @import "compass";
@import "compass/layout";
@import "core/extensions";
@include global-reset;
@include reset-html5;
@import "core/base-classes";
@import "partials/theme";
@import "partials/layout";
@import "partials/typography";
@import "partials/nav";
@import "partials/sidebar";
@import "partials/ads";
@import "partials/main";
@import "partials/code";
@import "partials/example";
@import "partials/install";
@import "partials/blog";
@import "syntax/syntax-theme";
@import "core/clearing-classes";
html.dark { @include dark-theme(true); }
html.light { @include light-theme(true); }
v0.12.2~dfsg/doc-src/content/stylesheets/partials/ 0000755 0000000 0000000 00000000000 11771656742 020743 5 ustar root root v0.12.2~dfsg/doc-src/content/stylesheets/partials/_ads.scss 0000644 0000000 0000000 00000001514 11771656742 022547 0 ustar root root .advertisement {
padding: 8px 5px !important;
text-align: center;
line-height: 1.1em !important;
@include opacity(0);
@include transition(opacity 1s ease-in 1.5s);
&.visible {
@include opacity(1);
}
a:not(.pagerankspam) {
display: block;
color: white;
@extend .heading-font;
text-decoration: none;
&:hover {
@include text-shadow(0 0 2px #aaa);
}
}
.pagerankspam { font-size: 9px; }
.dark & {
@extend .code-block-dark;
img:hover { @include single-box-shadow(white); }
}
.light & {
@extend .code-block-light;
a:not(.pagerankspam) { color: #222}
img:hover { @include single-box-shadow(#222); }
}
#home & {
float: right;
width: 380px;
margin-top: 11px;
.fusionimg {
margin: 6px 8px;
float: left;
}
.fusiontext {
padding-top: 6px;
}
}
}
v0.12.2~dfsg/doc-src/content/posts/ 0000755 0000000 0000000 00000000000 11771656742 015720 5 ustar root root v0.12.2~dfsg/doc-src/content/posts/2011-05-09-compass-django.markdown 0000644 0000000 0000000 00000007065 11771656742 023432 0 ustar root root ---
title: "How to use Compass/Sass with Django."
description: "All the documentation is for Ruby/Rails development, so how does it work for the rest of us?"
author: eric
---
It's easy! Follow these two simple steps:
1. Use Compass/Sass.
2. Use Django.
That's it. Compass works great as a stand-alone tool. Run "compass --watch" on the command line or use [compass.app](http://compass.handlino.com/) to compile your stylesheets, and then commit the CSS to your Django project, just like you always have. Done.
## What about integration?
Compass and Sass are built in Ruby. When the rest of your project is also built in Ruby, it makes sense to squeeze every last ounce of convenient automatic integration, like having your project automatically compile Sass to CSS for you at runtime. But that integration is not actually necessary, and when the rest of your project is not Ruby, you pay a lot more for that little bit of convenience.
A Rails/Ruby project already has a full Ruby stack and deployment infrastructure to make sure all the right Ruby gems are available on the server. Adding a few Compass gems makes very little difference in the complexity of your production deployment.
For a Django project, integrating run-time Compass compilation (via something like [django-css](https://github.com/dziegler/django-css)) means requiring a full Ruby stack on your production servers, plus new deployment infrastructure for getting all the right gem versions in place. This is a significant chunk of additional moving parts on your production servers.
Keeping your production servers simpler is A Very Good Thing. (And, as a bonus, it allows you to deploy your project to pure-Python managed hosting environments).
## In development.
The disadvantage to our approach is that you are committing generated code to the repo. That's generally frowned upon. But we haven't seen any actual problems as a result of this. Nobody on the team is tempted to edit the generated CSS directly; we all know that we use Compass for that. There are no mysterious display inconsistencies between one developer and another, or between development and production, because of minor differences in something like a Compass plugin gem version. Everyone sees the same CSS. Differences between developers' Compass environments are caught quickly, because they show up right away as unexpected changes in the pre-commit diff of the generated CSS.
And I, as the designer/front-end developer, keep full control of the css-generation process without needing to touch the server. If I want to update the gems and make some changes, I can do that. I make the change, I commit the change, and it just works. For everyone. That's important to me. It removes all the pretense of dark magic that can come with Sass/Compass. I'm writing CSS. I'm committing CSS. Compass, Sass and all their plugins are just tools towards that end.
Of course, you'll want to commit the Sass as well, especially if you have multiple front-end developers on the team. That way the source is available for anyone who needs to update it, even though it's not needed by the server. You might also want a way of documenting the latest gems that should be used to compile it. That's easy enough to add in a comment or doc of it's own.
## Just Tools.
I want to say that again because I think it is the most important and most often forgotten rule of using a css pre-processor. **Compass and Sass are simply tools for writing CSS. They are not a new styling language. They are not magic. They make writing css easier - and that is all. The css output is the only thing that matters.** v0.12.2~dfsg/doc-src/content/posts/2012-05-20-removing-blueprint.markdown 0000644 0000000 0000000 00000005275 11771656742 024350 0 ustar root root ---
title: "Removing Blueprint from Compass in 0.13"
description: "Blueprint will be extracted to a plugin"
author: chris
---
Five years ago, [Blueprint CSS](http://blueprintcss.org/) was an
innovative CSS Framework. It was a boilerplate before
[H5BP](http://html5boilerplate.com/) and it was the most popular CSS
Grid Framework when the concept was still young.
Blueprint's regular structure and common-sense approach, together with
its inherent weaknesses, was a major inspiration for the development of
Compass. In fact, Compass started solely as a rejected sass-based
toolchain for the blueprint project.
Sadly, the blueprint core team, while having never officially announced
that the project is over, has through negligence, caused the project to
fall behind. It has not kept up with layout and responsive approaches
that are essential to web design in 2012.
Furthermore, there are many new layout mechanisms coming in CSS:
[columns][css-columns], [box-sizing][box-sizing], [regions][css-regions],
[grid layout][css-grid], and [flexbox][css-flexbox]. The future of
layout looks bright and we want Sass users to be at the forefront of
their adoption, establishing the best practices of 2015 instead using
the best practices from 2009.
Given these developments, we have decided that it is time for Compass to
get out of the "Grid Business". Starting in 0.13 (our next major
release) we will have removed Blueprint from Compass. The stylesheets
will be extracted as a plugin so that our users can continue to
use it, if they need to. At that time, you can install it with two
simple steps:
1. `gem install compass-blueprint`
2. Edit your compass configuration and add: `require 'compass-blueprint'`
We hope that this means that the Compass community will think more
carefully about the grids that they use and whether they meet their
project's specific needs.
If you are looking for a grid system for your next site, or to replace
blueprint with something more modern. We suggest you look into
[Susy](http://susy.oddbird.net/). It is written by Compass core team
member, [Eric Meyer](http://twitter.com/eriiicam). Susy 1.0 has been
completely overhauled to take advantage of modern browsers and the very
latest features in Sass 3.2 and Compass 0.13. If you have a favorite
grid framework, please feel free to mention it in the comments.
**TL;DR** Starting in Compass 0.13, blueprint will be extracted from compass
and available as a compass extension named `compass-blueprint`.
[css-columns]: http://www.w3.org/TR/css3-multicol/
[css-grid]: http://dev.w3.org/csswg/css3-grid-layout/
[css-regions]: http://dev.w3.org/csswg/css3-regions/
[css-flexbox]: http://www.w3.org/TR/css3-flexbox/
[box-sizing]: http://caniuse.com/css3-boxsizing
v0.12.2~dfsg/doc-src/content/posts/2012-02-01-compass-0-12-is-released.markdown 0000644 0000000 0000000 00000004457 11771656742 024732 0 ustar root root ---
title: "Compass v0.12 is Released"
description: "Compass 0.12: Flexible Sprites, Rails Integration"
author: chris
---
Compass 0.12 is out! Install it now:
$ (sudo) gem install compass
This release is primarily to support the Rails Asset Pipeline which
required major changes to the Compass internals. If you use rails
with Compass please read the [blog post about the new compass-rails
gem][compass-rails].
In addition to the rails improvements this release contains many updates
to Compass Sprites:
* **Sprite Layouts**: `vertical` (default), `horizontal`, `diagonal`, and `smart`
layouts are now available. Different layouts may allow you to use
sprites more easily with differing design requirements. The `smart`
layout will efficiently pack sprites of different sizes -- resulting
in smaller file sizes. To select a layout set the
`$-layout` variable to your desired layout name.
* **Sprite Load Path**: Sprite source files can now be stored in more locations than
just your images directory. To add sprite locations in your compass
configuration: `sprite_load_path << 'my/sprite/folder'
* **Sprite output location**: If you need to output sprites to a
location other than the images directory set `generated_images_dir`,
`generated_images_path`, `http_generated_images_dir`, and
`http_generated_images_path` in your compass configuration according
to your needs. You can refer to images in your generated images
directory using the `generated-image-url()` function.
Additionally there are many new CSS3 improvements, bug fixes, and other
small enhancements that you can read about in the
[CHANGELOG](/CHANGELOG/).
What's next for Compass? First, we've added [Anthony
Short](/blog/2012/03/11/anthony-short-joins-the-compass-core-team/) to
the team and we're really excited to see him come make our stylesheets
even more awesome. The Sass 3.2 release is coming soon and the 0.13
release of compass will take advantage of the great features that it
offers. Additionally, we're working on an extension registry where you
can post your compass extensions and discover new ones. Lastly, we'll
be extracting blueprint to a compass extension as that project seems to
have stagnated. I'd say we're getting pretty close to a 1.0 release!
[compass-rails]: /blog/2012/01/29/compass-and-rails-integration/
v0.12.2~dfsg/doc-src/content/posts/2012-03-11-anthony-short-joins-the-compass-core-team.markdown 0000644 0000000 0000000 00000002031 11771656742 030531 0 ustar root root ---
title: "Anthony Short joins the Compass core team"
description: "We're excited to announce a new team member: Anthony Short"
author: chris
---
Please join us in welcoming Anthony Short to the Compass core team.
Anthony has been an active member in the "CSS Compiler" community for
a very long time now. A couple years ago he shut down his own CSS
compiler project called [Scaffold](https://github.com/anthonyshort/Scaffold)
and gave his backing to the Sass/Compass community. Since then, he
has been an active member of our community.
Anthony is a Designer and Developer at [Newism](http://newism.com.au/) a
web design and marketing firm in Newcastle, Australia. His depth and
breadth of knowledge about CSS and cutting-edge design is evident in
his work and his excellent pattern library for Compass:
[Stitch](https://github.com/anthonyshort/stitch-css).
You can find Anthony on the web at these fine locations:
* [Github](https://github.com/anthonyshort)
* [Twitter](https://twitter.com/#!/anthonyshort)
* [Blog](http://anthonyshort.me/)
v0.12.2~dfsg/doc-src/content/posts/2012-01-29-compass-and-rails-integration.markdown 0000644 0000000 0000000 00000004662 11771656742 026362 0 ustar root root ---
title: "Compass/Rails Integration in v0.12"
description: "Starting in Compass v0.12 compass's rails integration is
done via a new project called compass-rails."
author: chris
---
The Compass v0.12 release is way behind schedule but it's finally getting
very close to release. The main goal of the v0.12 release has been to add
support for the rails asset pipeline and we hope that you'll agree that this
release achieves the very best integration with rails that compass has
ever provided.
In v0.12, we've create a new gem called `compass-rails` to provide full
support for rails 2.3 and greater. Let me tell you, this was no small
feat. 2.3 lacks Railtie support and 3.1 introduced the asset pipeline.
Backflips were performed; blood, sweat, and tears were shed; Monkeys
were patched and Ducks were punched.
The compass command line tool will now be aware of and compass
configuration settings you've made in your rails configuration files
and/or in the compass configuration file. You can use the approach that
best suites your workflow.
While the asset pipeline is convenient, large applications with lots of
stylesheets and many imports can become sluggish in development mode. To
make things snappier, you can now run the compass watcher in a separate
terminal to begin compilation as soon as you save. In combination with
tools like [live-reload](https://github.com/mockko/livereload), you may
not even need to reload your webpage to see the result in your browser.
Compass extensions and their starter files can be added to your rails
project following the extensions' existing installation instructions.
No special consideration is needed to support rails except to note
that the extension gem should be listed in the `:assets` group of your
Gemfile and you might need to use `bundle exec` to launch the compass
command line tool.
Having a dedicated gem for integration provides a number of benefits.
First, it means that we can release rails integration fixes on a
separate release schedule from the main compass library. Second, it
solves a chicken & egg problem we had where the command-line tools
didn't know whether they were dealing with a rails project until it was
too late. Finally, it allowed us to clean up some of the Compass
internals. To be clear, this gem doesn't mean that Rails support is
deprecated or a second class citizen in any way.
Huge thanks go to [Scott Davis](https://github.com/scottdavis) for his
hard work on the compass-rails gem.
v0.12.2~dfsg/doc-src/content/posts/2011-04-26-compass-release-strategy.markdown 0000644 0000000 0000000 00000006401 11771656742 025437 0 ustar root root ---
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.
v0.12.2~dfsg/doc-src/content/posts/2011-04-24-v011-release.markdown 0000644 0000000 0000000 00000020732 11771656742 022622 0 ustar root root ---
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, expect small point releases to adapt to new browser support and changes much more rapidly . 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:
* `/icon/new.png`
* `/icon/edit.png`
* `/icon/save.png`
* `/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.
v0.12.2~dfsg/doc-src/content/get-involved/ 0000755 0000000 0000000 00000000000 11771656742 017153 5 ustar root root v0.12.2~dfsg/doc-src/content/get-involved/index.haml 0000644 0000000 0000000 00000002532 11771656742 021127 0 ustar root root ---
title: Get involved with the Compass community
crumb: Get Involved
classnames:
- get-involved
layout: default
---
%h1 Get Involved With Compass
:markdown
Many [wonderful people](https://github.com/chriseppstein/compass/contributors) have helped to make Compass awesome.
Here are some ways you can get involved with the Compass community.
## Share Sweet Stylesheets
So you've written some smashing Sass and you want to share them with others. Here are some ways you can.
1. [**Contribute to Compass**](/help/tutorials/contributing).
2. [**Develop a Compass Extension**](/help/tutorials/extensions).
3. [**Contribute to Sass Recipes**](http://chriseppstein.github.com/sass-recipes/).
4. Publish your code somewhere and email a link to the [mailing list](http://groups.google.com/group/compass-users).
## Help Others
Join the [mailing list](http://groups.google.com/group/compass-users) and help answer questions and share from your experience. If you're
writing a blog post about Sass or Compass send a link to the mailing list and we'll help you spread the word.
## Give Financially
Compass is charityware. You can use it as much as you like, but we encourage you to make a donation to help the [UMDF](http://umdf.org/)
find a cure for mitochondrial disease. If you can, please [donate here](http://umdf.org/compass/). Thanks!
v0.12.2~dfsg/doc-src/content/CHANGELOG-v0-10-0-beta.markdown 0000644 0000000 0000000 00000045012 11771656742 021414 0 ustar root root ---
title: Compass v0.10.0 Beta History
crumb: CHANGELOG
body_id: changelog
layout: article
---
0.10.0.rc6 (May 8, 2010)
------------------------
* [Compass Core] The configuration constant `$firefox2-ellipsis` has been
renamed to `$use-mozilla-ellipsis-binding` to reflect the fact that
it must be used for any version of mozilla less than 3.6.
* [CLI] The the new Sub-command based CLI will now recognize abbreviated
commands as long as the abbreviation is unambiguous.
For instance, `compass w` is a shortcut for `compass watch` and
`compass com` for `compass compile` but `compas co` will not work
for compile because it also matches `compass config`.
* [Rails] When configuring Sass during initialization,
Compass now passes the template locations as an array of tuples
instead of as a hash. This preserves ordering in all versions
of ruby and ensures that the deprecated imports do not take precedence.
0.10.0.rc5 (May 2, 2010)
------------------------
* [Rails] The default location for compass extensions has moved from
`vendor/plugins/compass/extensions` to `vendor/plugins/compass_extensions`.
* [Rails] The rails template has been updated to use the latest haml and compass versions.
* [Compass Core] Global reset no longer automatically resets the *:focus.
This allows browsers to use their default :focus styles which is considered
a best practice. If you wish to reset :focus styles simply include this in
your stylesheets:
`*:focus { @include reset-focus; }`
* [Compass Core] A new mixin `replace-text-with-dimensions` has been added.
This is the same as the `replace-text` mixin except that it will read the
dimensions from the image and set them for you on the element.
* [Compass Core] If you want Firefox 2 Support (via -moz-binding) for the
`ellipsis` mixin, you must now set `$firefox2-ellipsis` to `true` before
importing the module.
* [Compass Core] The `compass/text/ellipsis` module is now imported
automatically by the `compass/text` module.
* [Compass Core] The gradient mixins now accept a background image that will
be placed over the gradient. Credit: [Will Leinweber](http://bitfission.com/)
* [Compass Core] You can now opt out of support for specific browsers in
the css3 module. See [the docs](/reference/compass/css3/shared/)
for more details.
0.10.0.rc4 (April 27, 2010)
---------------------------
* Lot of new docs can be found at: [http://compass-style.org/](http://compass-style.org/).
* The `unobtrusive-logo` mixin is deprecated and will be removed.
If you use this, please move the source to your project.
* The CSS3 modules were refactored to share a common implementation that
abstracts the browser prefixes that are supported and gives
greater control to the user over which prefixes are generated.
Depending on what mixins you were using you might see some changes to
what prefixes get generated by default and the order that they are
emitted. The goal of this change is to provide a more future-proof
implementation.
* The unnecessary import of the `float` module from the `hacks` module
was removed. If you were relying on this, you'll need to
import the float module explicitly now.
* The `pretty-bullets` mixin will now infer the image dimensions by
reading the image file if the image dimensions are not provided.
* The old CLI is now deprecated and a warning message will be printed
out if you use it. The new CLI is better and can be learned
by typing `compass help`. Credit: [Alexander Kahn](http://akahn.net)
* The `background-clip` mixin now accepts the value of `text`. Credit: [Thomas Reynolds]()
* The display: box model and associated properties are now part of the
css3 module. Credit: [Lorin Tackett](http://blog.lorintackett.com/)
* The compass gem is now built with a simple `gem build compass.gemspec`.
This should make it play nicer with tools like
[bundler](http://gembundler.org/).
0.10.0.rc3 (April 13, 2010)
---------------------------
* This release addresses several bugs in rc2.
0.10.0.rc2 (April 12, 2010)
---------------------------
**IMPORTANT:**
* Compass now depends on Sass 3 -- Please be prepared to upgrade.
Things won't break but you'll have a lot of deprecation warnings.
Upgrading is pretty easy thanks to the `sass-convert` tool. See the
[Sass Changelog](http://beta.sass-lang.com/yardoc/file.SASS_CHANGELOG.html)
for more information.
* All compass stylesheets are now written in the SCSS syntax,
if you import compass framework stylesheets with an explicit
`.sass` extension, then you'll receive deprecation warnings
directing you to update your stylesheets.
* A new command line switch `--syntax` (or `-x`) has been added
to commands that install stylesheets into your project that
allows you to select the syntax to use (scss or sass)
* A new configuration option `preferred_syntax` now exists
and defaults to `:scss`. Please update your project's configuration
file with `preferred_syntax = :sass` if you prefer to use the
indentation-based syntax.
* You may silence deprecation warnings by adding
`sass_options = {:quiet => true}` to your configuration.
0.10.0.pre9 (March 6, 2010)
---------------------------
* Fix a ruby 1.9 bug in the image_size helper functions for jpeg images.
* Silence a deprecation warning.
0.10.0.pre7 & 0.10.0.pre8 (February 23, 2010)
---------------------------------------------
* Rails 3 compatibility fixes
* Fix for rgba colors with the new gradient mixins
* A better error message if a color stop list is not passed in to the gradient mixins.
0.10.0.pre6 (February 22, 2010)
-------------------------------
**IMPORTANT:**
* Rails users need to update their compass initializer.
* The CSS 3 Gradient mixins were re-written and their usage has changed.
Read on for the details:
### CLI
* Fixed some issues with colorized output.
* Don't force the user to specify the configuration path when calling compass config
### Compass Core
* Fix to the bang_hack mixin (Credit: Mark Rajcok)
* Support :first-child and :last-child pseudo selectors for +horizontal-list. (Credit: Cody Robbins)
* Clear the sticky footer so that it works correctly with grid layouts.
* The css3 gradient module has been re-written and has a new, much simpler mixins. If you have been using the css3 gradient mixins, you'll need to update your sass stylesheets. The new mixins can be seen in action [here](http://compass-style.org/examples/css3/gradients.html).
* Added new helper functions: `image_width("path/to/image.png")` & `image_height("path/to/image.png")` that return the size in pixels. (Credit: Deepak Jois & Richard Aday)
### Blueprint
* Take margins into account in liquid grid. (Credit: Christoffer Eliesen)
### Rails
* Several Rails 3 bug fixes (Credit: Jacques Crocker)
* Don't set unset options on the Sass::Plugin
* Fixed a setup bug and handle compass configuration changes at rails boot.
**IMPORTANT:** Existing rails projects _must_ change their compass initializer file to:
require 'compass'
rails_root = (defined?(Rails) ? Rails.root : RAILS_ROOT).to_s
Compass.add_project_configuration(File.join(rails_root, "config", "compass.rb"))
Compass.configure_sass_plugin!
Compass.handle_configuration_change!
### Internals
* New APIs for dealing with configuration changes and accessing a compiler instance.
* Provide a convenience function for discovering extensions: `Compass.discover_extensions!` that can be called during project configuration w/ other ruby frameworks.
### Extensions
* Don't force an extension to register itself just because it has ruby code.
This makes it easier for extensions to provide Sass functions from ruby.
Special thanks to Daniel Hofstetter for fixing my typos.
0.10.0.pre5 (January 18, 2010)
------------------------------
* Fixed a bug in the grid builder in ruby 1.8.6 (Credit: [Richard Wöber][der-rich])
* Better sudo handling for the rails installer via environment variables or prompt. (Credit: Ryan Shaw, Evan Sharp)
* Removed support for the rip package manager.
* Support for scss files in the compass watcher.
* Cache buster timestamps were not working in some cases.
* Make ANSI color output work on windows.
* Command line switch (--boring) to turn off colorized output.
* Strip trailing slash from directory and path configuration variables.
* Added a --poll option to the compass watch subcommand to force polling.
* Fixed a test failure in ruby 1.9 due to faulty test code.
* Move the frameworks directory back to the top level. There's not actually a good reason for it to be buried in the ruby source.
* Upgrade FSSM. (Hopfully) Fixes a watcher issue that caused the watcher to not trigger for some users.
* Silence a deprecation warning in Rails 3.
0.10.0.pre4 (January 04, 2010)
------------------------------
* Fixed an FSSM loading issue that broke the compass watcher.
* Fixed some compatibility issues with edge versions of Sass.
0.10.0.pre3 (January 02, 2010)
------------------------------
Bug fixes:
* [Blueprint] Bug Fix: variable referenced in a non-script context within the
dquo mixin in the fancy_type module.
* [Rails] fixed win32 sudo incompatibility issue in the rails installer template.
(Credit: [Jonathan Silverman][jsilver])
* [Rails] Update the gem dependencies for the rails installer template.
* If the configuration file changes, wipe out the sass cache and force compilation
* Upgrade the vendored version of FSSM to version 0.1.2.
Fixes some bugs with jruby and adds inotify support for linux.
(Credit: [Travis Tilley][ttilley])
* Patched hide-text to account for items that are not left aligned.
(Credit: [Josh Pyles][pixelmatrix])
Minor Enhancements:
* Support for SCSS files if haml edge is installed.
* Color any stderr or stdout output from the `Sass::Engine` red during compilation.
* [Configuration] The sass cache location can now be set in the compass config
file using the `cache_dir` property and the cache can be disabled by setting
`cache = false`.
* [Compass Core] `+min-height`, `+min-width`, and `+bang-hack` mixins in the
compass/utilities/general/min.sass module.
(Credit: [Adam Stacoviak][adamstac])
* [Command Line] If you only want to compile certain files, you can now
specify them when invoking compass compile. E.g. `compass compile src/foo.sass`
* [Compass Core] Split out `+hide-text` as its own mixin.
(Credit: [Andrew Vit][avit])
* Some code cleanup for the compass project compiler.
* Removed the dependency on RMagic for grid image generation.
(Credit: [Richard Wöber][der-rich])
0.10.0.pre2 (November 30, 2009)
--------------------------------
Bug fixes:
* The line-height in the compass reset should have been 1 and not 1em.
* Fixed the reference in the rails initializer to the compass configuration file.
* Use the correct error formatting function based on what sass version is installed.
* Boolean properties like line_comments can now be set to false in configuration files
0.10.0.pre1 (November 29, 2009)
--------------------------------
Deprecated in this release:
* The usless blueprint "modules" folder will be removed. Please update your
blueprint imports by removing the modules folder. Deprecation warnings will be
emitted if you use the old imports.
* Blueprint mixins that used to accept a "body selector" argument, are now
deprecated, instead you should pass `true` to them and mix them into
the selector of your choice.
* If you are using the `+opacity` or `+inline-block` mixins, you may need to update your imports.
* In your configuration file, setting `http_images_path` to `:relative` is
deprecated in favor of setting `relative_assets` to `true`
* The YUI framework has been extracted to a plugin.
If you use it, please follow the [installation instructions](http://github.com/chriseppstein/yui-compass-plugin)
Command-Line:
* The compass command-line tool has been re-written to allow be easier to
use and be more flexible. The old command line is still supported at
this time. "compass help" will get you started on using the new
command line syntax.
* Allow specification of a height for the grid image
* For the truly hardcore compass users, you may now create a
compass project using "compass create my_project --bare"
and you'll have a completely bare project created for you with no
sass files provided for you.
* Get stats on your compass project with "compass stats". You'll
need to install the "css_parser" ruby gem to get stats on your
css files.
Configuration:
* The entire configuration infrastructure has been re-written to make it
easier to support the various sources of configuration data (project type,
config file, command line, and hard coded defaults)
* Whether to generate relative links to assets is now controlled by a
separate boolean configuration flag called `relative_assets` in the
configuration file and `--relative-assets` on the command line.
Setting `http_images_path` to `:relative` is deprecated.
* You may now configure the http locations for your project by simply setting
`http_path` for the top level path of the project. You
may also set `http_images_dir`, `http_stylesheets_dir`, and
`http_javascripts_dir` relative to the `http_path` instead of
setting the absolute `http_XXX_path` counterparts.
* You may now configure the fonts directory for your project (fonts_dir).
By default, for standalone projects, it is the "fonts" subdirectory of
your css directory. Rails projects will default to "public/fonts".
Compass Core:
* A new helper function `stylesheet_url(path)` can now be used to refer
to assets that are relative to the css directory.
* Compass sprite mixins are now more flexible and feature rich.
* Fixed the append_selector function to allow comma-delimited selectors
for both arguments instead of just the first
* There is no longer any outline on unstyled links in the :active and :focused states.
* IE6 bug fixes for sticky-footer
* New CSS3 Compatibility Mixins. You can import them all with `@import compass/css3.sass`
* `+opacity(amount)` where amount should be between 0 and 1, where 0 is transparent and 1 is opaque.
* `+opaque` and `+transparent` mixins for convenience. Built on top of the opacity mixin.
* `+border-radius(amount)` as well as the following convenience mixins:
* `+border-top-left-radius(amount)`
* `+border-top-right-radius(amount)`
* `+border-top-right-radius(amount)`,
* `+border-bottom-left-radius(amount)`
* `+border-bottom-right-radius(amount)`
* `+border-top-radius(amount)`
* `+border-right-radius(amount)`
* `+border-left-radius(amount)`
* `+border-bottom-radius(amount)`
* `+box-shadow(!horiz_offset, !vert_offset, !blur, !color)`
* `+box-sizing(!sizing_mode)`
* Column support via the following mixins:
* `+column-count`
* `+column-gap`
* `+column-width`
* `+column-rule-width`
* `+column-rule-style`
* `+column-rule-color`
* `+column-rule`
* `+background-clip(clip)` where clip can be `padding-box` or `border-box`
* `+background-origin(origin)` where origin can be `padding-box`, `border-box`, or `content-box`
* `+background-size(size)` where size is a width and height. E.g. "50% 75%"
* `+font-face` should be mixed into the top level of your document.
Usage Example: `+font-face("this name", font-files("this.woff", "woff", "this.otf", "opentype"), "fonts/this.eot", "thisname")`
* Simple Background Gradient Support:
* `+gradient` - Generic background gradient mixin
* `+radial-gradient` - Radial gradient mixin
* `+linear-gradient` - Linear gradient mixin
* `+h-gradient` - Horizontal linear gradient mixin
* `+v-gradient` - Vertical linear gradient mixin
* `+text-shadow` - Create a text shadow effect.
* Transforms Support:
* `+transform`
* `+scale`
* `+rotate`
* `+translate`
* `+skew`
* Transition Support:
* `+transition-property`
* `+transition-duration`
* `+transition-timing-function`
* `+transition-delay`
* `+transition`
* The import for `+inline-block` has moved from compass/utilities/general/inline_block
to compass/css3/inline_block
* The import for `+opacity` has moved from compass/utilities/general/opacity
to compass/css3/opacity
* Note: If you are using the `+opacity` or `+inline-block` mixins,
you may need to update your imports.
Blueprint:
* Make the primary blueprint mixins easier to use by allowing them to be nested when passing true as the first argument.
The old approach of passing a selector as the first argument is now deprecated in favor of a simple flag to indicate nesting or not.
YUI:
* YUI was upgraded to 2.7.0
* Yahoo has deprecated the YUI CSS framework, as such YUI has been extracted to a plugin.
If you use it, please install it with: `sudo gem install compass-yui`
Extensions:
* Extensions can now be installed locally by unpacking them into a project's
"extensions" directory. Rails projects use "vendor/plugins/compass/extenstions".
* Extensions can deliver html to projects if they like. The html can be in
haml and will be transformed to html and can contain inline, compass-enabled
sass.
* All files can be processed using ERB before being copied into the user's
project.
* Compass extensions can now add support for other application frameworks.
These extensions can help compass understand the project structure of that
framework as well as provide runtime integration for ruby-based apps.
Contact me if you plan to do this -- the first couple times may be a little
rough.
* Compass extensions can now add new command line commands. Contact me if you
plan to do this -- the first couple times may be a little rough.
* Extensions can now provide help documentation just after a project is
created and on demand when the user uses the command line help system.
This can be done via the manifest file or by adding a USAGE.markdown file
at the top level of the framework template.
Miscellaneous:
* The compass configuration object is no longer a singleton, this makes it
possible for other ruby software to manage multiple compass projects at a
time.
* Compass no longer requires rubygems in order to work, this is a ruby
best-practice.
* All sass provided by compass now uses css-style property syntax.
* The command line tool is now tested using the cucumber testing framework.
Many thanks to the following Contributors:
* Brandon Mathis - CSS3 (+opacity, +border-radius) and sprites
* Eric Meyer - CSS3 (+box-shadow, +columns, +box-sizing)
* Jacques Crocker - Merb Compatibility fixes
* Gabriel Mansour - Fixes to +unstyled-link
* John Debs - IE6 Fixes for +sticky-footer
* Brian Johnson - Upgraded to YUI 2.7.0
* Beau Smith - fixing my dyslexia.
v0.12.2~dfsg/doc-src/content/sitemap.xml 0000644 0000000 0000000 00000000023 11771656742 016727 0 ustar root root <%= xml_sitemap %>
v0.12.2~dfsg/doc-src/content/search.haml 0000644 0000000 0000000 00000002261 11771656742 016661 0 ustar root root ---
title: Search | Compass Documentation
crumb: Search
body_id: search
---
- content_for(:javascripts) do
%script(type="text/javascript" src="/javascripts/search-data.js")
%script(type="text/javascript" src="/javascripts/jquery.url.packed.js")
:javascript
$(function(){
if ($.url.param("q")) {
var query = $.url.param("q").replace("+"," ");
$('input#q').attr('value', query);
search(query, displayResults);
}
$('input#q').keyup(function(){
search(this.value, displayResults);
});
})
function displayResults(items) {
if (items.length > 0) {
var html = ""
for (var i = 0; i < items.length; i++) {
html += ''+items[i].title+' ';
}
$('ol#results').html(html)
} else {
$('ol#results').html("Nothing found. ");
}
}
%input#q{:type => "text", :placeholder=>"Search"}
%h2 Index of all:
%ul#indexes
%li
%a(href="/index/variables/") Variables
%li
%a(href="/index/mixins/") Mixins
%li
%a(href="/index/functions/") Functions
%h2 Results
%ol#results
%li.none Please enter a search term. v0.12.2~dfsg/doc-src/content/install.haml 0000644 0000000 0000000 00000005460 11771656742 017066 0 ustar root root ---
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
ruby installed .
%p
For more advanced users you may want to install
rvm .
%h2 Setting up the ruby environment
%ol
%li $ gem update --system
%li $ gem install compass
%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
%span.creating
named
%input#project_name(placeholder="")
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
and would like to
%select#options
%option{:value => "default"} use compass's recommended
%option{:value => "customized"} customize my project's
directory structure
using
%input#sassdir(placeholder="sass")
for the sass source directory,
%input#cssdir(placeholder="css")
for the css output directory,
%input#jsdir(placeholder="javascripts")
for the javascripts directory,
and
%input#imagesdir(placeholder="images")
for the images directory .
%h4 Thanks. Now run the following steps in your terminal:
%p.note
Terminal newbies, read the Designer’s Guide to the OSX Command Prompt first!
#steps
Loading...
%p.note Note: $
is a placeholder for your terminal's prompt. You don't type it.
%h4 Then follow the instructions that compass provides in the output.
%h2 Hate the Command Line?
%p Try one of these Community supported GUI applications:
%ul
%li Compass.app from Handlino .
%li Scout from Mutually Human .
%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
v0.12.2~dfsg/doc-src/content/.livereload 0000644 0000000 0000000 00000001164 11771656742 016701 0 ustar root root # Lines starting with pound sign (#) are ignored.
# additional extensions to monitor
#config.exts << 'haml'
# exclude files with NAMES matching this mask
#config.exclusions << '~*'
# exclude files with PATHS matching this mask (if the mask contains a slash)
#config.exclusions << '/excluded_dir/*'
# exclude files with PATHS matching this REGEXP
#config.exclusions << /somedir.*(ab){2,4}.(css|js)$/
# reload the whole page when .js changes
#config.apply_js_live = false
# reload the whole page when .css changes
#config.apply_css_live = false
# wait 100ms for more changes before reloading a page
#config.grace_period = 0.1
v0.12.2~dfsg/doc-src/content/examples/ 0000755 0000000 0000000 00000000000 11771656742 016366 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/ 0000755 0000000 0000000 00000000000 11771656742 020033 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/ 0000755 0000000 0000000 00000000000 11771656742 020706 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/columns.haml 0000644 0000000 0000000 00000000242 11771656742 023227 0 ustar root root ---
title: Columns
description: css3 mixin for css columns
framework: compass
stylesheet: compass/css3/_columns.scss
example: true
---
= render "partials/example" v0.12.2~dfsg/doc-src/content/examples/compass/css3/columns/ 0000755 0000000 0000000 00000000000 11771656742 022366 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/columns/markup.haml 0000644 0000000 0000000 00000000740 11771656742 024531 0 ustar root root %div(id="two-column")
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
%div(id="three-column")
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
%div(id="four-column-with-rule")
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
v0.12.2~dfsg/doc-src/content/examples/compass/css3/columns/stylesheet.sass 0000644 0000000 0000000 00000000420 11771656742 025446 0 ustar root root @import compass/css3
#two-column
+column-count(2)
width: 300px
margin-bottom: 20px
#three-column
+column-count(3)
width: 300px
margin-bottom: 20px
#four-column-with-rule
+column-count(4)
+column-rule(1px, solid, red)
width: 300px
margin-bottom: 20px v0.12.2~dfsg/doc-src/content/examples/compass/css3/transition/ 0000755 0000000 0000000 00000000000 11771656742 023100 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/transition/markup.haml 0000644 0000000 0000000 00000000675 11771656742 025252 0 ustar root root %p
this box has a width transition on hover
#width.transition-example
%p
this box has a width transition on hover, with a set duration
#width-duration.transition-example
%p
this box has a width transition on hover, with a set duration, and uses the 'easein' timing function
#width-duration-easein.transition-example
%p
this box has a few seconds delay, so wait a little before the transition occurs
#width-delay.transition-example v0.12.2~dfsg/doc-src/content/examples/compass/css3/transition/stylesheet.sass 0000644 0000000 0000000 00000001042 11771656742 026161 0 ustar root root @import compass/css3
.transition-example
width: 40px
height: 40px
background: red
margin: 20px
#width
+transition-property(width)
#width:hover
width: 80px
#width-duration
+transition-property(width)
+transition-duration(2s)
#width-duration:hover
width: 80px
#width-duration-easein
+transition-property(width)
+transition-duration(2s)
+transition-timing-function(ease-in)
#width-duration-easein:hover
width: 80px
#width-delay
+transition-property(width)
+transition-delay(2s)
#width-delay:hover
width: 80px v0.12.2~dfsg/doc-src/content/examples/compass/css3/gradient.haml 0000644 0000000 0000000 00000000260 11771656742 023344 0 ustar root root ---
title: Background Gradients
description: css3 mixin for css gradients
framework: compass
stylesheet: compass/css3/_images.scss
example: true
---
= render "partials/example" v0.12.2~dfsg/doc-src/content/examples/compass/css3/box_sizing.haml 0000644 0000000 0000000 00000000247 11771656742 023727 0 ustar root root ---
title: Box-sizing
description: css3 mixin for box-sizing
framework: compass
stylesheet: compass/css3/_box-sizing.scss
example: true
---
= render "partials/example" v0.12.2~dfsg/doc-src/content/examples/compass/css3/inline_block/ 0000755 0000000 0000000 00000000000 11771656742 023336 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/inline_block/markup.haml 0000644 0000000 0000000 00000000070 11771656742 025475 0 ustar root root %p
this is an
%span(id="inline-block") inline block
v0.12.2~dfsg/doc-src/content/examples/compass/css3/inline_block/stylesheet.sass 0000644 0000000 0000000 00000000151 11771656742 026417 0 ustar root root @import compass/css3
#inline-block
+inline-block
padding: 4px 10px
background: red
color: white
v0.12.2~dfsg/doc-src/content/examples/compass/css3/box_shadow/ 0000755 0000000 0000000 00000000000 11771656742 023043 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/box_shadow/markup.haml 0000644 0000000 0000000 00000000135 11771656742 025204 0 ustar root root .box-shadow-example
#box-shadow-default
#box-shadow-custom
#box-shadow-custom-multiple
v0.12.2~dfsg/doc-src/content/examples/compass/css3/box_shadow/stylesheet.sass 0000644 0000000 0000000 00000000600 11771656742 026123 0 ustar root root @import compass/css3
.box-shadow-example div
width: 40px
height: 40px
background: #EEE
margin: 20px
float: left
// Default single box shadow
#box-shadow-default
+single-box-shadow
// Box shadow with custom settings
#box-shadow-custom
+box-shadow(red 2px 2px 10px)
#box-shadow-custom-multiple
+box-shadow(rgba(blue, .4) 0 0 25px, rgba(green, .2) 0 0 3px 1px inset)
v0.12.2~dfsg/doc-src/content/examples/compass/css3/transition.haml 0000644 0000000 0000000 00000000254 11771656742 023744 0 ustar root root ---
title: Transition
description: css3 mixin for css transitions
framework: compass
stylesheet: compass/css3/_transition.scss
example: true
---
= render "partials/example" v0.12.2~dfsg/doc-src/content/examples/compass/css3/box_sizing/ 0000755 0000000 0000000 00000000000 11771656742 023061 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/box_sizing/markup.haml 0000644 0000000 0000000 00000000077 11771656742 025227 0 ustar root root #content-box.box-sizing-example
#border-box.box-sizing-example v0.12.2~dfsg/doc-src/content/examples/compass/css3/box_sizing/stylesheet.sass 0000644 0000000 0000000 00000000324 11771656742 026144 0 ustar root root @import compass/css3
.box-sizing-example
background: red
padding: 20px
border: 10px solid green
margin: 20px
width: 200px
#content-box
+box-sizing(content-box)
#border-box
+box-sizing(border-box) v0.12.2~dfsg/doc-src/content/examples/compass/css3/border_radius.haml 0000644 0000000 0000000 00000000260 11771656742 024373 0 ustar root root ---
title: Border radius
description: css3 mixin for border-radius
framework: compass
stylesheet: compass/css3/_border-radius.scss
example: true
---
= render "partials/example" v0.12.2~dfsg/doc-src/content/examples/compass/css3/regions/ 0000755 0000000 0000000 00000000000 11771656742 022354 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/regions/markup.haml 0000644 0000000 0000000 00000000141 11771656742 024512 0 ustar root root .source
%p
This is the source material
.new-container
%p
This is the target location v0.12.2~dfsg/doc-src/content/examples/compass/css3/regions/stylesheet.sass 0000644 0000000 0000000 00000000313 11771656742 025435 0 ustar root root @import compass/css3
.source
+flow-into(target)
border: 10px solid green
margin: 20px
width: 200px
.new-container
+flow-from(target)
border: 10px solid red
margin: 20px
width: 200px v0.12.2~dfsg/doc-src/content/examples/compass/css3/font-face/ 0000755 0000000 0000000 00000000000 11771656742 022550 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/font-face/markup.haml 0000644 0000000 0000000 00000000074 11771656742 024713 0 ustar root root .example
%p The Quick Brown Fox jumped over the lazy dog.
v0.12.2~dfsg/doc-src/content/examples/compass/css3/font-face/stylesheet.sass 0000644 0000000 0000000 00000000252 11771656742 025633 0 ustar root root @import compass/css3
+font-face("Blooming Grove", font-files("examples/bgrove.ttf", "examples/bgrove.otf"))
.example
font-family: "Blooming Grove"
font-size: 1.5em
v0.12.2~dfsg/doc-src/content/examples/compass/css3/gradient/ 0000755 0000000 0000000 00000000000 11771656742 022503 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/gradient/markup.haml 0000644 0000000 0000000 00000001567 11771656742 024656 0 ustar root root .ex
.gradient-example
%p
This box has no gradients
.ex
#radial-gradient.gradient-example
%p
This will yield a radial gradient with an apparent specular highlight
.ex
#linear-gradient.gradient-example
%p
This yields a linear gradient spanning from $start to $end coordinates
.ex
#v-gradient.gradient-example
%p
This yields a gradient starting at the top with #fff, ending in #aaa
.ex
#v-gradient-2.gradient-example
%p
Same as above but with a #ccc at the halfway point
.ex
#v-gradient-3.gradient-example
%p
Same as the first example but with #ccc at the
30% from the top, and #bbb at 70% from the top
.ex
#h-gradient.gradient-example
%p
This yields a horizontal linear gradient spanning from left to right.
.ex
#svg-gradient.gradient-example
%p
This gradient has SVG support enabled for opera and IE9.
v0.12.2~dfsg/doc-src/content/examples/compass/css3/gradient/stylesheet.sass 0000644 0000000 0000000 00000002350 11771656742 025567 0 ustar root root @import compass
.ex
width: 48%
margin-right: 2%
float: left
+clearfix
.gradient-example
width: 80px
height: 80px
background: red
float: left
margin: 1em 1em 0 0
// This will yield a radial gradient with an apparent specular highlight
#radial-gradient
+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
+background-image(linear-gradient(left top, #fff, #ddd))
// This yields a gradient starting at the top with #fff, ending in #aaa
#v-gradient
+background-image(linear-gradient(#fff, #aaa))
// Same as above but with a #ccc at the halfway point
#v-gradient-2
+background-image(linear-gradient(#fff, #ccc, #aaa))
// Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top
#v-gradient-3
+background-image(linear-gradient(#fff, #ccc 30%, #bbb 70%, #aaa))
// This yields a horizontal linear gradient spanning from left to right.
#h-gradient
+background-image(linear-gradient(left, #fff, #ddd))
#svg-gradient
$experimental-support-for-svg: true
+background-image(linear-gradient(left, #2ac363, #cd8c14, #9c4cc2))
width: 80px
height: 80px
v0.12.2~dfsg/doc-src/content/examples/compass/css3/transform.haml 0000644 0000000 0000000 00000000260 11771656742 023562 0 ustar root root ---
title: Transform
description: css3 mixin for css transforms
framework: compass
stylesheet: compass/css3/_transform-legacy.scss
example: true
---
= render "partials/example" v0.12.2~dfsg/doc-src/content/examples/compass/css3/box_shadow.haml 0000644 0000000 0000000 00000000247 11771656742 023711 0 ustar root root ---
title: Box-shadow
description: css3 mixin for box-shadow
framework: compass
stylesheet: compass/css3/_box-shadow.scss
example: true
---
= render "partials/example" v0.12.2~dfsg/doc-src/content/examples/compass/css3/background-clip.haml 0000644 0000000 0000000 00000000643 11771656742 024620 0 ustar root root ---
title: Background Clip
description: See background-clip in action.
framework: compass
stylesheet: compass/css3/_background-clip.scss
example: true
---
- render "partials/example" do
%p
In this example, there's a red border with alpha transparency.
The padding box appears pink against the white background of the page.
The border box appears purple because it blends with the blue background instead.
v0.12.2~dfsg/doc-src/content/examples/compass/css3/background-size.haml 0000644 0000000 0000000 00000000267 11771656742 024645 0 ustar root root ---
title: Background Size
description: See background-size in action.
framework: compass
stylesheet: compass/css3/_background-size.scss
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/examples/compass/css3/box.haml 0000644 0000000 0000000 00000000257 11771656742 022345 0 ustar root root ---
title: CSS3 Flexible Box
description: mixins for the CSS3 flexible box
framework: compass
stylesheet: compass/css3/_box.scss
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/examples/compass/css3/background-clip/ 0000755 0000000 0000000 00000000000 11771656742 023752 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/background-clip/markup.haml 0000644 0000000 0000000 00000000105 11771656742 026110 0 ustar root root .example
#padding-box
Padding Box
#border-box
Border Box
v0.12.2~dfsg/doc-src/content/examples/compass/css3/background-clip/stylesheet.sass 0000644 0000000 0000000 00000000533 11771656742 027037 0 ustar root root @import compass/css3.scss
.example
padding: 2em
div
background-color: blue
border: 10px solid rgba(255, 0, 0, 0.5)
color: white
+text-shadow(darken(#00f, 50%) 2px 2px)
padding: 3px
text-align: center
margin-bottom: 2em
#padding-box
+background-clip(padding-box)
#border-box
+background-clip(border-box)
v0.12.2~dfsg/doc-src/content/examples/compass/css3/border_radius/ 0000755 0000000 0000000 00000000000 11771656742 023532 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/border_radius/markup.haml 0000644 0000000 0000000 00000001617 11771656742 025701 0 ustar root root #border-radius.border-radius-example
%p
Box with all corners rounded
#border-radius-top-left.border-radius-example
%p
Box with only top left corner rounded
#border-radius-top-right.border-radius-example
%p
Box with only top right corner rounded
#border-radius-bottom-left.border-radius-example
%p
Box with only bottom left corner rounded
#border-radius-bottom-right.border-radius-example
%p
Box with only bottom right corner rounded
#border-radius-top.border-radius-example
%p
Box with top corners rounded
#border-radius-bottom.border-radius-example
%p
Box with bottom corners rounded
#border-radius-left.border-radius-example
%p
Box with left corners rounded
#border-radius-right.border-radius-example
%p
Box with right corners rounded
#border-radius-combo.border-radius-example
%p
Box with different roundings for top/bottom and left/right
v0.12.2~dfsg/doc-src/content/examples/compass/css3/border_radius/stylesheet.sass 0000644 0000000 0000000 00000001523 11771656742 026617 0 ustar root root @import compass/css3, compass/utilities
#demo
+clearfix
.border-radius-example
width: 125px
height: 125px
background: red
margin: 20px
float: left
padding: 5px
#border-radius
+border-radius(25px)
#border-radius-top-left
+border-top-left-radius(25px)
#border-radius-top-right
+border-top-right-radius(25px)
#border-radius-bottom-left
+border-bottom-left-radius(25px)
#border-radius-bottom-right
+border-bottom-right-radius(25px)
#border-radius-top
+border-top-radius(25px)
#border-radius-bottom
+border-bottom-radius(25px)
#border-radius-left
+border-left-radius(25px)
#border-radius-right
+border-right-radius(25px)
#border-radius-combo
+border-corner-radius(top, left, 40px)
+border-corner-radius(top, right, 5px)
+border-corner-radius(bottom, left, 15px)
+border-corner-radius(bottom, right, 30px) v0.12.2~dfsg/doc-src/content/examples/compass/css3/transform/ 0000755 0000000 0000000 00000000000 11771656742 022721 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/transform/markup.haml 0000644 0000000 0000000 00000000541 11771656742 025063 0 ustar root root %p
this div will change scale on hover
#scale.transform-example
%p
this div will rotate on hover
#rotate.transform-example
%p
this div will translate on hover
#translate.transform-example
%p
this div will skew on hover
#skew.transform-example
%p
this div will change scale, rotate, translate and skew on hover
#combo.transform-example v0.12.2~dfsg/doc-src/content/examples/compass/css3/transform/stylesheet.sass 0000644 0000000 0000000 00000000743 11771656742 026011 0 ustar root root @import compass/css3, compass/css3/transform-legacy
.transform-example
width: 40px
height: 40px
background: red
margin: 20px
#scale
+scale(1)
#scale:hover
+scale(2)
#rotate
+rotate(0deg)
#rotate:hover
+rotate(45deg)
#translate
+translate(0, 0)
#translate:hover
+translate(20px, 20px)
#skew
+skew(0deg, 0deg)
#skew:hover
+skew(20deg, 20deg)
#combo
+transform(1, 0deg, 0, 0, 0deg, 0deg)
#combo:hover
+transform(1, 45deg, 20px, 20px, 20deg, 20deg) v0.12.2~dfsg/doc-src/content/examples/compass/css3/inline_block.haml 0000644 0000000 0000000 00000000255 11771656742 024203 0 ustar root root ---
title: Inline-block
description: css3 mixin for inline-block
framework: compass
stylesheet: compass/css3/_inline-block.scss
example: true
---
= render "partials/example" v0.12.2~dfsg/doc-src/content/examples/compass/css3/background-origin.haml 0000644 0000000 0000000 00000000275 11771656742 025161 0 ustar root root ---
title: Background Origin
description: See background-origin in action.
framework: compass
stylesheet: compass/css3/_background-origin.scss
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/examples/compass/css3/opacity.haml 0000644 0000000 0000000 00000000236 11771656742 023222 0 ustar root root ---
title: Opacity
description: css3 mixin for opacity
framework: compass
stylesheet: compass/css3/_opacity.scss
example: true
---
= render "partials/example" v0.12.2~dfsg/doc-src/content/examples/compass/css3/text_shadow/ 0000755 0000000 0000000 00000000000 11771656742 023237 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/text_shadow/markup.haml 0000644 0000000 0000000 00000000170 11771656742 025377 0 ustar root root %div this text has no shadow
.has-single-shadow this text has a shadow
.has-custom-shadow this text has a custom shadow
v0.12.2~dfsg/doc-src/content/examples/compass/css3/text_shadow/stylesheet.sass 0000644 0000000 0000000 00000000557 11771656742 026332 0 ustar root root $default-text-shadow-color: rgba(red, .6)
$default-text-shadow-blur: 3px
$default-text-shadow-v-offset: 1px
@import compass/css3
// Uses defaults set before the import above
.has-single-shadow
+single-text-shadow
// Can output up to ten text shadows
.has-custom-shadow
+text-shadow(rgba(blue, .2) 1px 1px 0, rgba(blue, .2) 2px 2px 0, rgba(blue, .2) 3px 3px 0)
v0.12.2~dfsg/doc-src/content/examples/compass/css3/box/ 0000755 0000000 0000000 00000000000 11771656742 021476 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/box/markup.haml 0000644 0000000 0000000 00000000077 11771656742 023644 0 ustar root root .example
.content Some great content
.sidebar A sidebar
v0.12.2~dfsg/doc-src/content/examples/compass/css3/box/stylesheet.sass 0000644 0000000 0000000 00000000506 11771656742 024563 0 ustar root root @import compass/css3
.example
+display-box
+box-orient(horizontal)
+box-align(stretch)
+box-direction(reverse)
height: 200px
width: 100%
.content, .sidebar
padding: 20px
.content
+box-flex(4)
background-color: #C5C1B4
.sidebar
+box-flex(1)
background-color: #375F99
margin-right: 1px v0.12.2~dfsg/doc-src/content/examples/compass/css3/opacity/ 0000755 0000000 0000000 00000000000 11771656742 022356 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/opacity/markup.haml 0000644 0000000 0000000 00000000211 11771656742 024512 0 ustar root root #opacity-10.opacity-example
#opacity-20.opacity-example
#opacity-50.opacity-example
#opaque.opacity-example
#transparent.opacity-example
v0.12.2~dfsg/doc-src/content/examples/compass/css3/opacity/stylesheet.sass 0000644 0000000 0000000 00000000352 11771656742 025442 0 ustar root root @import compass/css3
.opacity-example
background: red
width: 40px
height: 40px
float: left
#opacity-10
+opacity(0.1)
#opacity-20
+opacity(0.2)
#opacity-50
+opacity(0.5)
#opaque
+opaque
#transparent
+transparent v0.12.2~dfsg/doc-src/content/examples/compass/css3/font-face.haml 0000644 0000000 0000000 00000000274 11771656742 023416 0 ustar root root ---
title: Compass Font Face Example
description: How to use the @font-face mixin
framework: compass
stylesheet: compass/css3/_font-face.scss
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/examples/compass/css3/background-origin/ 0000755 0000000 0000000 00000000000 11771656742 024312 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/background-origin/markup.haml 0000644 0000000 0000000 00000000143 11771656742 026452 0 ustar root root .example
#padding-box
Padding Box
#border-box
Border Box
#content-box
Content Box v0.12.2~dfsg/doc-src/content/examples/compass/css3/background-origin/stylesheet.sass 0000644 0000000 0000000 00000000752 11771656742 027402 0 ustar root root @import compass/css3
.example
padding: 2em
div
background:
image: image-url("examples/css3/bg-origin/bg.png")
repeat: repeat
position: top left
border: 10px solid rgba(255, 0, 0, 0.5)
color: white
+text-shadow(darken(#00f, 50%) 2px 2px)
padding: 1em
text-align: center
margin-bottom: 2em
#padding-box
+background-origin(padding-box)
#border-box
+background-origin(border-box)
#content-box
+background-origin(content-box)
v0.12.2~dfsg/doc-src/content/examples/compass/css3/background-size/ 0000755 0000000 0000000 00000000000 11771656742 023775 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/css3/background-size/markup.haml 0000644 0000000 0000000 00000000350 11771656742 026135 0 ustar root root .example
#auto
%code background-size: auto
#contain
%code background-size: contain
#cover
%code background-size: cover
#percent
%code background-size: 50% 50%
#absolute
%code background-size: 100px 25px v0.12.2~dfsg/doc-src/content/examples/compass/css3/background-size/stylesheet.sass 0000644 0000000 0000000 00000001024 11771656742 027056 0 ustar root root @import compass/css3
.example
padding: 2em
div
background:
image: image-url("examples/css3/bg-origin/bg.png")
repeat: no-repeat
position: top left
border: 10px solid rgba(255, 0, 0, 0.5)
color: black
+text-shadow(#fff 1px 1px 4px)
padding: 1em
text-align: center
margin-bottom: 2em
#auto
+background-size(auto)
#contain
+background-size(contain)
#cover
+background-size(cover)
#percent
+background-size(50% 50%)
#absolute
+background-size(100px 25px)
v0.12.2~dfsg/doc-src/content/examples/compass/css3/text_shadow.haml 0000644 0000000 0000000 00000000252 11771656742 024101 0 ustar root root ---
title: Text-shadow
description: css3 mixin for text-shadow
framework: compass
stylesheet: compass/css3/_text-shadow.scss
example: true
---
= render "partials/example" v0.12.2~dfsg/doc-src/content/examples/compass/css3/regions.haml 0000644 0000000 0000000 00000000246 11771656742 023221 0 ustar root root ---
title: CSS Regions
description: css3 mixin for css regions
framework: compass
stylesheet: compass/css3/_regions.scss
example: true
---
= render "partials/example" v0.12.2~dfsg/doc-src/content/examples/compass/helpers/ 0000755 0000000 0000000 00000000000 11771656742 021475 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/helpers/enumerate.haml 0000644 0000000 0000000 00000000241 11771656742 024322 0 ustar root root ---
title: "Compass Helper: enumerate"
description: How to use the enumerate() helper function.
framework: compass
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/examples/compass/helpers/elements-of-type.haml 0000644 0000000 0000000 00000000257 11771656742 025541 0 ustar root root ---
title: "Compass Helper: elements-of-type"
description: How to use the elements-of-type() helper function.
framework: compass
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/examples/compass/helpers/elements-of-type/ 0000755 0000000 0000000 00000000000 11771656742 024672 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/helpers/elements-of-type/markup.haml 0000644 0000000 0000000 00000000250 11771656742 027031 0 ustar root root .example
%div
This is a block element.
It has an
%span inline span
and an
%em inline em
and a
%blockquote
Nested blockquote element
v0.12.2~dfsg/doc-src/content/examples/compass/helpers/elements-of-type/stylesheet.sass 0000644 0000000 0000000 00000000205 11771656742 027753 0 ustar root root .example
#{elements-of-type(block)}
border: 1px solid #777
margin: 1em 3em
#{elements-of-type(inline)}
color: #c00
v0.12.2~dfsg/doc-src/content/examples/compass/helpers/using-extend-in-place-of-enumerate/ 0000755 0000000 0000000 00000000000 11771656742 030162 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/helpers/using-extend-in-place-of-enumerate/markup.haml0000644 0000000 0000000 00000000155 11771656742 032325 0 ustar root root .example
.class-1 .class-1
.class-2 .class-2
.class-3 .class-3
.class-4 .class-4
.class-5 .class-5
././@LongLink 0000000 0000000 0000000 00000000151 00000000000 011562 L ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/helpers/using-extend-in-place-of-enumerate/stylesheet.sass v0.12.2~dfsg/doc-src/content/examples/compass/helpers/using-extend-in-place-of-enumerate/stylesheet.0000644 0000000 0000000 00000000305 11771656742 032352 0 ustar root root .example
.base-class
background-color: #aaa
border: 2px solid #777
margin: 1em
@for $i from 2 through 4
.class-#{$i}
@extend .base-class
margin-left: 1em * ($i - 1)
v0.12.2~dfsg/doc-src/content/examples/compass/helpers/using-extend-in-place-of-enumerate.haml 0000644 0000000 0000000 00000000277 11771656742 031033 0 ustar root root ---
title: "Using @extend in place of the enumerate() helper."
description: Using @extend in place of the enumerate() helper.
framework: compass
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/examples/compass/helpers/enumerate/ 0000755 0000000 0000000 00000000000 11771656742 023462 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/helpers/enumerate/markup.haml 0000644 0000000 0000000 00000000154 11771656742 025624 0 ustar root root .example
.class-1 .class-1
.class-2 .class-2
.class-3 .class-3
.class-4 .class-4
.class-5 .class-5 v0.12.2~dfsg/doc-src/content/examples/compass/helpers/enumerate/stylesheet.sass 0000644 0000000 0000000 00000000273 11771656742 026550 0 ustar root root .example
#{enumerate(".class", 2, 4)}
background-color: #aaa
border: 2px solid #777
margin: 1em
@for $i from 2 through 4
.class-#{$i}
margin-left: 1em * ($i - 1) v0.12.2~dfsg/doc-src/content/examples/compass/utilities/ 0000755 0000000 0000000 00000000000 11771656742 022046 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/utilities/contrast/ 0000755 0000000 0000000 00000000000 11771656742 023703 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/utilities/contrast/markup.haml 0000644 0000000 0000000 00000000270 11771656742 026044 0 ustar root root .example
%p.dark This is a paragraph with a dark background and light text.
%p.light This is a paragraph with a light background and dark text.
v0.12.2~dfsg/doc-src/content/examples/compass/utilities/contrast/stylesheet.sass 0000644 0000000 0000000 00000000277 11771656742 026775 0 ustar root root $contrasted-dark-default: #333
$contrasted-light-default: #e7e7e7
@import "compass/utilities/color/contrast"
.example
p.dark
+contrasted(#5F1210)
p.light
+contrasted(#C82523)
v0.12.2~dfsg/doc-src/content/examples/compass/utilities/contrast.haml 0000644 0000000 0000000 00000000276 11771656742 024553 0 ustar root root ---
title: Compass Contrast Color Example
description: Make text readable
framework: compass
stylesheet: compass/utilities/color/_contrast.scss
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/examples/compass/layout/ 0000755 0000000 0000000 00000000000 11771656742 021350 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/layout/stretching/ 0000755 0000000 0000000 00000000000 11771656742 023522 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/layout/stretching/markup.haml 0000644 0000000 0000000 00000001054 11771656742 025664 0 ustar root root .example
%ul
%li.stretch-container
#stretch-full
This element is fully stretched.
%li.stretch-container
#stretch-offset
This element is stretched with a 1em offset on each side.
%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.
v0.12.2~dfsg/doc-src/content/examples/compass/layout/stretching/stylesheet.sass 0000644 0000000 0000000 00000001201 11771656742 026600 0 ustar root root @import "compass/layout/stretching"
@import "compass/utilities"
@import "compass/css3"
.stretch-container
border: 1px solid #999
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: 0.5em
#stretch-full
@extend .stretched
+stretch
#stretch-offset
@extend .stretched
+stretch(1em, 1em, 1em, 1em)
#stretch-x
@extend .stretched
+stretch-x
#stretch-y
@extend .stretched
+stretch-y
v0.12.2~dfsg/doc-src/content/examples/compass/layout/sticky-footer/ 0000755 0000000 0000000 00000000000 11771656742 024152 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/layout/sticky-footer/markup.haml 0000644 0000000 0000000 00000000572 11771656742 026320 0 ustar root root .example
#layout
#header
%h1 Sticky Footer Example
%p
This is the main content area.
%p
In this example you should pretend that the red box
is actually the browser window.
%p
Because, being a contrived example, it's not actually sticking
to the bottom of the page.
#layout_footer
#footer
This is the footer area.
v0.12.2~dfsg/doc-src/content/examples/compass/layout/sticky-footer/stylesheet.sass 0000644 0000000 0000000 00000000413 11771656742 027234 0 ustar root root @import compass/reset.scss
@import compass/layout.scss
+sticky-footer(72px, "#layout", "#layout_footer", "#footer")
#header
:background #999
:height 72px
#footer
:background #ccc
.example
height: 500px
border: 3px solid red
p
margin: 1em 0.5em
v0.12.2~dfsg/doc-src/content/examples/compass/layout/stretching.haml 0000644 0000000 0000000 00000000311 11771656742 024360 0 ustar root root ---
title: Compass Stretch Layout Example
description: How to do stretch out your elements.
framework: compass
stylesheet: compass/layout/_stretching.scss
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/examples/compass/layout/sticky-footer.haml 0000644 0000000 0000000 00000000312 11771656742 025011 0 ustar root root ---
title: Compass Sticky Footer Example
description: How to use the sticky footer mixin.
framework: compass
stylesheet: compass/layout/_sticky-footer.scss
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/examples/compass/tables/ 0000755 0000000 0000000 00000000000 11771656742 021305 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/tables/all.haml 0000644 0000000 0000000 00000000267 11771656742 022725 0 ustar root root ---
title: Compass Table Example
description: How to use the table mixins.
framework: compass
stylesheet: compass/utilities/_tables.scss
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/examples/compass/tables/all/ 0000755 0000000 0000000 00000000000 11771656742 022055 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/tables/all/markup.haml 0000644 0000000 0000000 00000001230 11771656742 024213 0 ustar root root .example
%table{:cellspacing => "0"}
%thead
%tr.odd
%th Title
%th One
%th Two
%th Three
%th Four
%th Row Total
%tbody
%tr.even
%th Single
%td.numeric 1.0
%td.numeric 2.0
%td.numeric 3.0
%td.numeric 4.0
%td.numeric 10.0
%tr.odd
%th Tens
%td.numeric 10.0
%td.numeric 20.0
%td.numeric 30.0
%td.numeric 40.0
%td.numeric 100.0
%tfoot
%tr.even
%th Total
%td.numeric 11.0
%td.numeric 22.0
%td.numeric 33.0
%td.numeric 44.0
%td.numeric 110.0
v0.12.2~dfsg/doc-src/content/examples/compass/tables/all/stylesheet.sass 0000644 0000000 0000000 00000000426 11771656742 025143 0 ustar root root @import "compass/utilities/tables"
.example
table
$table-color : #7a98c6
+table-scaffolding
+inner-table-borders(1px, darken($table-color, 40%))
+outer-table-borders(2px)
+alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222)
v0.12.2~dfsg/doc-src/content/examples/compass/tables/scaffolding/ 0000755 0000000 0000000 00000000000 11771656742 023564 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/tables/scaffolding/markup.haml 0000644 0000000 0000000 00000001230 11771656742 025722 0 ustar root root .example
%table{:cellspacing => "0"}
%thead
%tr.odd
%th Title
%th One
%th Two
%th Three
%th Four
%th Row Total
%tbody
%tr.even
%th Single
%td.numeric 1.0
%td.numeric 2.0
%td.numeric 3.0
%td.numeric 4.0
%td.numeric 10.0
%tr.odd
%th Tens
%td.numeric 10.0
%td.numeric 20.0
%td.numeric 30.0
%td.numeric 40.0
%td.numeric 100.0
%tfoot
%tr.even
%th Total
%td.numeric 11.0
%td.numeric 22.0
%td.numeric 33.0
%td.numeric 44.0
%td.numeric 110.0
v0.12.2~dfsg/doc-src/content/examples/compass/tables/scaffolding/stylesheet.sass 0000644 0000000 0000000 00000000127 11771656742 026650 0 ustar root root @import "compass/utilities/tables/scaffolding"
.example
table
+table-scaffolding
v0.12.2~dfsg/doc-src/content/examples/compass/tables/borders.haml 0000644 0000000 0000000 00000000316 11771656742 023610 0 ustar root root ---
title: Compass Table Borders Example
description: How to use the table border mixins.
framework: compass
stylesheet: compass/utilities/tables/_borders.scss
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/examples/compass/tables/scaffolding.haml 0000644 0000000 0000000 00000000333 11771656742 024426 0 ustar root root ---
title: Compass Table Scaffolding Example
description: How to use the table scaffolding mixins.
framework: compass
stylesheet: compass/utilities/tables/_scaffolding.scss
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/examples/compass/tables/borders/ 0000755 0000000 0000000 00000000000 11771656742 022745 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/tables/borders/markup.haml 0000644 0000000 0000000 00000001230 11771656742 025103 0 ustar root root .example
%table{:cellspacing => "0"}
%thead
%tr.odd
%th Title
%th One
%th Two
%th Three
%th Four
%th Row Total
%tbody
%tr.even
%th Single
%td.numeric 1.0
%td.numeric 2.0
%td.numeric 3.0
%td.numeric 4.0
%td.numeric 10.0
%tr.odd
%th Tens
%td.numeric 10.0
%td.numeric 20.0
%td.numeric 30.0
%td.numeric 40.0
%td.numeric 100.0
%tfoot
%tr.even
%th Total
%td.numeric 11.0
%td.numeric 22.0
%td.numeric 33.0
%td.numeric 44.0
%td.numeric 110.0
v0.12.2~dfsg/doc-src/content/examples/compass/tables/borders/stylesheet.sass 0000644 0000000 0000000 00000000201 11771656742 026022 0 ustar root root @import "compass/utilities/tables/borders"
.example
table
+inner-table-borders(1px, #7a98c6)
+outer-table-borders(2px)
v0.12.2~dfsg/doc-src/content/examples/compass/tables/striping.haml 0000644 0000000 0000000 00000000363 11771656742 024011 0 ustar root root ---
title: Compass Table Striping Example
description: How to use the alternating-rows-and-columns mixin.
framework: compass
stylesheet: compass/utilities/tables/_alternating-rows-and-columns.scss
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/examples/compass/tables/striping/ 0000755 0000000 0000000 00000000000 11771656742 023144 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/compass/tables/striping/markup.haml 0000644 0000000 0000000 00000001230 11771656742 025302 0 ustar root root .example
%table{:cellspacing => "0"}
%thead
%tr.odd
%th Title
%th One
%th Two
%th Three
%th Four
%th Row Total
%tbody
%tr.even
%th Single
%td.numeric 1.0
%td.numeric 2.0
%td.numeric 3.0
%td.numeric 4.0
%td.numeric 10.0
%tr.odd
%th Tens
%td.numeric 10.0
%td.numeric 20.0
%td.numeric 30.0
%td.numeric 40.0
%td.numeric 100.0
%tfoot
%tr.even
%th Total
%td.numeric 11.0
%td.numeric 22.0
%td.numeric 33.0
%td.numeric 44.0
%td.numeric 110.0
v0.12.2~dfsg/doc-src/content/examples/compass/tables/striping/stylesheet.sass 0000644 0000000 0000000 00000000305 11771656742 026226 0 ustar root root @import "compass/utilities/tables/alternating-rows-and-columns"
.example
table
$table-color : #7a98c6
+alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222)
v0.12.2~dfsg/doc-src/content/examples/blueprint/ 0000755 0000000 0000000 00000000000 11771656742 020372 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/blueprint/grid/ 0000755 0000000 0000000 00000000000 11771656742 021317 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/blueprint/grid/two_cols/ 0000755 0000000 0000000 00000000000 11771656742 023150 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/blueprint/grid/two_cols/markup.haml 0000644 0000000 0000000 00000000574 11771656742 025320 0 ustar root root .two-col
#header
%h1 This is the Header
#sidebar
%ul
%li
%a(href="#") Nav #1
%li
%a(href="#") Nav #2
%li
%a(href="#") Nav #3
#content
%p
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et
dolore magna aliqua.
#footer
This is the footer.
v0.12.2~dfsg/doc-src/content/examples/blueprint/grid/two_cols/stylesheet.sass 0000644 0000000 0000000 00000000334 11771656742 026234 0 ustar root root $blueprint_grid_columns : 8
$blueprint_grid_width : 40px
@import blueprint
.two-col
+container
background-color: #ccc
#header, #footer
+column(8)
#sidebar
+column(3)
#content
+column(5, true)
v0.12.2~dfsg/doc-src/content/examples/blueprint/grid/two_cols.haml 0000644 0000000 0000000 00000000252 11771656742 024012 0 ustar root root ---
title: Two Column Layout
description: A semantic two-column layout
framework: blueprint
stylesheet: blueprint/_grid.scss
example: true
---
= render "partials/example" v0.12.2~dfsg/doc-src/content/examples/blueprint/grid/pull/ 0000755 0000000 0000000 00000000000 11771656742 022273 5 ustar root root v0.12.2~dfsg/doc-src/content/examples/blueprint/grid/pull/markup.haml 0000644 0000000 0000000 00000000115 11771656742 024432 0 ustar root root .container
#one
One One One
#two
Two Two Two
v0.12.2~dfsg/doc-src/content/examples/blueprint/grid/pull/stylesheet.sass 0000644 0000000 0000000 00000000273 11771656742 025361 0 ustar root root $blueprint_grid_columns : 3
@import blueprint/grid.scss
#one
+column(2, true)
+prepend(1)
background-color: #11770E
#two
+column(1)
+pull(3, true)
background-color: #242677
v0.12.2~dfsg/doc-src/content/examples/blueprint/grid/pull.haml 0000644 0000000 0000000 00000000322 11771656742 023133 0 ustar root root ---
title: Blueprint Pull Example
description: Uses pull to change the display order of columns.
framework: blueprint
stylesheet: blueprint/_grid.scss
mixin: pull
example: true
---
= render "partials/example"
v0.12.2~dfsg/doc-src/content/reference.haml 0000644 0000000 0000000 00000000102 11771656742 017342 0 ustar root root ---
title: Compass Documentation
redirect: /reference/compass/
--- v0.12.2~dfsg/doc-src/content/index/ 0000755 0000000 0000000 00000000000 11771656742 015657 5 ustar root root v0.12.2~dfsg/doc-src/content/index/functions.haml 0000644 0000000 0000000 00000002043 11771656742 020531 0 ustar root root ---
title: Compass Documentation | All Functions
crumb: Docs
body_id: home
---
%article
%h1#logo Sass Based Functions
- all_functions.sorted_and_grouped_by_name{|f| f.last.name }.each do |(group, functions)|
%h3= group
%ul
- functions.each do |(i, f)|
%li
%a{:href=>"#{i.path}#function-#{f.name}"}= f.sass_signature(:html)
- sass_function_list = []
%h1#logo All Ruby Based Functions
%h3 Compass Functions
%ul
- Sass::Script::Functions.public_instance_methods.sort_by{|m| m.to_s}.each do |m|
- name = m.to_s.gsub("_","-")
- unless name =~ /^\-compass/ # Private Fuctions!
- if i = item_for_function_name(name)
%li
%a{:href=>"#{i.path}##{name}"}= name
- elsif sass_functions().include? m
- sass_function_list << '%s ' % [m.to_s, name]
- else
%li
= name
%h3 Sass Functions
%ul
- sass_function_list.each do |m|
%li= m v0.12.2~dfsg/doc-src/content/index/mixins.haml 0000644 0000000 0000000 00000000534 11771656742 020033 0 ustar root root ---
title: Compass Documentation | All Mixins
crumb: Docs
body_id: home
---
%article
%h1#logo Compass Mixins
- all_mixins.sorted_and_grouped_by_name{|m| m.last.name }.each do |(group, mixins)|
%h3= group
%ul
- mixins.each do |(i, m)|
%li
%a{:href=>"#{i.path}#mixin-#{m.name}"}= m.sass_signature(:none, :html)
v0.12.2~dfsg/doc-src/content/index/variables.haml 0000644 0000000 0000000 00000000533 11771656742 020473 0 ustar root root ---
title: Compass Documentation | All Variables
crumb: Docs
body_id: home
---
%article
%h1#logo Compass Variables
- all_constants.sorted_and_grouped_by_name{|v| v.last.name }.each do |(group, variables)|
%h3= group
%ul
- variables.each do |(i, v)|
%li
%a{:href=>"#{i.path}#const-#{v.name}"}= "$" + v.name
v0.12.2~dfsg/doc-src/tasks/ 0000755 0000000 0000000 00000000000 11771656742 014223 5 ustar root root v0.12.2~dfsg/doc-src/tasks/generators.thor 0000644 0000000 0000000 00000010274 11771656742 017276 0 ustar root root $: << File.join(File.dirname(__FILE__), '..', '..', 'lib')
require 'fileutils'
require 'compass'
class Generate < Thor
desc "example IDENTIFIER [../frameworks/fmwk/stylesheets/path/to/_module.sass]", "Generate a new example."
method_options :title => :string, :framework => :string, :stylesheet => :string, :mixin => :string
def example(identifier, stylesheet = nil)
identifier = identifier.dup
identifier << "/" unless identifier[identifier.length - 1] == ?/
identifier = identifier[1..-1] if identifier[0] == ?/
stylesheet = stylesheet && dereference(stylesheet) || {}
options = @options.merge(stylesheet)
puts "Generating /examples/#{identifier}"
puts "DIRECTORY content/examples/#{identifier}"
FileUtils.mkdir_p("content/examples/#{identifier}")
puts " CREATE content/examples/#{identifier[0..-2]}.haml"
open("content/examples/#{identifier[0..-2]}.haml", "w") do |example_file|
mixin = "mixin: #{options[:mixin]}\n" if options[:mixin]
example_contents = <<-EXAMPLE
| ---
| title: #{options[:framework].capitalize} #{options[:mixin].capitalize if options[:mixin]} Example
| description: How to do X with Y
| framework: #{options[:framework]}
| stylesheet: #{options[:stylesheet]}
| #{mixin}example: true
| ---
| = render "partials/example"
EXAMPLE
example_file.puts example_contents.gsub(/^ +\| /, '')
end
puts " CREATE content/examples/#{identifier[0..-2]}/markup.haml"
open("content/examples/#{identifier[0..-2]}/markup.haml", "w") do |example_file|
example_contents = <<-EXAMPLE
| .example
| %h1.markup In Haml
| %p This file gets included into the example.
| %p And the source is shown to the user as HTML.
EXAMPLE
example_file.puts example_contents.gsub(/^ +\| /, '')
end
puts " CREATE content/examples/#{identifier[0..-2]}/stylesheet.sass"
open("content/examples/#{identifier[0..-2]}/stylesheet.sass", "w") do |example_file|
example_contents = <<-EXAMPLE
| .example
| h1.markup
| /* This file is used to style the example markup. */
| p
| /* And the source is shown to the user as Sass and as CSS. */
EXAMPLE
example_file.puts example_contents.gsub(/^ +\| /, '')
puts "bundle exec nanoc3 co && open http://localhost:3000/docs/examples/#{identifier} && bundle exec nanoc3 aco"
end
end
desc "reference ../frameworks/fmwk/stylesheets/path/to/_module.sass", "Generate a reference page for the given stylesheet."
method_options :title => :string
def reference(stylesheet)
stylesheet = dereference(stylesheet)
identifier = "reference/#{stylesheet[:framework]}/#{stylesheet[:stylesheet]}"
identifier.gsub!(%r{/_},'/')
identifier.gsub!(/\.s[ac]ss/,'')
identifier.gsub!(%r{/#{stylesheet[:framework]}/#{stylesheet[:framework]}/},"/#{stylesheet[:framework]}/")
module_name = File.basename(identifier).gsub(/\.[^.]+$/,'').capitalize
framework_name = stylesheet[:framework].capitalize
title = @options[:title] || "#{framework_name} #{module_name}"
crumb = @options[:title] || module_name
file_name = "content/#{identifier}.haml"
directory = File.dirname(file_name)
puts "DIRECTORY #{directory}"
FileUtils.mkdir_p directory
puts " CREATE #{file_name}"
open(file_name, "w") do |reference_file|
contents = <<-CONTENTS
| ---
| title: #{title}
| crumb: #{crumb}
| framework: #{stylesheet[:framework]}
| stylesheet: #{stylesheet[:stylesheet]}
| classnames:
| - reference
| ---
| - render 'reference' do
| %p
| Lorem ipsum dolor sit amet.
CONTENTS
reference_file.puts contents.gsub(/^ +\| /, '')
puts " ITEM /#{identifier}/"
end
end
private
def dereference(stylesheet)
stylesheet = File.expand_path(stylesheet)
framework = Compass::Frameworks::ALL.find{|f| stylesheet.index(f.stylesheets_directory) == 0}
raise "No Framework found for #{stylesheet}" unless framework
{
:framework => framework.name,
:stylesheet => stylesheet[framework.stylesheets_directory.length+1..-1]
}
end
end
v0.12.2~dfsg/doc-src/assets/ 0000755 0000000 0000000 00000000000 11771656742 014400 5 ustar root root v0.12.2~dfsg/doc-src/assets/images/ 0000755 0000000 0000000 00000000000 11771656742 015645 5 ustar root root v0.12.2~dfsg/doc-src/assets/images/bg-light.jpg 0000644 0000000 0000000 00000021352 11771656742 020047 0 ustar root root JFIF C
C "
} !1AQa"q2#BR$3br
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz
w !1AQaq"2B #3Rbr
$4%&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz ? fͫM v [P' 1~I>o (e_ݡ F/Ϲoݧ s j776ߓ( uj>s*g"֣y?n {.67ȍ Ljb i 7l*i>3j {y 7ޡ ~
>@3%2F }6w 5?v &o