Compare commits
No commits in common. "image-properties-from-filesystem-like-objects" and "stable" have entirely different histories.
image-prop
...
stable
1
.gitignore
vendored
1
.gitignore
vendored
@ -29,4 +29,3 @@ devbin
|
||||
vendor/ruby
|
||||
vendor
|
||||
Gemfile.lock
|
||||
*.pkg
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
rvm:
|
||||
- 1.8.7
|
||||
- 1.9.2
|
||||
- 1.9.3
|
||||
- jruby
|
||||
- rbx
|
||||
- ree
|
||||
|
||||
32
Gemfile
32
Gemfile
@ -2,30 +2,28 @@ source :rubygems
|
||||
|
||||
gemspec
|
||||
|
||||
unless ENV['PKG']
|
||||
gem "cucumber", "~> 1.1.4"
|
||||
gem "cucumber", "~> 0.9.2"
|
||||
gem "rspec", "~>2.0.0"
|
||||
gem "rails", "~> 3.1"
|
||||
gem "rails", "~>3.0.0.rc"
|
||||
gem "compass-validator", "3.0.1"
|
||||
gem "css_parser", "~> 1.0.1"
|
||||
gem "sass", "~> 3.2.0.alpha.93"
|
||||
gem "sass", "~>3.1"
|
||||
gem "haml", "~> 3.1"
|
||||
gem "rcov", :platform => :mri
|
||||
gem "rubyzip"
|
||||
gem "livereload"
|
||||
gem "ruby-prof", :platform => :mri
|
||||
|
||||
gem 'autotest'
|
||||
gem 'autotest-fsevent' if RUBY_PLATFORM =~ /darwin/
|
||||
gem 'fakefs', :git => 'git://github.com/johnbintz/fakefs.git'
|
||||
gem 'mocha'
|
||||
gem 'timecop'
|
||||
gem 'diff-lcs', '~> 1.1.2'
|
||||
gem 'rake', '~> 0.9.2'
|
||||
|
||||
# Warning becarful adding OS dependant gems above this line it will break the CI server please
|
||||
# place them below so they are excluded
|
||||
gem 'rake', '0.8.7'
|
||||
|
||||
unless ENV["CI"]
|
||||
gem 'rb-fsevent'
|
||||
gem 'ruby_gntp'
|
||||
gem "ruby-prof", :platform => :mri_18
|
||||
gem "rcov", :platform => :mri_18
|
||||
gem 'guard'
|
||||
gem 'guard-test'
|
||||
gem 'guard-cucumber'
|
||||
gem 'packager'
|
||||
end
|
||||
group :mac do
|
||||
gem "rb-fsevent"
|
||||
end
|
||||
|
||||
|
||||
16
Guardfile
16
Guardfile
@ -1,16 +0,0 @@
|
||||
group :tests do
|
||||
guard :test do
|
||||
watch(%r{^lib/(.+)\.rb$}) { |m| "test/#{m[1]}_test.rb" }
|
||||
watch(%r{^test/.+_test\.rb$})
|
||||
watch(%r{^test/units/.+_test\.rb$})
|
||||
watch('test/test_helper.rb') { "test" }
|
||||
end
|
||||
end
|
||||
|
||||
group :features do
|
||||
guard :cucumber do
|
||||
watch(%r{^features/.+\.feature$})
|
||||
watch(%r{^features/support/.+$}) { 'features' }
|
||||
watch(%r{^features/step_definitions/(.+)_steps\.rb$}) { |m| Dir[File.join("**/#{m[1]}.feature")][0] || 'features' }
|
||||
end
|
||||
end
|
||||
@ -1,29 +1,56 @@
|
||||
# Compass Stylesheet Authoring Framework
|
||||
# Compass
|
||||
A [Sass][sass]-based CSS Meta-Framework that allows you to mix and match any of the following CSS frameworks:
|
||||
|
||||
Build Status: 
|
||||
- [Compass Core][compass_core_website] - [Wiki Documentation][compass_core_wiki]
|
||||
- [Blueprint][blueprint_website] - [Wiki Documentation][bleuprint_wiki]
|
||||
- [960][ninesixty_website] - [Wiki Documentation][ninesixty_wiki]
|
||||
- [Susy][susy_website] - [Wiki Documentation][susy_wiki]
|
||||
- [YUI][yui_website] - [Wiki Documentation][yui_wiki]
|
||||
- New frameworks and extensions are [tracked on the wiki][plugins_wiki] as they are created.
|
||||
- Other frameworks can be added relatively easily. Create your own!
|
||||
|
||||
## Resources
|
||||
## Compass Provides
|
||||
|
||||
* [Compass Homepage](http://compass-style.org/)
|
||||
* [Installing Compass](http://compass-style.org/install/)
|
||||
* [Compass Reference](http://compass-style.org/install/reference/)
|
||||
1. A [command line tool][command_line_wiki] for managing your Sass projects.
|
||||
2. Simple integration with [Ruby-on-Rails][ruby_on_rails_wiki], [Merb][merb_wiki], [StaticMatic][static_matic_wiki], and even [non-ruby application servers][command_line_wiki].
|
||||
3. Loads of Sass mixins to make building your website a snap.
|
||||
|
||||
## Quick Start
|
||||
|
||||
$ (sudo) gem install compass
|
||||
$ compass create my_compass_project --using blueprint
|
||||
$ cd my_compass_project
|
||||
$ compass watch
|
||||
|
||||
## More Information
|
||||
Please see the [wiki][wiki]
|
||||
|
||||
## Author
|
||||
Compass is written by [Chris Eppstein][chris_eppstein].<br>
|
||||
Chris is the Software Architect of [Caring.com][caring.com] and a member of the [Sass][sass] core team.
|
||||
|
||||
## Core Team Members
|
||||
|
||||
* [Scott Davis](https://github.com/scottdavis)
|
||||
* [Eric Meyer](https://github.com/ericam)
|
||||
* [Brandon Mathis](https://github.com/imathis)
|
||||
* [Anthony Short](https://github.com/anthonyshort/)
|
||||
|
||||
## Major Contributors
|
||||
|
||||
* [Nico Hagenburger](https://github.com/hagenburger)
|
||||
|
||||
## License
|
||||
Copyright (c) 2008-2009 Christopher M. Eppstein<br>
|
||||
All Rights Reserved.<br>
|
||||
Released under a [slightly modified MIT License][license].
|
||||
|
||||
[sass]: http://sass-lang.com/ "Syntactically Awesome StyleSheets"
|
||||
[compass_core_website]: http://github.com/chriseppstein/compass/tree/master/frameworks/compass
|
||||
[compass_core_wiki]: http://github.com/chriseppstein/compass/wikis/compass-core-documentation
|
||||
[blueprint_website]: http://blueprintcss.org/
|
||||
[bleuprint_wiki]: http://github.com/chriseppstein/compass/wikis/blueprint-documentation
|
||||
[yui_website]: http://developer.yahoo.com/yui/grids/
|
||||
[yui_wiki]: http://github.com/chriseppstein/compass/wikis/yui-documentation
|
||||
[plugins_wiki]: http://github.com/chriseppstein/compass/wikis/compass-plugins
|
||||
[ninesixty_website]: http://960.gs/
|
||||
[ninesixty_wiki]: http://github.com/chriseppstein/compass/wikis/960gs-documentation
|
||||
[command_line_wiki]: http://wiki.github.com/chriseppstein/compass/command-line-tool
|
||||
[wiki]: http://github.com/chriseppstein/compass/wikis/home
|
||||
[ruby_on_rails_wiki]: http://wiki.github.com/chriseppstein/compass/ruby-on-rails-integration
|
||||
[merb_wiki]: http://wiki.github.com/chriseppstein/compass/merb-integration
|
||||
[static_matic_wiki]: http://wiki.github.com/chriseppstein/compass/staticmatic-integration
|
||||
[chris_eppstein]: http://chriseppstein.github.com
|
||||
[caring.com]: http://www.caring.com/ "Senior Care Resources"
|
||||
[license]: http://github.com/chriseppstein/compass/tree/master/LICENSE.markdown
|
||||
[susy_website]: http://www.oddbird.net/susy/
|
||||
[susy_wiki]: http://github.com/chriseppstein/compass/wikis/susy-documentation
|
||||
46
Rakefile
46
Rakefile
@ -1,16 +1,6 @@
|
||||
require 'rubygems'
|
||||
if ENV["PKG"]
|
||||
$: << File.expand_path(File.dirname(__FILE__))+"/lib"
|
||||
else
|
||||
require 'bundler'
|
||||
Bundler.setup
|
||||
end
|
||||
|
||||
begin
|
||||
require 'rake/dsl_definition'
|
||||
rescue LoadError
|
||||
#pass
|
||||
end
|
||||
require 'bundler'
|
||||
Bundler.setup
|
||||
require 'compass'
|
||||
|
||||
# ----- Default: Testing ------
|
||||
@ -19,17 +9,12 @@ task :default => [:test, :features]
|
||||
|
||||
require 'rake/testtask'
|
||||
require 'fileutils'
|
||||
|
||||
begin
|
||||
require 'cucumber'
|
||||
require 'cucumber/rake/task'
|
||||
|
||||
Cucumber::Rake::Task.new(:features) do |t|
|
||||
t.cucumber_opts = "features --format progress"
|
||||
end
|
||||
rescue LoadError
|
||||
$stderr.puts "cannot load cucumber"
|
||||
end
|
||||
|
||||
Rake::TestTask.new :test do |t|
|
||||
t.libs << 'lib'
|
||||
@ -44,16 +29,6 @@ To run with an alternate version of Rails, make test/rails a symlink to that ver
|
||||
To run with an alternate version of Haml & Sass, make test/haml a symlink to that version.
|
||||
END
|
||||
|
||||
Rake::TestTask.new :units do |t|
|
||||
t.libs << 'lib'
|
||||
t.libs << 'test'
|
||||
test_files = FileList['test/units/**/*_test.rb']
|
||||
test_files.exclude('test/rails/*', 'test/haml/*')
|
||||
t.test_files = test_files
|
||||
t.verbose = true
|
||||
end
|
||||
|
||||
|
||||
desc "Compile Examples into HTML and CSS"
|
||||
task :examples do
|
||||
linked_haml = "tests/haml"
|
||||
@ -138,20 +113,3 @@ rescue LoadError => e
|
||||
puts "WARNING: #{e}"
|
||||
end
|
||||
|
||||
begin
|
||||
require 'packager/rake_task'
|
||||
require 'compass/version'
|
||||
# Building a package:
|
||||
# 1. Get packager installed and make sure your system is setup correctly according to their docs.
|
||||
# 2. Make sure you are actually using a universal binary that has been nametooled.
|
||||
# 3. PKG=1 OFFICIAL=1 rake packager:pkg
|
||||
Packager::RakeTask.new(:pkg) do |t|
|
||||
t.package_name = "Compass"
|
||||
t.version = Compass::VERSION
|
||||
t.domain = "compass-style.org"
|
||||
t.bin_files = ["compass"]
|
||||
t.resource_files = FileList["frameworks/**/*"] + ["VERSION.yml", "LICENSE.markdown"]
|
||||
end
|
||||
rescue LoadError => e
|
||||
puts "WARNING: #{e}"
|
||||
end
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
:major: 0
|
||||
:minor: 13
|
||||
:state: alpha
|
||||
:build: 0
|
||||
:name: Markab
|
||||
:minor: 11
|
||||
:patch: 5
|
||||
:name: Antares
|
||||
|
||||
5
autotest/discover.rb
Normal file
5
autotest/discover.rb
Normal file
@ -0,0 +1,5 @@
|
||||
Autotest.add_discovery { 'rspec2' }
|
||||
|
||||
|
||||
|
||||
|
||||
@ -21,10 +21,6 @@ fallback_load_path(File.join(File.dirname(__FILE__), '..', 'lib')) do
|
||||
require 'compass/exec'
|
||||
end
|
||||
|
||||
if defined?(Bundler)
|
||||
Bundler.require :assets
|
||||
end
|
||||
|
||||
runner = Proc.new do
|
||||
Compass::Exec::SubCommandUI.new(ARGV).run!
|
||||
end
|
||||
@ -40,5 +36,5 @@ if ARGV.delete("--profile")
|
||||
printer.print(STDERR, 0)
|
||||
exit exit_code
|
||||
else
|
||||
exit runner.call || 1
|
||||
exit runner.call
|
||||
end
|
||||
|
||||
@ -3,11 +3,10 @@ require File.join(path, 'compass/version')
|
||||
|
||||
Gem::Specification.new do |gemspec|
|
||||
gemspec.name = "compass"
|
||||
gemspec.date = Date.today
|
||||
gemspec.version = Compass::VERSION # Update VERSION.yml file to set this.
|
||||
gemspec.version = Compass::VERSION # Update the VERSION.yml file to set this.
|
||||
gemspec.description = "Compass is a Sass-based Stylesheet Framework that streamlines the creation and maintainance of CSS."
|
||||
gemspec.homepage = "http://compass-style.org"
|
||||
gemspec.authors = ["Chris Eppstein", "Scott Davis", "Eric A. Meyer", "Brandon Mathis", "Anthony Short", "Nico Hagenburger"]
|
||||
gemspec.authors = ["Chris Eppstein", "Eric A. Meyer", "Brandon Mathis", "Nico Hagenburger", "Scott Davis"]
|
||||
gemspec.email = "chris@eppsteins.net"
|
||||
#gemspec.default_executable = "compass" #deprecated
|
||||
gemspec.executables = %w(compass)
|
||||
@ -16,7 +15,7 @@ Gem::Specification.new do |gemspec|
|
||||
gemspec.rubygems_version = "1.3.5"
|
||||
gemspec.summary = %q{A Real Stylesheet Framework}
|
||||
|
||||
gemspec.add_dependency 'sass', '~> 3.2.0.alpha.93'
|
||||
gemspec.add_dependency 'sass', '~> 3.1'
|
||||
gemspec.add_dependency 'chunky_png', '~> 1.2'
|
||||
gemspec.add_dependency 'fssm', '>= 0.2.7'
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Require any additional compass plugins here.
|
||||
require 'susy'
|
||||
require 'css-slideshow'
|
||||
require 'compass-theme'
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
project_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
source :gemcutter
|
||||
|
||||
gem 'nanoc', "3.2.4"
|
||||
gem 'nanoc3', "3.2.4"
|
||||
gem 'asdf'
|
||||
gem 'nanoc3', :git => "git://github.com/chriseppstein/nanoc.git"
|
||||
gem 'rdiscount'
|
||||
gem 'thor'
|
||||
gem 'rack'
|
||||
@ -10,13 +8,12 @@ gem 'mime-types'
|
||||
gem 'serve', "1.0.0"
|
||||
gem 'nokogiri'
|
||||
gem 'coderay'
|
||||
gem 'haml'
|
||||
gem 'sass', ">= 3.1"
|
||||
gem 'haml', ">= 3.1"
|
||||
gem 'rake'
|
||||
gem 'activesupport', '~> 3.0.10', :require => 'active_support/inflector'
|
||||
gem 'compass', :path => ".."
|
||||
gem 'compass-theme', :git => 'git://github.com/Compass/compass-theme.git'
|
||||
# gem 'compass-susy-plugin', ">=0.7.0.pre8"
|
||||
# gem 'css-slideshow', "0.2.0"
|
||||
gem 'compass-susy-plugin', ">=0.7.0.pre8"
|
||||
gem 'css-slideshow', "0.2.0"
|
||||
gem 'json'
|
||||
gem 'css_parser', "1.0.1"
|
||||
gem 'ruby-prof'
|
||||
|
||||
@ -1,80 +1,71 @@
|
||||
GIT
|
||||
remote: git://github.com/Compass/compass-theme.git
|
||||
revision: e870bc7c1d9124636280b974ccfc395eed097411
|
||||
remote: git://github.com/chriseppstein/nanoc.git
|
||||
revision: 4eee0e60c5121b90498caa88605d416521553378
|
||||
specs:
|
||||
compass-theme (0.0.2)
|
||||
compass (~> 0.11)
|
||||
compass-susy-plugin (~> 0.7.0)
|
||||
css-slideshow (= 0.2.0)
|
||||
nanoc3 (3.2.0a3)
|
||||
cri (>= 1.0.0)
|
||||
|
||||
PATH
|
||||
remote: ..
|
||||
specs:
|
||||
compass (0.13.alpha.0.0c13d98)
|
||||
chunky_png (~> 1.2)
|
||||
compass (0.11.1.93b89a2)
|
||||
chunky_png (~> 1.1)
|
||||
fssm (>= 0.2.7)
|
||||
sass (~> 3.2.0.alpha.93)
|
||||
sass (~> 3.1)
|
||||
|
||||
GEM
|
||||
remote: http://rubygems.org/
|
||||
specs:
|
||||
activesupport (3.0.12)
|
||||
asdf (0.5.0)
|
||||
rack (~> 1.2.1)
|
||||
builder (3.0.0)
|
||||
chunky_png (1.2.5)
|
||||
coderay (1.0.5)
|
||||
compass-susy-plugin (0.7.0)
|
||||
compass (>= 0.10.0)
|
||||
cri (2.2.1)
|
||||
activesupport (3.0.7)
|
||||
builder (2.1.2)
|
||||
chunky_png (1.2.0)
|
||||
coderay (0.9.7)
|
||||
compass-susy-plugin (0.9.beta.3)
|
||||
compass (>= 0.11.beta.3)
|
||||
cri (1.0.1)
|
||||
css-slideshow (0.2.0)
|
||||
compass (>= 0.10.0.rc3)
|
||||
css_parser (1.0.1)
|
||||
fssm (0.2.8.1)
|
||||
haml (3.1.4)
|
||||
fssm (0.2.7)
|
||||
haml (3.1.0)
|
||||
i18n (0.4.2)
|
||||
json (1.6.5)
|
||||
mime-types (1.17.2)
|
||||
nanoc (3.2.4)
|
||||
nanoc3 (>= 3.2.4)
|
||||
nanoc3 (3.2.4)
|
||||
cri (~> 2.0)
|
||||
nokogiri (1.5.2)
|
||||
rack (1.2.5)
|
||||
rake (0.9.2.2)
|
||||
rb-fsevent (0.9.0)
|
||||
json (1.5.1)
|
||||
mime-types (1.16)
|
||||
nokogiri (1.4.4)
|
||||
rack (1.2.2)
|
||||
rake (0.8.7)
|
||||
rb-fsevent (0.4.0)
|
||||
rdiscount (1.6.8)
|
||||
ruby-prof (0.10.8)
|
||||
sass (3.2.0.alpha.101)
|
||||
ruby-prof (0.9.2)
|
||||
sass (3.1.0)
|
||||
serve (1.0.0)
|
||||
activesupport (~> 3.0.1)
|
||||
i18n (~> 0.4.1)
|
||||
rack (~> 1.2.1)
|
||||
tzinfo (~> 0.3.23)
|
||||
thor (0.14.6)
|
||||
tzinfo (0.3.32)
|
||||
tzinfo (0.3.26)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
activesupport (~> 3.0.10)
|
||||
asdf
|
||||
builder
|
||||
coderay
|
||||
compass!
|
||||
compass-theme!
|
||||
compass-susy-plugin (>= 0.7.0.pre8)
|
||||
css-slideshow (= 0.2.0)
|
||||
css_parser (= 1.0.1)
|
||||
haml
|
||||
haml (>= 3.1)
|
||||
json
|
||||
mime-types
|
||||
nanoc (= 3.2.4)
|
||||
nanoc3 (= 3.2.4)
|
||||
nanoc3!
|
||||
nokogiri
|
||||
rack
|
||||
rake
|
||||
rb-fsevent
|
||||
rdiscount
|
||||
ruby-prof
|
||||
sass (>= 3.1)
|
||||
serve (= 1.0.0)
|
||||
thor
|
||||
|
||||
@ -63,7 +63,6 @@ end
|
||||
|
||||
compile '*' do
|
||||
if item[:extension] == "markdown"
|
||||
filter :erb
|
||||
filter :rdiscount
|
||||
elsif item[:extension] == "haml"
|
||||
filter :haml, :ugly => true
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
@ -4,38 +4,15 @@ function showInstallCommand() {
|
||||
var notes = [];
|
||||
var project_name = "<myproject>";
|
||||
var can_be_bare = true;
|
||||
var in_working_dir = false;
|
||||
var use_bundler = false;
|
||||
if ($("#app-type").val() != "rails") {
|
||||
commands.push("$ gem install compass");
|
||||
}
|
||||
if (cmd == "init") {
|
||||
commands.push("$ cd " + project_name);
|
||||
in_working_dir = true
|
||||
project_name = ".";
|
||||
$(".creating").hide();
|
||||
} else {
|
||||
$(".creating").show();
|
||||
if ($("#project_name").val() != "")
|
||||
project_name = $("#project_name").val();
|
||||
}
|
||||
if ($("#app-type").val() == "rails") {
|
||||
notes.push("<p class='note warning'>Rails 2.3 and 3.0 users require additional installation steps. For full rails installation and upgrade instructions please refer to the compass-rails <a href='https://github.com/Compass/compass-rails/blob/master/README.md'>README</a>.</p>");
|
||||
use_bundler = true;
|
||||
}
|
||||
if ($("#app-type").val() == "rails") {
|
||||
if (cmd == "create") {
|
||||
commands.push("$ rails new " + project_name);
|
||||
commands.push("$ cd " + project_name);
|
||||
in_working_dir = true
|
||||
project_name = ".";
|
||||
}
|
||||
commands.push("> Edit Gemfile and add this:");
|
||||
commands.push(" group :assets do");
|
||||
commands.push(" gem 'compass-rails'");
|
||||
commands.push(" # Add any compass extensions here");
|
||||
commands.push(" end");
|
||||
commands.push("$ bundle");
|
||||
cmd = "init rails";
|
||||
can_be_bare = false;
|
||||
} else if ($("#app-type").val() == "other") {
|
||||
@ -51,12 +28,9 @@ function showInstallCommand() {
|
||||
var framework = $("#framework").val();
|
||||
var create_command;
|
||||
if (cmd == "install") {
|
||||
create_command = "$ compass install " + framework;
|
||||
create_command = "$ compass install " + framework + " " + project_name;
|
||||
} else {
|
||||
create_command = "$ compass " + cmd;
|
||||
}
|
||||
if (!in_working_dir) {
|
||||
create_command = create_command + " " + project_name;
|
||||
create_command = "$ compass " + cmd + " " + project_name;
|
||||
}
|
||||
if (framework != "compass" && framework != "bare" && cmd != "install") {
|
||||
create_command = create_command + " --using " + framework;
|
||||
@ -72,20 +46,14 @@ function showInstallCommand() {
|
||||
}
|
||||
if ($("#options").val() == "customized") {
|
||||
$("#directories").show();
|
||||
if ($("#sassdir").val() != "")
|
||||
create_command += " --sass-dir \"" + $("#sassdir").val() + "\"";
|
||||
if ($("#cssdir").val() != "")
|
||||
create_command += " --css-dir \"" + $("#cssdir").val() + "\"";
|
||||
if ($("#jsdir").val() != "")
|
||||
create_command += " --javascripts-dir \"" + $("#jsdir").val() + "\"";
|
||||
if ($("#imagesdir").val() != "")
|
||||
create_command += " --images-dir \"" + $("#imagesdir").val() + "\"";
|
||||
create_command = create_command +
|
||||
" --sass-dir \"" + $("#sassdir").val() + "\"" +
|
||||
" --css-dir \"" + $("#cssdir").val() + "\"" +
|
||||
" --javascripts-dir \"" + $("#jsdir").val() + "\"" +
|
||||
" --images-dir \"" + $("#imagesdir").val() + "\"";
|
||||
} else {
|
||||
$("#directories").hide();
|
||||
}
|
||||
if (use_bundler) {
|
||||
create_command = "$ bundle exec " + create_command.replace(/\$ /,'');
|
||||
}
|
||||
commands.push(create_command);
|
||||
var instructions = "<pre><code>" + commands.join("\n") + "</code></pre>";
|
||||
if (instructions.match(/</)) {
|
||||
|
||||
@ -14,147 +14,10 @@ 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.13.alpha.0 (UNRELEASED)
|
||||
-------------------------
|
||||
|
||||
* Allow numeric sprite names when not using sprite selector generation capability.
|
||||
* Add new mixin for styling [input
|
||||
placeholders](/reference/compass/css3/user_interface/#mixin-input-placeholder).
|
||||
* Add [css animations module](/reference/compass/css3/animation/).
|
||||
* When `$relative-font-sizing` is true, vertical-rhythm font sizes are declared in relative units throughout the document, including `establish-baseline`. This ensures that user defaults set in the browser are respected.
|
||||
|
||||
0.12.2 (UNRELEASED)
|
||||
0.11.6 (UNRELEASED)
|
||||
-------------------
|
||||
|
||||
* [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
|
||||
`<html>` element instead of the `<body>` 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/)
|
||||
* [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.
|
||||
|
||||
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 `$<map>-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.
|
||||
* 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`.
|
||||
|
||||
0.11.5 (07/10/2011)
|
||||
-------------------
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import compass/css3
|
||||
|
||||
+font-face("Blooming Grove", font-files("examples/bgrove.ttf", "examples/bgrove.otf"))
|
||||
+font-face("Blooming Grove", font-files("examples/bgrove.ttf", truetype, "examples/bgrove.otf", opentype))
|
||||
|
||||
.example
|
||||
font-family: "Blooming Grove"
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
---
|
||||
title: Input Placeholder
|
||||
description: css3 mixin to style input placeholders
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_user-interface.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
@ -1,3 +0,0 @@
|
||||
%form{:action => "", :method => "get"}
|
||||
%label{:for => "input"} Input
|
||||
%input{:type => "text", :name => "input", :placeholder => "Type something…"}
|
||||
@ -1,6 +0,0 @@
|
||||
@import compass/css3/user-interface
|
||||
|
||||
input[type="text"]
|
||||
+input-placeholder
|
||||
color: #bfbfbf
|
||||
font-style: italic
|
||||
@ -1,8 +0,0 @@
|
||||
---
|
||||
title: CSS Regions
|
||||
description: css3 mixin for css regions
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_regions.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
@ -1,7 +0,0 @@
|
||||
.source
|
||||
%p
|
||||
This is the source material
|
||||
|
||||
.new-container
|
||||
%p
|
||||
This is the target location
|
||||
@ -1,13 +0,0 @@
|
||||
@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
|
||||
@ -39,7 +39,7 @@ crumb: Plugins and frameworks
|
||||
%a
|
||||
http://compass-style.org
|
||||
%td
|
||||
You are currently viewing the Compass docs.
|
||||
You are currently vising the Compass docs.
|
||||
%tr
|
||||
%td Blueprint
|
||||
%td 0.8.0
|
||||
|
||||
@ -19,7 +19,7 @@ layout: default
|
||||
|
||||
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/).
|
||||
3. [**Contribute to Sass Recipies**](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
|
||||
|
||||
@ -45,8 +45,9 @@ Then you can include this file in all other stylesheets:
|
||||
// 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
|
||||
in base.scss first, before @import-ing the framework files. See [Overriding
|
||||
Constants][3] , for an example of where the number of grid columns for blueprint
|
||||
is overridden/set to 32. 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
|
||||
@ -107,8 +108,8 @@ 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
|
||||
[1]: http://sass-lang.com/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/
|
||||
[3]: http://wiki.github.com/chriseppstein/compass/overriding-constants
|
||||
[4]: http://c2.com/cgi/wiki?DontRepeatYourself
|
||||
[5]: http://chriseppstein.github.com/blog/2009/09/20/why-stylesheet-abstraction-matters/
|
||||
|
||||
@ -143,7 +143,7 @@ later on.
|
||||
<td style="vertical-align:top;"><code>sass_dir</code> </td>
|
||||
<td style="vertical-align:top;">String </td>
|
||||
<td style="vertical-align:top;">The directory where the sass stylesheets are kept.
|
||||
It is relative to the <code>project_path</code>. Defaults to <code>"sass"</code>.
|
||||
It is relative to the <code>project_path</code>. Defaults to <code>"src"</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -170,33 +170,11 @@ later on.
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>http_images_path</code> </td>
|
||||
<td style="vertical-align:top;">String</td>
|
||||
<td style="vertical-align:top;">String </td>
|
||||
<td style="vertical-align:top;">The full http path to images on the web server.
|
||||
Defaults to <code>http_path + "/" + images_dir</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>generated_images_dir</code> </td>
|
||||
<td style="vertical-align:top;">String</td>
|
||||
<td style="vertical-align:top;">The directory where generated images are kept.
|
||||
It is relative to the <code>project_path</code>.
|
||||
Defaults to the value of <code>images_dir</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>generated_images_path</code> </td>
|
||||
<td style="vertical-align:top;">String</td>
|
||||
<td style="vertical-align:top;">The full path to where generated images are kept.
|
||||
Defaults to the value of <code><project_path>/<generated_images_dir></code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>http_generated_images_path</code> </td>
|
||||
<td style="vertical-align:top;">String</td>
|
||||
<td style="vertical-align:top;">The full http path to generated images on
|
||||
the web server. Defaults to <code>http_path + "/" + generated_images_dir</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>javascripts_dir</code> </td>
|
||||
<td style="vertical-align:top;">String </td>
|
||||
@ -255,7 +233,7 @@ later on.
|
||||
<td style="vertical-align:top;">Hash </td>
|
||||
<td style="vertical-align:top;">These options are passed directly to the
|
||||
Sass compiler. For more details on the format of sass options, please read the
|
||||
<a href="http://sass-lang.com/docs/yardoc/SASS_REFERENCE.md.html#options">sass options documentation</a>.
|
||||
<a href="http://sass-lang.com/yardoc/SASS_REFERENCE.md.html#options">sass options documentation</a>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -309,13 +287,6 @@ later on.
|
||||
Defaults to <code>{:compression => Zlib::BEST_COMPRESSION}</code>. See the chunky_png <a href='https://github.com/wvanbergen/chunky_png/wiki/Constraints' _target='blank'>wiki</a> for more information
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>sprite_load_path</code></td>
|
||||
<td style="vertical-align:top;">Array </td>
|
||||
<td style="vertical-align:top;">
|
||||
Defaults to <code> [images_path] </code>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<a name="configuration-functions"></a>
|
||||
@ -412,7 +383,7 @@ to avoid crashing the watcher in the case where the file has been removed.
|
||||
|
||||
on_stylesheet_saved do |filename|
|
||||
Growl.notify {
|
||||
self.message = "#{File.basename(filename)} updated!"
|
||||
self.message "#{File.basename(filename)} updated!"
|
||||
self.icon = '/path/to/success.jpg'
|
||||
}
|
||||
end
|
||||
|
||||
@ -10,10 +10,10 @@ 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.
|
||||
seems harder than it aught 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.
|
||||
if you do not wish to abide by this rool.
|
||||
|
||||
**Step 1**: If you do not have a github account, create one.
|
||||
|
||||
@ -89,12 +89,12 @@ If the tests fail, fix the tests or the stylesheets accordingly. If the tests, d
|
||||
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).
|
||||
You're done. Please [submit your changes](#patches)
|
||||
|
||||
<h2 id="stylesheet-changes">Making Stylesheet Changes</h2>
|
||||
|
||||
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
|
||||
before building something. Please don't by 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.
|
||||
@ -112,7 +112,7 @@ making extensions.][extensions]
|
||||
**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).
|
||||
You're done. Please [submit your changes](#patches)
|
||||
|
||||
<h2 id="ruby-changes">Making Ruby Changes</h2>
|
||||
|
||||
@ -202,7 +202,7 @@ will result:
|
||||
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.
|
||||
demonstrate how to use Sass to it's 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
|
||||
@ -278,28 +278,15 @@ Getting recent changes from the main repo:
|
||||
|
||||
<h3 id="running-tests">Running Tests</h3>
|
||||
|
||||
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:
|
||||
1. Install development dependencies:
|
||||
|
||||
bundle install --binstubs devbin
|
||||
|
||||
4. Running core library and stylesheet tests:
|
||||
2. Running core library and stylesheet tests:
|
||||
|
||||
bundle exec rake test features
|
||||
rake run_tests
|
||||
|
||||
5. Running behavior tests
|
||||
3. Running behavior tests
|
||||
|
||||
./devbin/cucumber
|
||||
|
||||
|
||||
@ -1,71 +0,0 @@
|
||||
---
|
||||
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;
|
||||
}
|
||||
@ -125,7 +125,7 @@ should attempt to adhere to unless there's a good reason not to do so.
|
||||
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.
|
||||
files for your libaries in some configurations.
|
||||
4. Provide a project template. If you do not, your project should only be
|
||||
providing widgets or page designs, etc.
|
||||
|
||||
@ -174,13 +174,10 @@ You may also see some real manifest files here:
|
||||
|
||||
### 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
|
||||
|
||||
@ -9,13 +9,6 @@ classnames:
|
||||
|
||||
## 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
|
||||
@ -23,26 +16,26 @@ Also checkout this [gist](https://gist.github.com/1184843)
|
||||
|
||||
## Sinatra
|
||||
|
||||
require 'compass'
|
||||
require 'sinatra'
|
||||
require 'haml'
|
||||
require 'sass'
|
||||
require 'compass'
|
||||
|
||||
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'))
|
||||
Compass.configuration do |config|
|
||||
config.project_path = File.dirname(__FILE__)
|
||||
config.sass_dir = 'views'
|
||||
end
|
||||
|
||||
get '/stylesheets/:name.css' do
|
||||
set :haml, { :format => :html5 }
|
||||
set :sass, Compass.sass_engine_options
|
||||
end
|
||||
|
||||
get '/screen.css' do
|
||||
content_type 'text/css', :charset => 'utf-8'
|
||||
scss(:"stylesheets/#{params[:name]}" )
|
||||
sass :screen
|
||||
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!
|
||||
|
||||
@ -62,31 +55,29 @@ 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
|
||||
Compass.add_project_configuration 'compass/config.rb' # when using Compass 0.10
|
||||
Compass.configuration.parse 'compass/config.rb' # when using Compass < 0.10
|
||||
|
||||
Your Compass configuration file (in compass/config.rb) could look like this (you may need to change the path to some directories depending on your directory structure):
|
||||
|
||||
http_path = "/"
|
||||
project_path = 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"
|
||||
project_path = "."
|
||||
css_dir = "output/assets/style"
|
||||
sass_dir = "content/assets/style"
|
||||
images_dir = "output/assets/images"
|
||||
|
||||
# when using SCSS:
|
||||
sass_options = {
|
||||
:syntax => :scss
|
||||
}
|
||||
|
||||
|
||||
To filter the stylesheets using Sass and Compass, call the sass filter with Sass engine options taken from Compass, like this:
|
||||
|
||||
compile '/stylesheets/*' do
|
||||
filter :sass, sass_options.merge(:syntax => item[:extension].to_sym)
|
||||
end
|
||||
filter :sass, Compass.sass_engine_options
|
||||
|
||||
|
||||
### Nanoc Projects using the formal approach
|
||||
|
||||
* [This Site](https://github.com/chriseppstein/compass/tree/master/doc-src)
|
||||
* [nanoc Bootstrap](http://github.com/adamstac/nanoc-bootstrap) - a base nanoc project with support for Haml, Sass, Compass, jQuery and more.
|
||||
* [nanoc & Compass Example Project](http://github.com/ddfreyne/nanoc-bootstrap-compass)
|
||||
@ -5,138 +5,91 @@ 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`
|
||||
* `images/icon/new.png`
|
||||
* `images/icon/edit.png`
|
||||
* `images/icon/save.png`
|
||||
* `images/icon/delete.png`
|
||||
|
||||
Each is an icon that is 32px square.
|
||||
<a name="basic-usage"></a>
|
||||
|
||||
## 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;
|
||||
@import "icon/*.png";
|
||||
@include all-icon-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; }
|
||||
.icon-sprite,
|
||||
.icon-delete,
|
||||
.icon-edit,
|
||||
.icon-new,
|
||||
.icon-save { background: url('/images/icon-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; }
|
||||
.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 `my-icons-XXX` classes to your markup as needed.
|
||||
You can now apply the `icon-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
|
||||
[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.
|
||||
|
||||
<a name='nested-folders' id='nested-folders'></a>
|
||||
## 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-sprite;
|
||||
|
||||
<a name="selector-control" id="selector-control"></a>
|
||||
<a name="selector-control"></a>
|
||||
## 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
|
||||
this is done by using the magic `icon-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";
|
||||
@import "icon/*.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); }
|
||||
.new { @include icon-sprite(new); }
|
||||
.edit { @include icon-sprite(edit); }
|
||||
.save { @include icon-sprite(save); }
|
||||
.delete { @include icon-sprite(delete); }
|
||||
}
|
||||
|
||||
And your stylesheet will compile to:
|
||||
|
||||
.my-icons-sprite,
|
||||
.icon-sprite,
|
||||
.actions .new,
|
||||
.actions .edit,
|
||||
.actions .save,
|
||||
.actions .delete { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
|
||||
.actions .delete { background: url('/images/icon-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; }
|
||||
|
||||
<a name="sass_functions" id="sass_functions"></a>
|
||||
## 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 `<map>-sprite-height` and `<map>-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;
|
||||
}
|
||||
|
||||
|
||||
<a name="magic-imports" id="magic-imports"></a>
|
||||
<a name="magic-imports"></a>
|
||||
## 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"
|
||||
compass sprite "images/icon/*.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.
|
||||
@ -148,7 +101,103 @@ might want to avoid it. For instance, if your sprite map has more than about 20
|
||||
sprites, you may find that hand crafting the import will speed up compilation times. See
|
||||
the section on [performance considerations](#performance) for more details.
|
||||
|
||||
<a name="performance" id="performance"></a>
|
||||
<a name="magic-selectors"></a>
|
||||
## Magic Selectors
|
||||
|
||||
If you want to add selectors for your sprites, it's easy todo by adding `_active` `_target` or `_hover` to the file name, In the example below we have a sprite directory that looks like:
|
||||
|
||||
* `selectors/ten-by-ten.png`
|
||||
* `selectors/ten-by-ten_hover.png`
|
||||
* `selectors/ten-by-ten_active.png`
|
||||
* `selectors/ten-by-ten_target.png`
|
||||
|
||||
Now in our sass file we add:
|
||||
|
||||
@import "selectors/*.png";
|
||||
|
||||
a {
|
||||
@include selectors-sprite(ten-by-ten)
|
||||
}
|
||||
|
||||
And your stylesheet will compile to:
|
||||
|
||||
.selectors-sprite, a {
|
||||
background: url('/selectors-sedfef809e2.png') no-repeat;
|
||||
}
|
||||
|
||||
a {
|
||||
background-position: 0 0;
|
||||
}
|
||||
a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover {
|
||||
background-position: 0 -20px;
|
||||
}
|
||||
a:target, a.ten-by-ten_target, a.ten-by-ten-target {
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
a:active, a.ten-by-ten_active, a.ten-by-ten-active {
|
||||
background-position: 0 -10px;
|
||||
}
|
||||
|
||||
Alternatively you can use the `@include all-selectors-sprites;` after the import and get the following output:
|
||||
|
||||
.selectors-sprite, .selectors-ten-by-ten {
|
||||
background: url('/selectors-sedfef809e2.png') no-repeat;
|
||||
}
|
||||
|
||||
.selectors-ten-by-ten {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover {
|
||||
background-position: 0 -20px;
|
||||
}
|
||||
.selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target {
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
.selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active {
|
||||
background-position: 0 -10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
<a name="customization-options"></a>
|
||||
## Customization Options
|
||||
|
||||
### 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`.
|
||||
|
||||
* `$<map>-spacing` -- The amount of transparent space, in pixels, around each sprite.
|
||||
Defaults to `0px`. E.g. `$icon-spacing: 20px`.
|
||||
* `$<map>-repeat` -- Wether or not each sprite should repeat along the x axis. Defaults
|
||||
to `no-repeat`. E.g. `$icon-repeat: repeat-x`.
|
||||
* `$<map>-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%`.
|
||||
* `$<map>-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`.
|
||||
* `$<map>-sprite-base-class` -- The base class for these sprites. Defaults to `.<map>-sprite`.
|
||||
E.g. `$icon-sprite-base-class: ".action-icon"`
|
||||
* `$<map>-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:
|
||||
|
||||
* `$<map>-<sprite>-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`.
|
||||
* `$<map>-<sprite>-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`.
|
||||
* `$<map>-<sprite>-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%`.
|
||||
|
||||
<a name="performance"></a>
|
||||
## Performance Considerations
|
||||
|
||||
Reading PNG files and assembling new images and saving them to disk might have a non-trivial
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
---
|
||||
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`.
|
||||
|
||||
* `$<map>-spacing` -- The amount of transparent space, in pixels, around each sprite.
|
||||
Defaults to `0px`. E.g. `$icon-spacing: 20px`.
|
||||
* `$<map>-repeat` -- Wether or not each sprite should repeat along the x axis. Defaults
|
||||
to `no-repeat`. E.g. `$icon-repeat: repeat-x`.
|
||||
* `$<map>-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%`.
|
||||
* `$<map>-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`.
|
||||
* `$<map>-sprite-base-class` -- The base class for these sprites. Defaults to `.<map>-sprite`.
|
||||
E.g. `$icon-sprite-base-class: ".action-icon"`
|
||||
* `$<map>-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:
|
||||
|
||||
* `$<map>-<sprite>-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`.
|
||||
* `$<map>-<sprite>-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`.
|
||||
* `$<map>-<sprite>-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%`.
|
||||
@ -1,73 +0,0 @@
|
||||
---
|
||||
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)
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
---
|
||||
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
|
||||
@ -1,24 +0,0 @@
|
||||
---
|
||||
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
|
||||
@ -7,23 +7,21 @@ layout: homepage
|
||||
%h1#logo Compass
|
||||
%h2 <strong>Compass</strong> is an open-source <em>CSS Authoring Framework</em>.
|
||||
.overview
|
||||
.info-box.compass
|
||||
.compass
|
||||
%h4 Why designers love Compass.
|
||||
%ol
|
||||
%li Experience cleaner markup without presentational classes.
|
||||
%li It’s chock full of the web’s best <a href="/reference/compass/">reusable patterns</a>.
|
||||
%li It makes creating <a href="/help/tutorials/spriting/">sprites</a> a breeze.
|
||||
%li Compass mixins make <a href="/reference/compass/css3/">CSS3</a> easy.
|
||||
%li Create beautiful <a href="/reference/compass/typography/vertical_rhythm/">typographic rhythms</a>.
|
||||
%li It’s chock full of the web’s best reusable patterns.
|
||||
%li Developing a personal framework is simple.
|
||||
%li Compass mixins make CSS3 easy.
|
||||
%li Download and create extensions with ease.
|
||||
.info-box.sass
|
||||
.sass
|
||||
%h4 Compass uses Sass.
|
||||
%p
|
||||
<a href="http://sass-lang.com/">Sass</a> 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 <em>wildly talented</em> folks:
|
||||
%ul#featured_sites
|
||||
%li
|
||||
@ -91,7 +89,7 @@ layout: homepage
|
||||
%img(src="/images/compass.app.png")
|
||||
%p
|
||||
Buy <a href="http://compass.handlino.com/">Compass.app</a>
|
||||
for Windows and Mac for just $10.
|
||||
for Windows and Mac for just $7.
|
||||
%p.note
|
||||
Note: Compass.app is a product of Handlino, Inc but
|
||||
30% of all proceeds go to Compass's charity of choice: <a href="http://umdf.org/compass">UMDF.org</a>.
|
||||
|
||||
@ -13,22 +13,12 @@ body_id: home
|
||||
%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|
|
||||
%li
|
||||
- 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 << '<a href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#%s-instance_method">%s</a>' % [m.to_s, name]
|
||||
- else
|
||||
%li
|
||||
= name
|
||||
%h3 Sass Functions
|
||||
%ul
|
||||
- sass_function_list.each do |m|
|
||||
%li= m
|
||||
@ -30,9 +30,6 @@ body_id: install
|
||||
%option{:value => "rails"} rails
|
||||
%option{:value => "other"} other
|
||||
project
|
||||
%span.creating
|
||||
named
|
||||
%input#project_name(placeholder="<myproject>")
|
||||
with
|
||||
%select#framework
|
||||
%option{:value => "compass"} compass's
|
||||
@ -51,14 +48,14 @@ body_id: install
|
||||
%option{:value => "customized"} customize my project's
|
||||
directory structure<span id="directories" style="display:none;">
|
||||
using
|
||||
%input#sassdir(placeholder="sass")
|
||||
%input#sassdir(value="sass")
|
||||
for the sass source directory,
|
||||
%input#cssdir(placeholder="css")
|
||||
%input#cssdir(value="css")
|
||||
for the css output directory,
|
||||
%input#jsdir(placeholder="javascripts")
|
||||
%input#jsdir(value="javascripts")
|
||||
for the javascripts directory,
|
||||
and
|
||||
%input#imagesdir(placeholder="images")
|
||||
%input#imagesdir(value="images")
|
||||
for the images directory</span></span>.
|
||||
|
||||
%h4 Thanks. Now run the following steps in your terminal:
|
||||
@ -71,12 +68,7 @@ body_id: install
|
||||
%p.note Note: <code>$</code> is a placeholder for your terminal's prompt. You don't type it.
|
||||
%h4 Then follow the instructions that compass provides in the output.
|
||||
|
||||
%h2 Hate the Command Line?
|
||||
|
||||
%p Try one of these Community supported GUI applications:
|
||||
%ul
|
||||
%li <a href="http://compass.handlino.com/">Compass.app</a> from <a href="http://handlino.com/">Handlino</a>.
|
||||
%li <a href="http://mhs.github.com/scout-app/">Scout</a> from <a href="http://mutuallyhuman.com/">Mutually Human</a>.
|
||||
%h4 Or you can buy a <a href="http://compass.handlino.com/">GUI for Compass</a> from Handlino.
|
||||
|
||||
%h2 Next Steps
|
||||
%ul
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
---
|
||||
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.
|
||||
@ -1,49 +0,0 @@
|
||||
---
|
||||
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
|
||||
`$<spritename>-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/
|
||||
@ -1,25 +0,0 @@
|
||||
---
|
||||
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/)
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
---
|
||||
title: Compass Animation
|
||||
crumb: Animation
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_animation.scss
|
||||
meta_description: Specify the CSS3 animation property and all its sub-properties.
|
||||
layout: core
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- css3
|
||||
---
|
||||
- render 'reference' do
|
||||
:markdown
|
||||
Provides a mixin for `animation` and all its sub-properties.
|
||||
See the CSS3 specification: [animation](http://www.w3.org/TR/css3-animations/).
|
||||
@ -5,6 +5,7 @@ framework: compass
|
||||
stylesheet: compass/css3/_box-shadow.scss
|
||||
meta_description: Specify the box shadow for all browsers.
|
||||
layout: core
|
||||
beta: true
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
|
||||
19
doc-src/content/reference/compass/css3/gradient.haml
Normal file
19
doc-src/content/reference/compass/css3/gradient.haml
Normal file
@ -0,0 +1,19 @@
|
||||
---
|
||||
title: Compass Gradient
|
||||
crumb: Gradient
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_gradient.scss
|
||||
deprecated: true
|
||||
meta_description: Specify linear gradients and radial gradients for all browsers.
|
||||
layout: core
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- css3
|
||||
---
|
||||
- render 'reference' do
|
||||
:markdown
|
||||
**<span class="warning">IMPORTANT:</span>** This module has been deprecated. See the new
|
||||
[images module](../images/) for the new, more flexible approach to gradients.
|
||||
|
||||
Provides mixins to create cross-browser CSS3 gradients.
|
||||
@ -5,6 +5,7 @@ framework: compass
|
||||
stylesheet: compass/css3/_images.scss
|
||||
meta_description: Specify linear gradients and radial gradients for many browsers.
|
||||
layout: core
|
||||
beta: true
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
|
||||
@ -5,6 +5,7 @@ framework: compass
|
||||
stylesheet: compass/css3/_pie.scss
|
||||
meta_description: Compass integration with the css3pie tool.
|
||||
layout: core
|
||||
beta: true
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
---
|
||||
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 <a href="http://dev.w3.org/csswg/css3-regions/">the spec draft</a> and <a href="http://labs.adobe.com/technologies/cssregions/">Adobe's page on the topic</a>.
|
||||
@ -4,6 +4,7 @@ crumb: Text Shadow
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_text-shadow.scss
|
||||
meta_description: Specify the text shadow for all browsers.
|
||||
beta: true
|
||||
layout: core
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -5,6 +5,7 @@ framework: compass
|
||||
stylesheet: compass/css3/_transform.scss
|
||||
meta_description: Specify transformations for many browsers.
|
||||
layout: core
|
||||
beta: true
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
---
|
||||
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.
|
||||
@ -23,9 +23,8 @@ layout: core
|
||||
* [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)
|
||||
* [cos()](/reference/compass/helpers/trig/#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/)
|
||||
@ -36,17 +35,14 @@ layout: core
|
||||
* [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)
|
||||
* [pi()](/reference/compass/helpers/trig/#pi)
|
||||
* [sin()](/reference/compass/helpers/trig/#sin)
|
||||
* [stylesheet-url()](/reference/compass/helpers/urls/#stylesheet-url)
|
||||
* [scale-lightness()](/reference/compass/helpers/colors/#scale-lightness)
|
||||
* [tan()](/reference/compass/helpers/math/#tan)
|
||||
* [tan()](/reference/compass/helpers/trig/#tan)
|
||||
* [-css2()](/reference/compass/helpers/cross-browser/#-css2)
|
||||
* [-moz()](/reference/compass/helpers/cross-browser/#-moz)
|
||||
* [-ms()](/reference/compass/helpers/cross-browser/#-ms)
|
||||
|
||||
@ -18,7 +18,7 @@ documented_functions:
|
||||
%p
|
||||
These color functions are useful for creating generic libraries that have to accept a
|
||||
range of inputs. For more color functions see
|
||||
<a href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html">the sass reference
|
||||
<a href="http://sass-lang.com/yardoc/Sass/Script/Functions.html">the sass reference
|
||||
documentation</a>
|
||||
|
||||
#adjust-lightness.helper
|
||||
|
||||
@ -19,7 +19,7 @@ documented_functions:
|
||||
#opposite-position.helper
|
||||
%h3
|
||||
%a(href="#opposite-position")
|
||||
opposite-position(<span class="arg">$position</span>)
|
||||
opposite-position($position)
|
||||
.details
|
||||
:markdown
|
||||
Returns the opposition position for the position given. Examples:
|
||||
|
||||
@ -16,10 +16,13 @@ documented_functions:
|
||||
#font-files.helper
|
||||
%h3
|
||||
%a(href="#font-files")
|
||||
font-files([<span class="arg">$font</span>]*)
|
||||
font-files([<span class="arg">$font</span>, <span class="arg">$format</span>]*)
|
||||
.details
|
||||
%p
|
||||
The <code>font-files</code> function takes a list of arguments containing the path to each font files relative to your project's font directory.
|
||||
The <code>font-files</code> function takes any even number of arguments.
|
||||
For each pair of arguments, the first is the path to the font file
|
||||
relative to your project's font directory and the second is the format of
|
||||
that font.
|
||||
%p
|
||||
This helper is used with the <a href="/reference/compass/css3/font_face/#mixin-font-face"><code>font-face</code> mixin</a>
|
||||
and is what makes it possible to pass any number of font files.
|
||||
|
||||
@ -1,101 +0,0 @@
|
||||
---
|
||||
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(<span class="arg">$number</span>)
|
||||
.details
|
||||
%p
|
||||
Returns the sine of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Unless the number has a unit of <code>deg</code> 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(<span class="arg">$number</span>)
|
||||
.details
|
||||
%p
|
||||
Returns the cosine of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Unless the number has a unit of <code>deg</code> 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(<span class="arg">$number</span>)
|
||||
.details
|
||||
%p
|
||||
Returns the tangent of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Unless the number has a unit of <code>deg</code> 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 <a href="http://en.wikipedia.org/wiki/E_(mathematical_constant)">e</a>.
|
||||
|
||||
#log.helper
|
||||
%h3
|
||||
%a(href="#log")
|
||||
log(<span class="arg">$number</span>, <span class="arg" data-default-value="e" title="Defaults to: e">$base</span>)
|
||||
.details
|
||||
%p
|
||||
Calculates the logarithm of a number to a base. Base defaults to <code>e</code>.
|
||||
|
||||
#sqrt.helper
|
||||
%h3
|
||||
%a(href="#sqrt")
|
||||
sqrt(<span class="arg">$number</span>)
|
||||
.details
|
||||
%p
|
||||
Calculates the square root of a number.
|
||||
|
||||
#pow.helper
|
||||
%h3
|
||||
%a(href="#pow")
|
||||
pow(<span class="arg">$number</span>, <span class="arg">$exponent</span>)
|
||||
.details
|
||||
%p
|
||||
Calculates the value of a number raised to the power of an exponent.
|
||||
@ -20,7 +20,7 @@ documented_functions:
|
||||
#nest.helper
|
||||
%h3
|
||||
%a(href="#nest")
|
||||
nest(<span class="arg">$selector1</span>, <span class="arg">$selector2</span>, ...)
|
||||
nest($selector1, $selector2, ...)
|
||||
.details
|
||||
%p
|
||||
Nest selectors as if they had been nested within a sass file.
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
---
|
||||
title: CSS Sprite Helpers for Compass
|
||||
title: Compass Sprite Helpers
|
||||
crumb: Sprites
|
||||
framework: compass
|
||||
meta_description: Helper functions for working with CSS Sprite images.
|
||||
meta_description: Helper functions for working with Sprite images.
|
||||
layout: core
|
||||
classnames:
|
||||
- reference
|
||||
@ -16,13 +16,13 @@ documented_functions:
|
||||
- "sprite-url"
|
||||
- "sprite-position"
|
||||
---
|
||||
%h1 <strong>CSS Sprite</strong> Helpers for Compass
|
||||
%h1 Compass Sprite Helpers
|
||||
|
||||
:markdown
|
||||
These helpers make it easier to build and to work with <em>css sprites</em>.
|
||||
These helpers make it easier to build and to work with 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
|
||||
It is recommended that you instead use the sprite mixins that are designed to work
|
||||
with these functions.
|
||||
|
||||
See the [Spriting Tutorial](/help/tutorials/spriting/) for more information.
|
||||
@ -33,31 +33,31 @@ documented_functions:
|
||||
sprite-map(<span class="arg">$glob</span>, <span class="arg">...</span>)
|
||||
.details
|
||||
:markdown
|
||||
Generates a css sprite map from the files matching the glob pattern. Uses the
|
||||
Generates a 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.
|
||||
Only PNG files can be made into 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:
|
||||
what files will be in the 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
|
||||
This will generate a 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
|
||||
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
|
||||
reference to the 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
|
||||
For each sprite in the 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:
|
||||
|
||||
@ -91,8 +91,8 @@ documented_functions:
|
||||
sprite-map-name(<span class="arg">$map</span>)
|
||||
.details
|
||||
:markdown
|
||||
Returns the name of a css sprite map
|
||||
The name is derived from the folder than contains the css sprites.
|
||||
Returns the name of a sprite map
|
||||
The name is derived from the folder than contains the sprites.
|
||||
|
||||
#sprite-file.helper
|
||||
%h3
|
||||
|
||||
62
doc-src/content/reference/compass/helpers/trig.haml
Normal file
62
doc-src/content/reference/compass/helpers/trig.haml
Normal file
@ -0,0 +1,62 @@
|
||||
---
|
||||
title: Compass Trigonometric Helpers
|
||||
crumb: Trig
|
||||
framework: compass
|
||||
meta_description: Helper functions for working with angles.
|
||||
layout: core
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- helpers
|
||||
documented_functions:
|
||||
- "pi"
|
||||
- "sin"
|
||||
- "cos"
|
||||
- "tan"
|
||||
---
|
||||
%h1 Compass Trig Helpers
|
||||
|
||||
:markdown
|
||||
Trigonometric functions can help you manage complex calculations involving angles.
|
||||
Or maybe they can be used to create pretty pictures. Who knows?
|
||||
|
||||
|
||||
#pi.helper
|
||||
%h3
|
||||
%a(href="#pi")
|
||||
pi()
|
||||
.details
|
||||
%p
|
||||
Returns the value of π.
|
||||
|
||||
#sin.helper
|
||||
%h3
|
||||
%a(href="#sin")
|
||||
sin($number)
|
||||
.details
|
||||
%p
|
||||
Takes the sine of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. 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
|
||||
Takes the cosine of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. 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
|
||||
Takes the tangent of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. 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.
|
||||
@ -12,7 +12,6 @@ documented_functions:
|
||||
- "stylesheet-url"
|
||||
- "font-url"
|
||||
- "image-url"
|
||||
- "generated-image-url"
|
||||
---
|
||||
%h1 Compass URL Helpers
|
||||
|
||||
@ -26,55 +25,37 @@ documented_functions:
|
||||
#stylesheet-url.helper
|
||||
%h3
|
||||
%a(href="#stylesheet-url")
|
||||
stylesheet-url(<span class="arg">$path</span>, <span class="arg" data-default-value="false" title="Defaults to: false">$only-path</span>)
|
||||
stylesheet-url($path, $only-path: false)
|
||||
.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 <code>url()</code> function
|
||||
instead of a `url()` function
|
||||
|
||||
#font-url.helper
|
||||
%h3
|
||||
%a(href="#font-url")
|
||||
font-url(<span class="arg">$path</span>, <span class="arg" data-default-value="false" title="Defaults to: false">$only-path</span>)
|
||||
font-url($path, $only-path: false)
|
||||
.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 <code>url()</code> function
|
||||
instead of a `url()` function
|
||||
|
||||
#image-url.helper
|
||||
%h3
|
||||
%a(href="#image-url")
|
||||
image-url(<span class="arg">$path</span>, <span class="arg" data-default-value="false" title="Defaults to: false">$only-path</span>, <span class="arg" data-default-value="true" title="Defaults to: true">$cache-buster</span>)
|
||||
image-url($path, $only-path: false, $cache-buster: true)
|
||||
.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 <code>url()</code> function
|
||||
instead of a `url()` function
|
||||
%p
|
||||
The third argument is used to control the cache buster on a per-use basis.
|
||||
When set to <code>false</code> no cache buster will be used. When a string, that
|
||||
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
|
||||
<code>generated_image</code> 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 <code>sprite-url()</code> helper calls this helper.
|
||||
%p
|
||||
The second argument is used to control the cache buster on a per-use basis.
|
||||
Defaults to <code>false</code>, meaning that no cache buster will be used.
|
||||
When a string, that value will be used as the cache buster, when <code>true</code>
|
||||
Compass will generate a cache-buster based on the image's modification time.
|
||||
|
||||
|
||||
70
doc-src/content/stylesheets/core/_base-classes.sass
Normal file
70
doc-src/content/stylesheets/core/_base-classes.sass
Normal file
@ -0,0 +1,70 @@
|
||||
$default-rounded-corner: 4
|
||||
|
||||
.group
|
||||
+pie-clearfix
|
||||
|
||||
.truncate
|
||||
+ellipsis
|
||||
|
||||
.border-box
|
||||
+box-sizing(border-box)
|
||||
|
||||
.round-corners-4
|
||||
+border-radius(4px)
|
||||
|
||||
.round-corners-em
|
||||
+border-radius(1em)
|
||||
|
||||
=round-corners($num: $default-rounded-corner)
|
||||
@extend .round-corners-#{$num}
|
||||
|
||||
=round-top-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
=round-bottom-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-top-left-corner
|
||||
=round-left-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
=round-right-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-left-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
|
||||
=round-top-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
=round-top-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-left-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
=round-bottom-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-top-left-corner
|
||||
=round-bottom-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-top-left-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
|
||||
=square-top-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-left-corner
|
||||
=square-top-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
=square-bottom-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-bottom-left-corner
|
||||
=square-bottom-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-bottom-right-corner
|
||||
17
doc-src/content/stylesheets/core/_clearing-classes.sass
Normal file
17
doc-src/content/stylesheets/core/_clearing-classes.sass
Normal file
@ -0,0 +1,17 @@
|
||||
.clear-top-left-corner
|
||||
+border-top-left-radius(0)
|
||||
.clear-top-right-corner
|
||||
+border-top-right-radius(0)
|
||||
.clear-bottom-left-corner
|
||||
+border-bottom-left-radius(0)
|
||||
.clear-bottom-right-corner
|
||||
+border-bottom-right-radius(0)
|
||||
|
||||
.hide
|
||||
display: none
|
||||
.clear-box-shadow
|
||||
+box-shadow(none)
|
||||
.clear-border-radius
|
||||
@extend .clear-rounded-corners
|
||||
.clear-rounded-corners
|
||||
+border-radius(0)
|
||||
10
doc-src/content/stylesheets/core/_extensions.scss
Normal file
10
doc-src/content/stylesheets/core/_extensions.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@mixin reset($reset-type: false){
|
||||
@if($reset-type){
|
||||
@if($reset-type == global){
|
||||
@include global-reset;
|
||||
}
|
||||
@if($reset-type == html5){
|
||||
@include reset-html5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -10,7 +10,6 @@
|
||||
@import "partials/typography";
|
||||
@import "partials/main";
|
||||
@import "partials/home";
|
||||
@import "partials/ads";
|
||||
|
||||
html.dark { @include dark-theme; }
|
||||
html.light { @include light-theme; }
|
||||
|
||||
@ -1,42 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
6
doc-src/content/stylesheets/partials/_blog.scss
Normal file
6
doc-src/content/stylesheets/partials/_blog.scss
Normal file
@ -0,0 +1,6 @@
|
||||
body#blog-archive {
|
||||
.timestamp {
|
||||
margin-right: 1em;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
113
doc-src/content/stylesheets/partials/_code.scss
Normal file
113
doc-src/content/stylesheets/partials/_code.scss
Normal file
@ -0,0 +1,113 @@
|
||||
//html.sass .mixin-source .scss, html.scss .mixin-source .sass { @extend .hide;}
|
||||
.mixin-source, .example-source, .function-source {
|
||||
position: relative; @extend .fixed-font;
|
||||
.syntaxhighlighter, pre {
|
||||
&.scss, &.sass, &.css, &.haml, &.html { display: none; } } }
|
||||
|
||||
html.sass { .mixin-source, .example-source, .function-source { .syntaxhighlighter.sass { display: block; } } }
|
||||
html.scss { .mixin-source, .example-source, .function-source { .syntaxhighlighter.scss { display: block; } } }
|
||||
html.css .example-source .syntaxhighlighter.css { display: block; }
|
||||
html.html .example-source .syntaxhighlighter.html { display: block; }
|
||||
html.haml .example-source .syntaxhighlighter.haml { display: block; }
|
||||
|
||||
|
||||
|
||||
.mixin-source, .function-source { display: none; }
|
||||
|
||||
html.light .syntaxhighlighter, html.dark .syntaxhighlighter {
|
||||
margin: 0 0 2px;
|
||||
code { padding: 0; }
|
||||
//font-size: 1.1em;
|
||||
text-shadow: none;
|
||||
.code-block { background: none; @extend .clear-box-shadow; }
|
||||
table td.gutter { .line { &:first-child { padding-top: 10px !important; } &:last-child { padding-bottom: 10px !important; } } }
|
||||
.toolbar { display: none; }
|
||||
//a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
|
||||
}
|
||||
|
||||
a[rel="github-source"] {
|
||||
position: relative;
|
||||
float: right;
|
||||
top: 1.1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1.5em 0;
|
||||
overflow: auto;
|
||||
.code-block:first-child { padding: .6em; display: block; }
|
||||
.code-block:first-child { width: 100%; @include box-sizing(border-box); overflow: auto; }
|
||||
}
|
||||
|
||||
.code-block { @extend .round-corners-4; @extend .fixed-font;
|
||||
display: inline-block;
|
||||
font-size: .95em;
|
||||
padding: 0 .4em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.source-documentation {
|
||||
@extend .round-corners-4;
|
||||
padding: 10px 15px;
|
||||
@include round-bottom-corners
|
||||
}
|
||||
|
||||
h3 { @include round-corners;
|
||||
padding: 10px 15px;
|
||||
margin: 20px 0 20px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
a { text-decoration: none;}
|
||||
code, .arg { font-weight: normal; }
|
||||
}
|
||||
h3.mixin, h3.function { @include round-top-corners; margin-bottom: 2px;}
|
||||
.arg {
|
||||
display: inline-block;
|
||||
padding: 0 2px;
|
||||
&[data-default-value] {
|
||||
font-style: italic;
|
||||
&:before { content: "[" ; }
|
||||
&:after { content: "]" ; }}
|
||||
}
|
||||
|
||||
a[rel="view source"]{ float: right; padding: 9px 15px; margin-top: 20px; position: relative; z-index: 2; font-size: .8em; @include hover-link;}
|
||||
h2 + a[rel="view source"]{ margin-top: 6px;}
|
||||
|
||||
.syntaxhighlighter {
|
||||
a, div, code, table, table td, table tr, table tbody, table thead, table caption, textarea {
|
||||
background: none; border: 0; bottom: auto; float: none; height: auto; left: auto; line-height: 1.2em !important;
|
||||
padding: 0; margin: 0; outline: 0;
|
||||
overflow: visible; position: static; right: auto;
|
||||
text-align: left; top: auto; vertical-align: baseline;
|
||||
width: auto;
|
||||
font: { weight: normal; style: normal;
|
||||
size: 1em;
|
||||
}
|
||||
min: { height: inherit; }
|
||||
}
|
||||
}
|
||||
|
||||
.syntaxhighlighter { width: 100%; margin: 1em 0 1em 0; position: relative; overflow: auto; font-size: 1em;
|
||||
|
||||
// set up bold and italic
|
||||
.bold { font-weight: bold; }
|
||||
.italic { font-style: italic; }
|
||||
.line { white-space: pre; }
|
||||
|
||||
// main table and columns
|
||||
table { width: 100%;
|
||||
td.code { width: 100%;
|
||||
.line { padding: 0 .6em; } }
|
||||
td.gutter .line { text-align: right; padding: 0 0.8em 0 1em; } } // middle spacing between line numbers and lines
|
||||
|
||||
// Styles for the toolbar
|
||||
.toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
|
||||
span.title { display: inline; }
|
||||
a { display: block; text-align: center; text-decoration: none; padding-top: 1px; } }
|
||||
.container { position: relative; }
|
||||
textarea { @include stretch(0, .65em, 0, .65em); @extend .fixed-font; font-size: .95em; line-height: 1.3em !important;}
|
||||
}
|
||||
.syntaxhighlighter, pre .code-block:first-child, pre {
|
||||
&::-webkit-scrollbar { height: 12px; }
|
||||
&::-webkit-scrollbar-button { &:start:decrement, &:end:increment { display: block; width: 0; height: 0; } }
|
||||
&::-webkit-scrollbar-thumb:horizontal { -webkit-border-radius: 5px; -webkit-background-clip: padding-box; }
|
||||
}
|
||||
29
doc-src/content/stylesheets/partials/_example.scss
Normal file
29
doc-src/content/stylesheets/partials/_example.scss
Normal file
@ -0,0 +1,29 @@
|
||||
html.light #demo, html.dark #demo {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#demo {
|
||||
@include round-corners;
|
||||
@extend .group;
|
||||
background: #fff;
|
||||
margin-bottom: 1.2em;
|
||||
padding: 40px;
|
||||
code {
|
||||
@include box-shadow(rgba(#000, .3) 0 1px 3px, rgba(#000, .15) 0 1px 0 0 inset);
|
||||
background: #fff;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
#how {
|
||||
section { width: 49%; float: left; }
|
||||
section + section { float: right; }
|
||||
|
||||
.example-source { clear: both; }
|
||||
}
|
||||
|
||||
#reference {
|
||||
float: right;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
99
doc-src/content/stylesheets/partials/_home.scss
Normal file
99
doc-src/content/stylesheets/partials/_home.scss
Normal file
@ -0,0 +1,99 @@
|
||||
body#home {
|
||||
width: 810px;
|
||||
#page { padding-top: 31px;}
|
||||
h1#logo {
|
||||
$logo: 'compass-logo.png';
|
||||
background: image-url($logo) no-repeat;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
width: image-width($logo);
|
||||
height: image-height($logo)/2;
|
||||
padding: 0;
|
||||
margin: 0 auto 18px;
|
||||
}
|
||||
#{headings()}{ @extend .heading-font; }
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
h3 {
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
h4 { font-size: 1.5em; }
|
||||
.overview {
|
||||
@extend .group;
|
||||
.compass { width: 406px; float: left;
|
||||
h4:before { content: "k"; } }
|
||||
.sass { width: 275px; float: right;
|
||||
h4:before { content: "2"; } }
|
||||
div {
|
||||
padding: 20px;
|
||||
h4 {
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 12px;
|
||||
&:before {
|
||||
@extend .pictos;
|
||||
color: #fb292d;
|
||||
display: inline-block;
|
||||
font-size: 1.2em;
|
||||
padding-right: .3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
ol { padding-left: 0; list-style: inside decimal; margin-bottom: 0; }
|
||||
p { margin-bottom: 0; }
|
||||
ol, p { line-height: 1.8em; font-size: .95em;}
|
||||
}
|
||||
}
|
||||
ul#featured_sites {
|
||||
@extend .group;
|
||||
overflow: visible;
|
||||
margin-top: 30px;
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
li {
|
||||
float: left;
|
||||
text-shadow: none;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
&:nth-child(3n+2){ margin: 0 7px; }
|
||||
&:nth-child(1n+4){ margin-top: 7px; }
|
||||
&:nth-child(3n+4){ clear: left; }
|
||||
padding: 6px;
|
||||
a { text-decoration: none; }
|
||||
img { float: left; width: 240px; }
|
||||
span { display: none;}
|
||||
&:hover { z-index: 100;
|
||||
padding: 3px 2px;
|
||||
img { width: 248px; }
|
||||
span { display: block; position: absolute; text-shadow: none;}
|
||||
}
|
||||
.url {
|
||||
bottom: 2px; left: 2px; right: 2px; background: #000; background: rgba(#000, .8); z-index: 102; padding: 2.2em 10px 6px;
|
||||
font-size: .8em; border-top: 1px solid rgba(#fff, .2); }
|
||||
.title { bottom: 1.7em; left: 0; z-index: 103; text-decoration: none; padding: 0 11px; color: #fff; }
|
||||
}
|
||||
}
|
||||
section.book, section.gui {
|
||||
width: 48%;
|
||||
float: left;
|
||||
@extend .group;
|
||||
h3 { margin-bottom: 1em; height: 2em; text-align: left; }
|
||||
}
|
||||
section.book {
|
||||
margin-right: 2%;
|
||||
img { float: left; margin-right: 1em; margin-bottom: 1em; }
|
||||
}
|
||||
section.gui {
|
||||
text-align: center;
|
||||
.note {
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
|
||||
html.light body#home { h1#logo { background-position: bottom;} }
|
||||
10
doc-src/content/stylesheets/partials/_install.scss
Normal file
10
doc-src/content/stylesheets/partials/_install.scss
Normal file
@ -0,0 +1,10 @@
|
||||
body#install {
|
||||
#steps, p.madlib, p.note, h4 { margin-top: 1em; }
|
||||
p.note { font-size: smaller; font-style: italic; }
|
||||
p.warning { color: #c00; }
|
||||
.customization { display: none; }
|
||||
.customizable .customization { display: inline; }
|
||||
blockquote { border-left: 2px solid #ccc;
|
||||
text-indent: 0; padding-left: 0.5em; }
|
||||
.customization input { width: 8em; }
|
||||
}
|
||||
21
doc-src/content/stylesheets/partials/_layout.scss
Normal file
21
doc-src/content/stylesheets/partials/_layout.scss
Normal file
@ -0,0 +1,21 @@
|
||||
$min-width: 700px;
|
||||
$side-nav-width: 160px;
|
||||
$main-min-width: $min-width - $side-nav-width;
|
||||
|
||||
body {
|
||||
max-width: 1500px;
|
||||
min-width: $min-width;
|
||||
margin: 0 auto;
|
||||
@extend .sans-font;
|
||||
line-height: 1.45em;
|
||||
}
|
||||
|
||||
#wrap { @extend .group; padding: 0 20px 20px; }
|
||||
#page { @extend .group; padding-bottom: 30px; }
|
||||
footer { @extend .group; clear: both; padding-top: 20px;}
|
||||
header { padding: 22px 0 0; position: relative; }
|
||||
#page aside + article { margin-left: $side-nav-width + 22px; padding-left: 23px; }
|
||||
aside { float: left; width: $side-nav-width; position: relative; z-index: 2;}
|
||||
|
||||
body#home #page article { padding-left: 0;}
|
||||
body.site, body#changelog, body.default { max-width: 1024px; }
|
||||
63
doc-src/content/stylesheets/partials/_main.scss
Normal file
63
doc-src/content/stylesheets/partials/_main.scss
Normal file
@ -0,0 +1,63 @@
|
||||
body.get-involved h1 + p { font-size: 1.2em; line-height: 1.45em; }
|
||||
|
||||
#page {
|
||||
position: relative;
|
||||
padding-top: 40px;
|
||||
& > article { padding-top: 10px; font-size: 15px;
|
||||
img { max-width: 100%; } } }
|
||||
|
||||
#theme_pref {
|
||||
a { display: block; font-size: 18px; width: .9em; position: relative; text-decoration: none; @extend .pictos; } }
|
||||
|
||||
#docs_panel {
|
||||
position: absolute; top: 0; right: 0;
|
||||
width: 100%;
|
||||
& > div { float: right; margin-left: 10px; @include round-bottom-corners; border: 1px solid; border-top: 0;}
|
||||
a { text-decoration: none; }
|
||||
#theme_pref { padding: 3px 12px 6px; a { position: relative; top: 2px;} }
|
||||
#version { font-size: .75em; padding: 4px 0 5px; background: none; border: none; position: absolute; left: 0; a { @include hover-link; } }
|
||||
|
||||
}
|
||||
|
||||
#syntax_pref, .syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} }
|
||||
|
||||
.syntax_pref {
|
||||
float: left; @include round-top-corners; border: 1px solid; border-bottom: 0;
|
||||
a { text-decoration: none; }
|
||||
}
|
||||
|
||||
footer {
|
||||
.links { float: left; font-size: .9em;
|
||||
img { vertical-align: middle; padding-right: 5px; position: relative; top: -2px;}
|
||||
span { position: relative; top: -1px; }
|
||||
ul { @include horizontal-list(15px); overflow: visible;
|
||||
li { padding-top: 3px; }
|
||||
li:last-child {border: 0; @include box-shadow(none); } } }
|
||||
}
|
||||
#page article h2 {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
h2 a.help {
|
||||
text-indent: -9999px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
@include opacity(.3);
|
||||
&:hover { @include opacity(.7); }
|
||||
&:before {
|
||||
@extend .pictos;
|
||||
content: "?";
|
||||
text-indent: 0;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
font-size: .85em;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
height: 0px;
|
||||
border: 0;
|
||||
border-bottom-width: 4px;
|
||||
margin: 3em 0;
|
||||
background: transparent;
|
||||
}
|
||||
96
doc-src/content/stylesheets/partials/_nav.scss
Normal file
96
doc-src/content/stylesheets/partials/_nav.scss
Normal file
@ -0,0 +1,96 @@
|
||||
.triangle-marker {
|
||||
border-color: transparent transparent;
|
||||
content: "\00a0";
|
||||
height: 0; width: 0;
|
||||
position: absolute;
|
||||
border-style: solid; }
|
||||
|
||||
nav a { @include hover-link; }
|
||||
nav .selected a:hover { text-decoration: none;}
|
||||
|
||||
header { @extend .group;
|
||||
font-size: 1.3em; @extend .heading-font; border-width: 4px;}
|
||||
#main-nav {
|
||||
display: inline-block;
|
||||
padding-bottom: 10px;
|
||||
ul {
|
||||
@include horizontal-list(10px);
|
||||
line-height: 2em; }}
|
||||
|
||||
#sub-nav {
|
||||
@extend .group;
|
||||
padding: 8px 0; }
|
||||
|
||||
#docs-nav, #module-nav {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
a {
|
||||
padding: 2px 10px;
|
||||
display: inline-block; }}
|
||||
|
||||
#docs-nav { padding-right: 30px;
|
||||
& + #module-nav {
|
||||
padding-left: 20px;
|
||||
}}
|
||||
|
||||
#module-nav {
|
||||
display: inline-block;
|
||||
ul { @include horizontal-list(false); }}
|
||||
|
||||
body.getting-started #module-nav li.getting-started,
|
||||
body.tutorial #module-nav li.tutorials,
|
||||
body.support #module-nav li.support,
|
||||
#module-nav li.selected {
|
||||
position: relative;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:before{ @extend .triangle-marker;
|
||||
border-width: 0 8px 8px;
|
||||
z-index: 2;
|
||||
bottom: -9px;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
border-bottom-color: #121212;
|
||||
}
|
||||
&:before { @extend .triangle-marker;
|
||||
border-bottom-color: #414141;
|
||||
border-width: 0 6px 6px;
|
||||
z-index: 3;
|
||||
bottom: -9px;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
&:after { @extend .triangle-marker;
|
||||
border-bottom-color: #343434;
|
||||
border-width: 0 5px 5px;
|
||||
z-index: 3;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
#search-docs {
|
||||
width: 170px;
|
||||
float: right;
|
||||
position: relative;
|
||||
top: .3em;
|
||||
//position: absolute; top: 29px; right: 0;
|
||||
&:before {
|
||||
content: "s";
|
||||
display: block;
|
||||
@extend .pictos;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 4px;
|
||||
font-size: .8em;
|
||||
z-index: 20;
|
||||
@include opacity(.8)
|
||||
}
|
||||
input { @extend .sans-font; @include round-corners;
|
||||
@include box-sizing(border-box);
|
||||
width: 170px; border: 0; margin: 0; padding: 5px 8px 5px 26px;
|
||||
font-size: .8em;
|
||||
float: right;
|
||||
position: relative; } }
|
||||
31
doc-src/content/stylesheets/partials/_sidebar.scss
Normal file
31
doc-src/content/stylesheets/partials/_sidebar.scss
Normal file
@ -0,0 +1,31 @@
|
||||
aside {
|
||||
padding-top: 15px;
|
||||
text-align: right;
|
||||
padding-right: 22px;
|
||||
h2, h3 {
|
||||
text-align: left;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.45em;
|
||||
padding-bottom: .2em;
|
||||
margin-bottom: .4em;
|
||||
@extend .clear-border-radius;
|
||||
}
|
||||
h3 {
|
||||
padding: 0 0 .5em; line-height: 1.1em;
|
||||
}
|
||||
a {
|
||||
font-size: .85em;
|
||||
}
|
||||
ul ul a {
|
||||
&.selected, &.selected:hover {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.deprecated {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.beta span:after {
|
||||
content: " (\3B2)";
|
||||
}
|
||||
}
|
||||
275
doc-src/content/stylesheets/partials/_theme.scss
Normal file
275
doc-src/content/stylesheets/partials/_theme.scss
Normal file
@ -0,0 +1,275 @@
|
||||
@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg){
|
||||
background: $page-bg;
|
||||
body { background: $page-bg; color: $text;
|
||||
a { color: $link; } }
|
||||
|
||||
#page { @extend .horizontal-rule-#{$theme}; }
|
||||
header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
|
||||
|
||||
nav a { color: $nav-link; }
|
||||
#main-nav a { color: $main-nav;}
|
||||
|
||||
body#home #main-nav a[rel=home],
|
||||
body#help #main-nav a[rel=help],
|
||||
body.tutorial #main-nav a[rel=help],
|
||||
body.reference #main-nav a[rel=documentation],
|
||||
body#changelog #main-nav a[rel=documentation],
|
||||
body.demo #main-nav a[rel=documentation],
|
||||
body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
|
||||
|
||||
#search-docs input {
|
||||
@extend .inset-panel-#{$theme}; color: $search;
|
||||
&::-webkit-input-placeholder { color: $search; } }
|
||||
#{headings()}{ color: $heading;
|
||||
strong { color: $main-nav-selected; }
|
||||
em { color: $code; } }
|
||||
|
||||
#page > article h2 { @extend .horizontal-rule-top-#{$theme}; }
|
||||
hr { @extend .horizontal-rule-#{$theme};
|
||||
border-bottom-width: 8px}
|
||||
body#home h2 { @extend .horizontal-rule-#{$theme}; }
|
||||
|
||||
#page aside + article { @extend .vertical-rule-left-#{$theme}; }
|
||||
|
||||
aside {
|
||||
h2 a { color: $strong-text; }
|
||||
h2, h3 { @extend .horizontal-rule-#{$theme}; }}
|
||||
|
||||
footer .links li { @extend .vertical-rule-#{$theme}; }
|
||||
code { @extend .code-block-#{$theme}; color: $code; }
|
||||
|
||||
#theme_pref { @extend .theme-switch-#{$theme}; }
|
||||
#docs_panel div, .syntax_pref { background: $option-panel-bg; border-color: $option-panel-border; }
|
||||
|
||||
body#home .overview div { @extend .inset-panel-#{$theme};
|
||||
h4 { @extend .horizontal-rule-#{$theme}; } }
|
||||
#featured_sites li { @extend .inset-panel-#{$theme}; }
|
||||
|
||||
}
|
||||
@mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){
|
||||
|
||||
#page > article {
|
||||
h1 { @extend .horizontal-rule-#{$theme}; }
|
||||
h2 { @extend .horizontal-rule-top-#{$theme}; }
|
||||
h3 { @extend .heading-panel-#{$theme}; }
|
||||
h1 + h2, hr + h2 {
|
||||
@extend .clear-box-shadow; border-top: 0;
|
||||
margin-top: 0;}
|
||||
}
|
||||
|
||||
#sub-nav { @extend .horizontal-rule-#{$theme}; }
|
||||
#docs-nav { @extend .vertical-rule-#{$theme}; }
|
||||
body.core a[rel=core], body.blueprint a[rel=blueprint]{ @extend .inset-panel-#{$theme}; color: $docs-nav-selected; @extend .round-corners-4;}
|
||||
#main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; float: left; }
|
||||
|
||||
#module-nav {
|
||||
ul { overflow: visible; }}
|
||||
body.getting-started #module-nav li.getting-started,
|
||||
body.tutorial #module-nav li.tutorials,
|
||||
body.support #module-nav li.support,
|
||||
#module-nav li.selected { @extend .selected-marker-#{$theme};
|
||||
a { color: $module-nav-selected; } }
|
||||
|
||||
a[rel=sass], a[rel=scss], a[rel=css], a[rel=html], a[rel=haml] { @extend .syntax-switch-#{$theme}; }
|
||||
&.sass a[rel=sass], &.scss a[rel=scss], &.css a[rel=css], &.html a[rel=html], &.haml a[rel=haml] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }
|
||||
|
||||
#version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } }
|
||||
.mixin-source, .example-source, .function-source { @extend .mixin-panel-#{$theme};
|
||||
.container textarea { color: $code; }
|
||||
}
|
||||
h2 a.help { color: $heading;}
|
||||
|
||||
.source-documentation { @extend .doc-panel-#{$theme}; }
|
||||
|
||||
#demo { @extend .demo-#{$theme}; }
|
||||
|
||||
.arg { color: $code; }
|
||||
.arg[data-default-value] { color: rgba($code, .7); }
|
||||
a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);} }
|
||||
|
||||
}
|
||||
|
||||
// Dark theme
|
||||
.inset-panel-dark {
|
||||
@include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
|
||||
background: darken(#2f2f2f, 6); background-color: rgba(#000, .3); }
|
||||
|
||||
.horizontal-rule-dark {
|
||||
@include box-shadow(rgba(#fff, .07) 0 1px 0);
|
||||
border-bottom: 1px solid #121212; }
|
||||
|
||||
.horizontal-rule-top-dark {
|
||||
@include box-shadow(rgba(#fff, .07) 0 1px 0 inset);
|
||||
border-top: 1px solid #121212; }
|
||||
|
||||
.vertical-rule-dark {
|
||||
@include box-shadow(rgba(#fff, .07) 1px 0 0);
|
||||
border-right: 1px solid #121212; }
|
||||
|
||||
.vertical-rule-left-dark {
|
||||
@include box-shadow(rgba(#fff, .07) 1px 0 0 inset);
|
||||
border-left: 1px solid #121212; }
|
||||
|
||||
.code-block-dark { @extend .code-block; @extend .inset-panel-dark; }
|
||||
|
||||
.demo-dark {
|
||||
@include box-shadow(rgba(#000, .5) 0 2px 10px inset, rgba(#fff, .3) 0 1px 2px 0px, rgba(#000, .8) 0 0 0 1px inset); }
|
||||
|
||||
.heading-panel-dark {
|
||||
background: darken(#2f2f2f, 6);
|
||||
background: rgba(#000, .2);
|
||||
@include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
|
||||
a:hover { color: #fff;
|
||||
.arg { color: rgba(#fff, .6);}
|
||||
}
|
||||
}
|
||||
.doc-panel-dark {
|
||||
background: darken(#2f2f2f, 4);
|
||||
background: rgba(#000, .1);
|
||||
@include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
|
||||
}
|
||||
|
||||
.syntax-switch-dark {
|
||||
color: #000; text-shadow: rgba(#fff, .08) 0 1px 0;
|
||||
&:hover { color: #fff; text-shadow: #000 0 1px 0; } }
|
||||
|
||||
.theme-switch-dark {
|
||||
cursor: pointer;
|
||||
a { color: #000; color: rgba(#000, .8); text-shadow: rgba(#fff, .08) 0 1px 0; }
|
||||
&:hover a { color: #eee; text-shadow: #000 0 1px 0; } }
|
||||
|
||||
.selected-marker-dark {
|
||||
a:before{ border-bottom-color: #121212; }
|
||||
&:before { border-bottom-color: #414141; }
|
||||
&:after { border-bottom-color: #323232; }
|
||||
}
|
||||
.mixin-panel-dark {
|
||||
@extend .inset-panel-dark;
|
||||
td.gutter { background: rgba(#fff, .05); .line { border-right: 2px solid rgba(#fff, .15); color: rgba(#fff, .5); }}
|
||||
.container textarea { background: darken(#2f2f2f, 6); }
|
||||
}
|
||||
|
||||
@mixin dark-theme($docs: false) {
|
||||
$page-bg: #2f2f2f;
|
||||
|
||||
$text: #c6c6c6;
|
||||
$heading: white;
|
||||
$strong-text: #dbdbdb;
|
||||
|
||||
$search: #6e6e6e;
|
||||
|
||||
$code: #dadbb1;
|
||||
$nav-link: #bfbfbf;
|
||||
$link: saturate(lighten(#85AFC9, 4), 19);
|
||||
|
||||
$main-nav: white;
|
||||
$main-nav-selected: #fb292d;
|
||||
$docs-nav-selected: $strong-text;
|
||||
$module-nav-selected: $link;
|
||||
|
||||
$option-panel-border: rgba(#000, .5);
|
||||
$option-panel-bg: rgba(#fff, .06);
|
||||
|
||||
@include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
|
||||
|
||||
@if($docs){
|
||||
@include docs-theme(dark, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
|
||||
.syntaxhighlighter, pre, pre .code-block:first-child {
|
||||
&::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); }
|
||||
}
|
||||
.syntaxhighlighter, pre, pre .code-block:first-child {
|
||||
&::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#fff, .3), rgba(#fff, 0))) #000; -webkit-box-shadow: rgba(black, 0.8) 0px 0 0 1px inset; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Light Theme
|
||||
.inset-panel-light {
|
||||
@include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .5) 0 1px 3px 0px inset);
|
||||
text-shadow: 0 1px 1px #fff;
|
||||
background: darken(#fff, .04); background-color: rgba(#000, .04); }
|
||||
|
||||
.horizontal-rule-light {
|
||||
@include box-shadow(#fff 0 1px 0);
|
||||
border-bottom: 1px solid #bbb; }
|
||||
|
||||
.horizontal-rule-top-light {
|
||||
@include box-shadow(#fff 0 1px 0 inset);
|
||||
border-top: 1px solid #bbb; }
|
||||
|
||||
.vertical-rule-light {
|
||||
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
|
||||
border-right: 1px solid #bbb; }
|
||||
|
||||
.vertical-rule-left-light {
|
||||
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0 inset);
|
||||
border-left: 1px solid #bbb; }
|
||||
|
||||
.code-block-light { @extend .code-block; @extend .inset-panel-light; background: rgba(#fff, .5); }
|
||||
|
||||
.demo-light { @include box-shadow(rgba(#000, .3) 0 2px 10px inset, #fff 0 1px 2px 0px, rgba(#000, .05) 0 0 0 1px inset); }
|
||||
|
||||
.syntax-switch-light {
|
||||
color: rgba(#000, .3); text-shadow: rgba(#fff, .08) 0 1px 0;
|
||||
&:hover { color: #000; text-shadow: #fff 0 1px 0; }}
|
||||
|
||||
.theme-switch-light {
|
||||
cursor: pointer;
|
||||
a {color: rgba(#000, .2); text-shadow: rgba(#fff, 1) 0 1px 0;}
|
||||
&:hover a { color: #000; } }
|
||||
|
||||
.heading-panel-light {
|
||||
background: rgba(#fff, .5);
|
||||
@include box-shadow(rgba(#000, .13) 0 0 0 1px inset);
|
||||
a:hover { color: #000;
|
||||
.arg { color: rgba(#000, .6); } }
|
||||
}
|
||||
|
||||
.selected-marker-light {
|
||||
a:before{ border-bottom-color: #bbbbbb; }
|
||||
&:before { border-bottom-color: #fff; }
|
||||
&:after { border-bottom-color: #e5e5e5; }
|
||||
}
|
||||
|
||||
.doc-panel-light {
|
||||
background: rgba(#000, .03);
|
||||
text-shadow: rgba(#fff, .9) 0 1px 1px;
|
||||
@include box-shadow(rgba(#000, .15) 0 0 0 1px inset);
|
||||
}
|
||||
|
||||
.mixin-panel-light {
|
||||
@extend .inset-panel-light;
|
||||
background: rgba(#fff, .8);
|
||||
td.gutter { background: rgba(#000, .08); .line { border-right: 2px solid rgba(#000, .2); color: rgba(#000, .4); } }
|
||||
.container textarea { background: darken(#fff, .04); }
|
||||
}
|
||||
|
||||
@mixin light-theme($docs: false) {
|
||||
$page-bg: #ececec; // image-url('bg-light.jpg');
|
||||
|
||||
$text: #111;
|
||||
$heading: #222;
|
||||
$strong-text: #000;
|
||||
|
||||
$search: #666;
|
||||
|
||||
$link: #307eb6;
|
||||
$nav-link: #444;
|
||||
$code: #222;
|
||||
|
||||
$main-nav: #000;
|
||||
$main-nav-selected: darken(#fb292d, 15);
|
||||
$docs-nav-selected: $strong-text;
|
||||
$module-nav-selected: $link;
|
||||
|
||||
$option-panel-border: rgba(#000, .2);
|
||||
$option-panel-bg: #fff;
|
||||
|
||||
@include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
|
||||
|
||||
@if($docs){
|
||||
@include docs-theme(light, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
|
||||
.syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset; background: rgba(#ddd, .8); }
|
||||
.syntaxhighlighter::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#000, 0) 40%, rgba(#000, .2))) #fff; -webkit-box-shadow: rgba(black, 0.2) 0px 0 0 1px inset; }
|
||||
}
|
||||
}
|
||||
47
doc-src/content/stylesheets/partials/_typography.scss
Normal file
47
doc-src/content/stylesheets/partials/_typography.scss
Normal file
@ -0,0 +1,47 @@
|
||||
@font-face {
|
||||
font-family: "pictos-web";
|
||||
src: url('/otherfonts/pictos-web.eot');
|
||||
src: local("?"), url('/otherfonts/pictos-web.woff') format('woff'), url('/otherfonts/pictos-web.ttf') format('truetype'), url('/otherfonts/pictos-web.svg#webfontIyfZbseF') format('svg');}
|
||||
|
||||
@include font-face("museosans-web", font-files("museosans-web.woff", woff, "museosans-web.ttf", truetype, "museosans-web.svg#webfontJHBEijmD", svg), 'museosans-web.eot');
|
||||
|
||||
|
||||
.sans-font { font-family: 'Lucida Grande', Arial, sans-serif; }
|
||||
.heading-font { font-family: 'Museo Sans', "museosans-web", 'serif'; }
|
||||
.pictos { font-family: pictos, pictos-web; font-weight: normal; font-style: normal;}
|
||||
.fixed-font { font-family: menlo, monaco, "andale mono", "courier new", fixed;}
|
||||
|
||||
#page {
|
||||
line-height: 1.45em;
|
||||
ol { list-style: outside decimal; padding-left: 2.5em; }
|
||||
ol ol { list-style: outside lower-alpha; padding-left: 2.5em; }
|
||||
ul, ol, dl { margin-bottom: 1.5em;}
|
||||
p { margin-bottom: 1.2em;}
|
||||
#{headings(1,2)}{ @extend .heading-font; line-height: 1.2em; }
|
||||
h1 { font-size: 35px; margin-bottom: 15px; padding-bottom: 6px; }
|
||||
h2 { font-size: 26px; margin: 1em 0 15px; padding-bottom: 6px; }
|
||||
h3 { font-size: 18px; }
|
||||
h4 { font-size: 18px; margin: .4em 0; }
|
||||
ul { list-style: inside disc; }
|
||||
dt { font-weight: bold; }
|
||||
}
|
||||
#page aside {
|
||||
ul { list-style: none; margin-bottom: 1em;}
|
||||
h2 { line-height: 1.3em; margin-top: 0; padding-top: 3px;}
|
||||
}
|
||||
em { font-style: italic; }
|
||||
strong { font-weight: bold; }
|
||||
|
||||
#page > article {
|
||||
ul ul { padding-left: 1em; }
|
||||
position: relative;
|
||||
h2 { font-size: 26px; margin: .5em 0 .6em;
|
||||
padding: 1em 0 6px;}
|
||||
hr + h2 { padding-top: 0; }
|
||||
hr + h3, h4, h5 { margin-top: 0; }
|
||||
}
|
||||
|
||||
dl.table dt, dl.table dd { display: inline-block; }
|
||||
dg { display: block; margin-bottom: 1.5em; }
|
||||
|
||||
.warning { color: #c00; }
|
||||
@ -13,7 +13,6 @@
|
||||
|
||||
@import "partials/nav";
|
||||
@import "partials/sidebar";
|
||||
@import "partials/ads";
|
||||
@import "partials/main";
|
||||
@import "partials/code";
|
||||
@import "partials/example";
|
||||
|
||||
216
doc-src/content/stylesheets/syntax/_shCore.scss
Normal file
216
doc-src/content/stylesheets/syntax/_shCore.scss
Normal file
@ -0,0 +1,216 @@
|
||||
@mixin round_corners_custom($top, $right, $bottom, $left) {
|
||||
-moz-border-radius: $top $right $bottom $left !important;
|
||||
-webkit-border-radius: $top $right $bottom $left !important;
|
||||
}
|
||||
|
||||
@mixin round_corners($radius) {
|
||||
@include round_corners_custom($radius, $radius, $radius, $radius);
|
||||
}
|
||||
|
||||
.syntaxhighlighter {
|
||||
a,
|
||||
div,
|
||||
code,
|
||||
table,
|
||||
table td,
|
||||
table tr,
|
||||
table tbody,
|
||||
table thead,
|
||||
table caption,
|
||||
textarea {
|
||||
@include round_corners(0);
|
||||
|
||||
background: none !important;
|
||||
border: 0 !important;
|
||||
bottom: auto !important;
|
||||
float: none !important;
|
||||
height: auto !important;
|
||||
left: auto !important;
|
||||
line-height: 1.1em !important;
|
||||
margin: 0 !important;
|
||||
outline: 0 !important;
|
||||
overflow: visible !important;
|
||||
padding: 0 !important;
|
||||
position: static !important;
|
||||
right: auto !important;
|
||||
text-align: left !important;
|
||||
top: auto !important;
|
||||
vertical-align: baseline !important;
|
||||
width: auto !important;
|
||||
box-sizing: content-box !important;
|
||||
font: {
|
||||
family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
|
||||
weight: normal !important;
|
||||
style: normal !important;
|
||||
size: 1em !important;
|
||||
}
|
||||
min: {
|
||||
// For IE8, FF & WebKit
|
||||
height: inherit !important;
|
||||
// For IE7
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.syntaxhighlighter {
|
||||
width: 100% !important;
|
||||
margin: 1em 0 1em 0 !important;
|
||||
|
||||
position: relative !important;
|
||||
overflow: auto !important;
|
||||
font-size: 1em !important;
|
||||
|
||||
&.source { overflow: hidden !important; }
|
||||
|
||||
// set up bold and italic
|
||||
.bold { font-weight: bold !important; }
|
||||
.italic { font-style: italic !important; }
|
||||
|
||||
.line { white-space: pre !important; }
|
||||
|
||||
// main table and columns
|
||||
table {
|
||||
width: 100% !important;
|
||||
caption {
|
||||
text-align: left !important;
|
||||
padding: .5em 0 0.5em 1em !important;
|
||||
}
|
||||
|
||||
td.code {
|
||||
width: 100% !important;
|
||||
|
||||
.container {
|
||||
position: relative !important;
|
||||
|
||||
textarea {
|
||||
box-sizing: border-box !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
background: white !important;
|
||||
padding-left: 1em !important;
|
||||
overflow: hidden !important;
|
||||
white-space: pre !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// middle spacing between line numbers and lines
|
||||
td.gutter .line {
|
||||
text-align: right !important;
|
||||
padding: 0 0.5em 0 1em !important;
|
||||
}
|
||||
|
||||
td.code .line {
|
||||
padding: 0 1em !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.nogutter {
|
||||
td.code {
|
||||
.container textarea, .line { padding-left: 0em !important; }
|
||||
}
|
||||
}
|
||||
|
||||
&.show { display: block !important; }
|
||||
|
||||
// Adjust some properties when collapsed
|
||||
&.collapsed {
|
||||
table { display: none !important; }
|
||||
|
||||
.toolbar {
|
||||
padding: 0.1em 0.8em 0em 0.8em !important;
|
||||
font-size: 1em !important;
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
|
||||
span {
|
||||
display: inline !important;
|
||||
margin-right: 1em !important;
|
||||
|
||||
a {
|
||||
padding: 0 !important;
|
||||
display: none !important;
|
||||
&.expandSource { display: inline !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for the toolbar
|
||||
.toolbar {
|
||||
position: absolute !important;
|
||||
right: 1px !important;
|
||||
top: 1px !important;
|
||||
width: 11px !important;
|
||||
height: 11px !important;
|
||||
font-size: 10px !important;
|
||||
z-index: 10 !important;
|
||||
|
||||
span.title { display: inline !important; }
|
||||
|
||||
a {
|
||||
display: block !important;
|
||||
text-align: center !important;
|
||||
text-decoration: none !important;
|
||||
padding-top: 1px !important;
|
||||
|
||||
&.expandSource { display: none !important; }
|
||||
}
|
||||
}
|
||||
|
||||
&.ie {
|
||||
font-size: .9em !important;
|
||||
padding: 1px 0 1px 0 !important;
|
||||
|
||||
.toolbar {
|
||||
line-height: 8px !important;
|
||||
a {
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Print view.
|
||||
// Colors are based on the default theme without background.
|
||||
&.printing {
|
||||
.line.alt1 .content,
|
||||
.line.alt2 .content,
|
||||
.line.highlighted .number,
|
||||
.line.highlighted.alt1 .content,
|
||||
.line.highlighted.alt2 .content { background: none !important; }
|
||||
|
||||
// Gutter line numbers
|
||||
.line {
|
||||
.number { color: #bbbbbb !important; }
|
||||
// Add border to the lines
|
||||
.content { color: black !important; }
|
||||
}
|
||||
|
||||
// Toolbar when visible
|
||||
.toolbar { display: none !important; }
|
||||
a { text-decoration: none !important; }
|
||||
.plain, .plain a { color: black !important; }
|
||||
.comments, .comments a { color: #008200 !important; }
|
||||
.string, .string a { color: blue !important; }
|
||||
.keyword {
|
||||
color: #006699 !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.preprocessor { color: gray !important; }
|
||||
.variable { color: #aa7700 !important; }
|
||||
.value { color: #009900 !important; }
|
||||
.functions { color: #ff1493 !important; }
|
||||
.constants { color: #0066cc !important; }
|
||||
.script { font-weight: bold !important; }
|
||||
.color1, .color1 a { color: gray !important; }
|
||||
.color2, .color2 a { color: #ff1493 !important; }
|
||||
.color3, .color3 a { color: red !important; }
|
||||
.break, .break a { color: black !important; }
|
||||
}
|
||||
}
|
||||
113
doc-src/content/stylesheets/syntax/_shThemeRDark.scss
Normal file
113
doc-src/content/stylesheets/syntax/_shThemeRDark.scss
Normal file
@ -0,0 +1,113 @@
|
||||
|
||||
// Dark Theme
|
||||
|
||||
$background: none;
|
||||
|
||||
$line_highlighted_background: #323E41;
|
||||
$line_highlighted_number: #b9bdb6;
|
||||
|
||||
$gutter_text: #afafaf;
|
||||
$gutter_border_color: rgba(#fff, .15);
|
||||
|
||||
$toolbar_collapsed_a: #5ba1cf;
|
||||
$toolbar_collapsed_a_hover: #5ce638;
|
||||
$toolbar_collapsed_background: #000;
|
||||
|
||||
$toolbar_a: #fff;
|
||||
$toolbar_a_hover: #e0e8ff;
|
||||
|
||||
$code_plain: #dadbb1;
|
||||
$code_comments: #878a85;
|
||||
$code_string: #64b041;
|
||||
$code_keyword: #6cc7eb;
|
||||
$code_preprocessor: #cd5c57;
|
||||
$code_variable: $code_keyword;
|
||||
$code_value: #ffa0a0;
|
||||
$code_functions: #3d95e6;
|
||||
$code_constants: #e0e8ff;
|
||||
$code_script: $code_keyword;
|
||||
$code_script_background: none;
|
||||
$code_color1: #b0b76b;
|
||||
$code_color2: #98f77a;
|
||||
$code_color3: #ffaa3e;
|
||||
$code_color4: $code_plain;
|
||||
|
||||
//@import "theme_template.scss";
|
||||
|
||||
// Interface elements.
|
||||
html.dark .syntaxhighlighter {
|
||||
// Actual syntax highlighter colors.
|
||||
.plain, .plain a { color: $code_plain; }
|
||||
.comments, .comments a { color: $code_comments; }
|
||||
.string, .string a { color: $code_string; }
|
||||
.keyword { color: $code_keyword; }
|
||||
.preprocessor { color: $code_preprocessor; }
|
||||
.variable { color: $code_variable; }
|
||||
.value { color: $code_value; }
|
||||
.functions { color: $code_functions; }
|
||||
.constants { color: $code_constants; }
|
||||
.script {
|
||||
font-weight: bold;
|
||||
color: $code_script;
|
||||
background-color: $code_script_background;
|
||||
}
|
||||
.color1, .color1 a { color: $code_color1; }
|
||||
.color2, .color2 a { color: $code_color2; }
|
||||
.color3, .color3 a { color: $code_color3; }
|
||||
.color4, .color4 a { color: $code_color4; }
|
||||
}
|
||||
|
||||
// Light Theme
|
||||
|
||||
$background: none;
|
||||
|
||||
$line_highlighted_background: #c3defe;
|
||||
$line_highlighted_number: #fff;
|
||||
|
||||
$gutter_text: #787878;
|
||||
$gutter_border_color: #d4d0c8;
|
||||
|
||||
$toolbar_collapsed_a: #3f5fbf;
|
||||
$toolbar_collapsed_a_hover: #aa7700;
|
||||
$toolbar_collapsed_background: #fff;
|
||||
|
||||
$toolbar_a: #a0a0a0;
|
||||
$toolbar_a_hover: red;
|
||||
|
||||
$code_plain: black;
|
||||
$code_comments: #3f5fbf;
|
||||
$code_string: #4fa33f;
|
||||
$code_keyword: #7f0055;
|
||||
$code_preprocessor: #006699;
|
||||
$code_variable: #aa7700;
|
||||
$code_value: #4fa33f;
|
||||
$code_functions: #b553ba;
|
||||
$code_constants: #0066cc;
|
||||
$code_color1: gray;
|
||||
$code_color2: #ca6436;
|
||||
$code_color3: red;
|
||||
$code_color4: $code_plain;
|
||||
|
||||
// Interface elements.
|
||||
html.light .syntaxhighlighter {
|
||||
// Actual syntax highlighter colors.
|
||||
.plain, .plain a { color: $code_plain; }
|
||||
.comments, .comments a { color: $code_comments; }
|
||||
.string, .string a { color: $code_string; }
|
||||
.keyword { color: $code_keyword; }
|
||||
.preprocessor { color: $code_preprocessor; }
|
||||
.variable { color: $code_variable; }
|
||||
.value { color: $code_value; }
|
||||
.functions { color: $code_functions; }
|
||||
.constants { color: $code_constants; }
|
||||
.script {
|
||||
font-weight: bold;
|
||||
color: $code_script;
|
||||
background-color: $code_script_background;
|
||||
}
|
||||
.color1, .color1 a { color: $code_color1; }
|
||||
.color2, .color2 a { color: $code_color2; }
|
||||
.color3, .color3 a { color: $code_color3; }
|
||||
.color4, .color4 a { color: $code_color4; }
|
||||
}
|
||||
|
||||
8
doc-src/content/stylesheets/syntax/_syntax-theme.scss
Normal file
8
doc-src/content/stylesheets/syntax/_syntax-theme.scss
Normal file
@ -0,0 +1,8 @@
|
||||
// Default Syntax Highlighter theme.
|
||||
//@import "shCore.scss";
|
||||
|
||||
@import "shThemeRDark.scss";
|
||||
|
||||
/*.syntaxhighlighter {
|
||||
.keyword { font-weight: bold !important; }
|
||||
}*/
|
||||
120
doc-src/content/stylesheets/syntax/_theme_template.scss
Normal file
120
doc-src/content/stylesheets/syntax/_theme_template.scss
Normal file
@ -0,0 +1,120 @@
|
||||
$background: white !default;
|
||||
|
||||
$line_alt1_background: $background !default;
|
||||
$line_alt2_background: $background !default;
|
||||
|
||||
$line_highlighted_background: #e0e0e0 !default;
|
||||
$line_highlighted_number: black !default;
|
||||
|
||||
$gutter_text: #afafaf !default;
|
||||
$gutter_border_color: #6ce26c !default;
|
||||
$gutter_border: 3px solid $gutter_border_color !default;
|
||||
|
||||
$toolbar_collapsed_a: #00f !default;
|
||||
$toolbar_collapsed_a_hover: #f00 !default;
|
||||
$toolbar_collapsed_background: #fff !default;
|
||||
$toolbar_collapsed_border: 1px solid $gutter_border_color !default;
|
||||
|
||||
$toolbar_a: #fff !default;
|
||||
$toolbar_a_hover: #000 !default;
|
||||
$toolbar_background: $gutter_border_color !default;
|
||||
$toolbar_border: none !default;
|
||||
|
||||
$code_plain: black !default;
|
||||
$code_comments: #008200 !default;
|
||||
$code_string: blue !default;
|
||||
$code_keyword: #006699 !default;
|
||||
$code_preprocessor: gray !default;
|
||||
$code_variable: #aa7700 !default;
|
||||
$code_value: #009900 !default;
|
||||
$code_functions: #ff1493 !default;
|
||||
$code_constants: #0066cc !default;
|
||||
$code_script: $code_keyword !default;
|
||||
$code_script_background: none !default;
|
||||
$code_color1: gray !default;
|
||||
$code_color2: #ff1493 !default;
|
||||
$code_color3: red !default;
|
||||
|
||||
$caption_color: $code_plain !default;
|
||||
|
||||
// Interface elements.
|
||||
.syntaxhighlighter {
|
||||
background-color: $background !important;
|
||||
|
||||
// Highlighed line number
|
||||
.line {
|
||||
&.alt1 { background-color: $line_alt1_background !important; }
|
||||
&.alt2 { background-color: $line_alt2_background !important; }
|
||||
|
||||
// Highlighed line
|
||||
&.highlighted {
|
||||
&.alt1, &.alt2 { background-color: $line_highlighted_background !important; }
|
||||
&.number { color: $line_highlighted_number !important; }
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
caption {
|
||||
color: $caption_color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Add border to the lines
|
||||
.gutter {
|
||||
color: $gutter_text !important;
|
||||
.line {
|
||||
border-right: $gutter_border !important;
|
||||
|
||||
&.highlighted {
|
||||
background-color: $gutter_border_color !important;
|
||||
color: $background !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.printing .line .content { border: none !important; }
|
||||
|
||||
&.collapsed {
|
||||
overflow: visible !important;
|
||||
|
||||
.toolbar {
|
||||
color: $toolbar_collapsed_a !important;
|
||||
background: $toolbar_collapsed_background !important;
|
||||
border: $toolbar_collapsed_border !important;
|
||||
|
||||
a {
|
||||
color: $toolbar_collapsed_a !important;
|
||||
&:hover { color: $toolbar_collapsed_a_hover !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
color: $toolbar_a !important;
|
||||
background: $toolbar_background !important;
|
||||
border: $toolbar_border !important;
|
||||
a {
|
||||
color: $toolbar_a !important;
|
||||
&:hover { color: $toolbar_a_hover !important; }
|
||||
}
|
||||
}
|
||||
|
||||
// Actual syntax highlighter colors.
|
||||
.plain, .plain a { color: $code_plain !important; }
|
||||
.comments, .comments a { color: $code_comments !important; }
|
||||
.string, .string a { color: $code_string !important; }
|
||||
.keyword { color: $code_keyword !important; }
|
||||
.preprocessor { color: $code_preprocessor !important; }
|
||||
.variable { color: $code_variable !important; }
|
||||
.value { color: $code_value !important; }
|
||||
.functions { color: $code_functions !important; }
|
||||
.constants { color: $code_constants !important; }
|
||||
.script {
|
||||
font-weight: bold !important;
|
||||
color: $code_script !important;
|
||||
background-color: $code_script_background !important;
|
||||
}
|
||||
.color1, .color1 a { color: $code_color1 !important; }
|
||||
.color2, .color2 a { color: $code_color2 !important; }
|
||||
.color3, .color3 a { color: $code_color3 !important; }
|
||||
}
|
||||
@ -5,8 +5,6 @@
|
||||
%meta{:charset => "utf-8"}/
|
||||
%meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
|
||||
%meta(name="viewport" content="width=780")
|
||||
- if ENV["BETA"]
|
||||
%meta(name="robots" content="noindex")
|
||||
%link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")
|
||||
%link{:href=>"/blog/atom.xml", :rel=>"alternate", :title=>"Compass Blog", :type=>"application/atom+xml"}
|
||||
%title
|
||||
|
||||
@ -4,8 +4,6 @@
|
||||
%meta{:charset => "utf-8"}/
|
||||
%meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
|
||||
%meta(name="viewport" content="width=780")
|
||||
- if ENV["BETA"]
|
||||
%meta(name="robots" content="noindex")
|
||||
%link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")
|
||||
%title
|
||||
#{@item[:title]} | Compass Documentation
|
||||
|
||||
@ -4,12 +4,10 @@
|
||||
%meta{:charset => "utf-8"}/
|
||||
%meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
|
||||
%meta(name="viewport" content="width=810")
|
||||
- if ENV["BETA"]
|
||||
%meta(name="robots" content="noindex")
|
||||
%link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")
|
||||
%title
|
||||
#{@item[:title]} | Compass Documentation
|
||||
%link{:charset => "utf-8", :href => "/stylesheets/home.css?v=1", :rel => "stylesheet", :type => "text/css"}
|
||||
%link{:charset => "utf-8", :href => "/stylesheets/home.css", :rel => "stylesheet", :type => "text/css"}
|
||||
= render "partials/js-core"
|
||||
/[if lte IE 8]
|
||||
%link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"}
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
.advertisement
|
||||
<script type="text/javascript">(function(){ var fusion = document.createElement('script'); fusion.src = window.location.protocol + '//adn.fusionads.net/api/1.0/ad.js?zoneid=158&rand=' + Math.floor(Math.random()*9999999); fusion.async = true; (document.head || document.getElementsByTagName('head')[0]).appendChild(fusion); })(); $(function(){ $(".advertisement").addClass("visible")});</script>
|
||||
#fusion_ad
|
||||
%a.pagerankspam(href="http://fusionads.net") Powered by Fusion
|
||||
@ -4,7 +4,7 @@
|
||||
%h1 Demo: #{@item[:title]}
|
||||
#demo= example_html
|
||||
|
||||
= yield if block_given?
|
||||
= yield
|
||||
|
||||
#how
|
||||
%section#markup
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
- if (sels = selectors(@item)).any?
|
||||
%h2 Selectors
|
||||
|
||||
- sels.each do |selector|
|
||||
%a{:href=>"#selector-#{selector.identifier}-source", :rel => "view source"} view source
|
||||
%h3.selector{:id=>"selector-#{selector.identifier}"}
|
||||
%a.permalink{:href => "#selector-#{selector.identifier}"}= selector.name
|
||||
.selector-source{:id=>"selector-#{selector.identifier}-source"}
|
||||
%pre.source-code.sass= selector.to_sass
|
||||
%pre.source-code.scss= selector.to_scss
|
||||
|
||||
.source-documentation
|
||||
= format_doc(selector.comment)
|
||||
@ -3,6 +3,3 @@
|
||||
- sidebar_item ||= sidebar_item(@item)
|
||||
- sidebar_item ||= reference_item(:stylesheet => @default_stylesheet)
|
||||
%ul= item_tree(sidebar_item, :depth => 1, :omit_self => get_var(:omit_self){true}, :heading_level => get_var(:heading_level){1}, :heading_depth => get_var(:heading_depth){10})
|
||||
|
||||
|
||||
= render 'partials/ad'
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
%p.beta
|
||||
This module is fairly new and is currently in BETA (β).
|
||||
|
||||
= yield if block_given?
|
||||
= yield
|
||||
|
||||
%p
|
||||
This file can be imported using:
|
||||
@ -23,5 +23,3 @@
|
||||
= render "partials/reference/functions"
|
||||
|
||||
= render "partials/reference/mixins"
|
||||
|
||||
= render "partials/reference/selectors"
|
||||
|
||||
@ -4,8 +4,6 @@
|
||||
%meta{:charset => "utf-8"}/
|
||||
%meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
|
||||
%meta(name="viewport" content="width=780")
|
||||
- if ENV["BETA"]
|
||||
%meta(name="robots" content="noindex")
|
||||
%link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")
|
||||
%title
|
||||
#{@item[:title]} | Compass Documentation
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
# 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
|
||||
@ -138,16 +137,3 @@ 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
|
||||
|
||||
@ -118,31 +118,6 @@ def mixins(item)
|
||||
mixins.reject{|m| m.comment =~ /@private/}
|
||||
end
|
||||
|
||||
def selectors(item)
|
||||
sass_tree = tree(item)
|
||||
# Visitors::CheckNesting.visit(sass_tree)
|
||||
# sass_tree = Visitors::Perform.visit(sass_tree)
|
||||
selectors = []
|
||||
comment = nil
|
||||
sass_tree.children.each do |child|
|
||||
case child
|
||||
when Sass::Tree::RuleNode
|
||||
child.comment = comment && Sass::Tree::CommentNode.clean(comment)
|
||||
comment = nil
|
||||
selectors << child
|
||||
when Sass::Tree::CommentNode
|
||||
comment ||= ""
|
||||
comment << "\n" unless comment.empty?
|
||||
comment << child.docstring
|
||||
else
|
||||
comment = nil
|
||||
end
|
||||
end
|
||||
selectors.reject!{|s| s.comment =~ /@private/}
|
||||
# selectors.select!{|s| s.comment.strip.size > 0} # this would cause only documented selectors to be output
|
||||
selectors
|
||||
end
|
||||
|
||||
def functions(item)
|
||||
sass_tree = tree(item)
|
||||
functions = []
|
||||
@ -208,12 +183,6 @@ def all_functions
|
||||
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|
|
||||
|
||||
@ -1,20 +1,6 @@
|
||||
require 'sass'
|
||||
module Sass
|
||||
module Tree
|
||||
class RuleNode
|
||||
attr_accessor :comment unless method_defined? :comment
|
||||
def identifier
|
||||
@identifier ||= begin
|
||||
id = name.gsub(/[^a-zA-Z]+/,"-").downcase
|
||||
id = id[1..-1] if id[0..0] == "-"
|
||||
id = id[0..-2] if id[-1..-1] == "-"
|
||||
id
|
||||
end
|
||||
end
|
||||
def name
|
||||
@name ||= rule.map{|part| Sass::Script::Node === part ? "\#{#{part.to_sass}}" : part}.join('')
|
||||
end
|
||||
end
|
||||
class VariableNode < Node
|
||||
attr_accessor :name unless method_defined? :name
|
||||
attr_accessor :expr unless method_defined? :expr
|
||||
@ -100,9 +86,7 @@ module Sass
|
||||
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, '')
|
||||
value.gsub(PRE_COMMENT, '').gsub(POST_COMMENT, '')
|
||||
end
|
||||
def doc
|
||||
if value == "@doc off"
|
||||
|
||||
@ -9,9 +9,8 @@ def fetch(uri_str, limit = 10)
|
||||
|
||||
url = URI.parse(uri_str)
|
||||
http = Net::HTTP.new(url.host, url.port)
|
||||
http.open_timeout = 10
|
||||
http.open_timeout = 2
|
||||
http.read_timeout = 30
|
||||
http.use_ssl = true
|
||||
response = http.start do |http|
|
||||
puts "getting #{url.path}"
|
||||
http.request_get(url.path)
|
||||
@ -26,7 +25,7 @@ def fetch(uri_str, limit = 10)
|
||||
end
|
||||
|
||||
def install_from_github(user, project, ext_name, branch = "master", working_directory = Dir.pwd)
|
||||
download_link = "https://github.com/#{user}/#{project}/zipball/#{branch}"
|
||||
download_link = "http://github.com/#{user}/#{project}/zipball/#{branch}"
|
||||
extdir = File.join(working_directory,'extensions')
|
||||
|
||||
if !File.exists?("#{extdir}/#{ext_name}")
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
require File.join(File.dirname(__FILE__), '..', 'downloader')
|
||||
|
||||
install_from_github('nextmat', 'compass-960-plugin', 'ninesixty')
|
||||
install_from_github('chriseppstein', 'compass-960-plugin', 'ninesixty')
|
||||
|
||||
|
||||
@ -77,6 +77,16 @@ Feature: Command Line
|
||||
Then an error message is printed out: A bare project cannot be created when a framework is specified.
|
||||
And the command exits with a non-zero error code
|
||||
|
||||
Scenario: Initializing a rails project
|
||||
Given ruby supports fork
|
||||
Given I'm in a newly created rails project: my_rails_project
|
||||
When I initialize a project using: compass init rails --sass-dir app/stylesheets --css-dir public/stylesheets/compiled
|
||||
Then a config file config/compass.rb is reported created
|
||||
Then a config file config/compass.rb is created
|
||||
And a sass file app/stylesheets/screen.scss is created
|
||||
And a sass file app/stylesheets/print.scss is created
|
||||
And a sass file app/stylesheets/ie.scss is created
|
||||
|
||||
Scenario: Compiling an existing project.
|
||||
Given I am using the existing project in test/fixtures/stylesheets/compass
|
||||
When I run: compass compile
|
||||
@ -151,7 +161,6 @@ Feature: Command Line
|
||||
| watch |
|
||||
And I should see the following "other" commands:
|
||||
| config |
|
||||
| extension |
|
||||
| frameworks |
|
||||
| grid-img |
|
||||
| help |
|
||||
@ -191,7 +200,7 @@ Feature: Command Line
|
||||
| tmp/box_shadow.css |
|
||||
| tmp/columns.css |
|
||||
| tmp/fonts.css |
|
||||
| images/flag-s4798b5a210.png |
|
||||
| images/flag-s03c3b29b35.png |
|
||||
And the following files are removed:
|
||||
| .sass-cache/ |
|
||||
| tmp/border_radius.css |
|
||||
@ -199,7 +208,7 @@ Feature: Command Line
|
||||
| tmp/box_shadow.css |
|
||||
| tmp/columns.css |
|
||||
| tmp/fonts.css |
|
||||
| images/flag-s4798b5a210.png |
|
||||
| images/flag-s03c3b29b35.png |
|
||||
|
||||
Scenario: Watching a project for changes
|
||||
Given ruby supports fork
|
||||
@ -268,20 +277,21 @@ Feature: Command Line
|
||||
Given I am using the existing project in test/fixtures/stylesheets/compass
|
||||
When I run: compass stats
|
||||
Then I am told statistics for each file:
|
||||
| Filename | Rules | Properties | Mixins Defs | Mixins Used | Filesize | CSS Selectors | CSS Properties | CSS Filesize |
|
||||
| sass/border_radius.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/box.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/fonts.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/gradients.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/image_size.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/images.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/layout.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/legacy_clearfix.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/lists.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/print.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/reset.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/utilities.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| Total.* | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| Filename | Rules | Properties | Mixins Defs | Mixins Used | CSS Rules | CSS Properties |
|
||||
| sass/border_radius.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/box.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/fonts.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/gradients.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/image_size.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/images.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/layout.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/legacy_clearfix.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/lists.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/print.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/reset.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/utilities.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| ------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- |
|
||||
| Total.* | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
|
||||
@listframeworks
|
||||
Scenario: List frameworks registered with compass
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user