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

Merge branch 'stable'

Browse Source 
Conflicts:
	VERSION.yml
	doc-src/Gemfile.lock
This commit is contained in:
Chris Eppstein 2012-03-14 00:23:50 -07:00
commit 48d532b748
14 changed files with 188 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -29,3 +29,4 @@ devbin
vendor/ruby
vendor
Gemfile.lock
Compass.pkg

3
Gemfile
View File

@ -2,6 +2,7 @@ source :rubygems
gemspec
unless ENV['PKG']
gem "cucumber", "~> 1.1.4"
gem "rspec", "~>2.0.0"
gem "rails", "~> 3.1"
@ -25,4 +26,6 @@ unless ENV["CI"]
gem 'guard'
gem 'guard-test'
gem 'guard-cucumber'
gem 'packager'
end
end

37
Rakefile
View File

@ -1,7 +1,16 @@
require 'rubygems'
require 'bundler'
Bundler.setup
require 'rake/dsl_definition' rescue nil
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 'compass'
# ----- Default: Testing ------
@ -10,12 +19,17 @@ 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'
@ -124,3 +138,20 @@ 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

2
compass.gemspec
View File

@ -7,7 +7,7 @@ Gem::Specification.new do |gemspec|
gemspec.version = Compass::VERSION # Update 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", "Eric A. Meyer", "Brandon Mathis", "Nico Hagenburger", "Scott Davis"]
gemspec.authors = ["Chris Eppstein", "Scott Davis", "Eric A. Meyer", "Brandon Mathis", "Anthony Short", "Nico Hagenburger"]
gemspec.email = "chris@eppsteins.net"
#gemspec.default_executable = "compass" #deprecated
gemspec.executables = %w(compass)

18
doc-src/Gemfile.lock
View File

@ -1,11 +1,13 @@
GIT
remote: git://github.com/Compass/compass-theme.git
revision: aae72f14a1c150dffe9612623136fabdfff2b84d
PATH
remote: ..
specs:
compass-theme (0.0.2)
compass (~> 0.11)
compass-susy-plugin (~> 0.7.0)
css-slideshow (= 0.2.0)
compass (0.12.0.6754be1)
chunky_png (~> 1.2)
fssm (>= 0.2.7)
sass (~> 3.1)
PATH
remote: ..
@ -24,8 +26,8 @@ GEM
builder (3.0.0)
chunky_png (1.2.5)
coderay (0.9.7)
compass-susy-plugin (0.7.0)
compass (>= 0.10.0)
compass-susy-plugin (0.9)
compass (>= 0.11.1)
cri (2.0.2)
css-slideshow (0.2.0)
compass (>= 0.10.0.rc3)
@ -43,7 +45,11 @@ GEM
rb-fsevent (0.4.0)
rdiscount (1.6.8)
ruby-prof (0.10.8)
<<<<<<< HEAD
sass (3.2.0.alpha.93)
=======
sass (3.1.15)
>>>>>>> stable
serve (1.0.0)
activesupport (~> 3.0.1)
i18n (~> 0.4.1)

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

@ -1,6 +1,6 @@
@import compass/css3
+font-face("Blooming Grove", font-files("examples/bgrove.ttf", truetype, "examples/bgrove.otf", opentype))
+font-face("Blooming Grove", font-files("examples/bgrove.ttf", "examples/bgrove.otf"))
.example
font-family: "Blooming Grove"

21
doc-src/content/help/tutorials/contributing.markdown
View File

@ -278,15 +278,28 @@ Getting recent changes from the main repo:
<h3 id="running-tests">Running Tests</h3>
1. Install development dependencies:
1. You must have Ruby installed on your system. After [setting up git](#setting-up-git),
change to the root directory of your git checkout of Compass.
cd compass
2. Install the bundler Ruby gem.
gem install bundler
If installing to your system gems, you'll probably need to add `sudo` to the
front of that command. If you don't know what that means, you probably need
to add `sudo` to the front.
3. Install development dependencies:
bundle install --binstubs devbin
2. Running core library and stylesheet tests:
4. Running core library and stylesheet tests:
rake run_tests
bundle exec rake test features
3. Running behavior tests
5. Running behavior tests
./devbin/cucumber

22
doc-src/content/posts/2012-02-01-compass-0-12-is-released.markdown
View File

@ -1,12 +1,12 @@
---
title: "Compass v0.12 (Release Candidate) is Released"
title: "Compass v0.12 is Released"
description: "Compass 0.12: Flexible Sprites, Rails Integration"
author: chris
---
Compass 0.12 release candidate is out! Install it now:
Compass 0.12 is out! Install it now:
$ (sudo) gem install compass --pre
$ (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
@ -36,12 +36,14 @@ 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? The Sass 3.2 release is coming soon and I'd
very much like the 0.13 release of compass to 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!
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/

25
doc-src/content/posts/2012-03-11-anthony-short-joins-the-compass-core-team.markdown Normal file
View File

@ -0,0 +1,25 @@
---
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/)

7
doc-src/content/reference/compass/helpers/font-files.haml
View File

@ -16,13 +16,10 @@ documented_functions:
#font-files.helper
%h3
%a(href="#font-files")
font-files([<span class="arg">$font</span>, <span class="arg">$format</span>]*)
font-files([<span class="arg">$font</span>]*)
.details
%p
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.
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.
%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.

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

@ -1,8 +1,8 @@
---
title: Compass Sprite Helpers
title: CSS Sprite Helpers for Compass
crumb: Sprites
framework: compass
meta_description: Helper functions for working with Sprite images.
meta_description: Helper functions for working with CSS Sprite images.
layout: core
classnames:
- reference
@ -16,13 +16,13 @@ documented_functions:
- "sprite-url"
- "sprite-position"
---
%h1 Compass Sprite Helpers
%h1 <strong>CSS Sprite</strong> Helpers for Compass
:markdown
These helpers make it easier to build and to work with sprites.
These helpers make it easier to build and to work with <em>css sprites</em>.
While it is allowed to use these directly, to do so is considered "advanced usage".
It is recommended that you instead use the sprite mixins that are designed to work
It is recommended that you instead use the css sprite mixins that are designed to work
with these functions.
See the [Spriting Tutorial](/help/tutorials/spriting/) for more information.
@ -33,31 +33,31 @@ documented_functions:
sprite-map(<span class="arg">$glob</span>, <span class="arg">...</span>)
.details
:markdown
Generates a sprite map from the files matching the glob pattern. Uses the
Generates a css sprite map from the files matching the glob pattern. Uses the
keyword-style arguments passed in to control the placement.
Only PNG files can be made into sprites at this time.
Only PNG files can be made into css sprites at this time.
The `$glob` should be glob pattern relative to the images directory that specifies
what files will be in the sprite. For example:
what files will be in the css sprite. For example:
$icons: sprite-map("icons/*.png");
background: $icons;
This will generate a sprite map and return a reference to it. It's important to
This will generate a css sprite map and return a reference to it. It's important to
capture this to a variable, because you will need to use it later when creating
sprites. In the above example you might end up with a new file named
css sprites. In the above example you might end up with a new file named
`images/sprites/icons-a2ef041.png` and your css stylesheet will have:
background: url('/images/sprites/icons-a2ef041.png?1234678') no-repeat;
The exact image name is not something you should depend on as it may change based on the
arguments you pass in. Instead, you can use the `sprite-url()` function to create a
reference to the sprite map without generating the image again. Alternatively, simply
reference to the css sprite map without generating the image again. Alternatively, simply
using the sprite map variable in an property will have the same effect as calling
`sprite-url()`.
For each sprite in the sprite map you can control the position, spacing, and whether or
For each sprite in the css sprite map you can control the position, spacing, and whether or
not it repeats. You do this by passing arguments to this function that tell each sprite
how to behave. For instance if there is a icons/new.png then you can control it like so:
@ -91,8 +91,8 @@ documented_functions:
sprite-map-name(<span class="arg">$map</span>)
.details
:markdown
Returns the name of a sprite map
The name is derived from the folder than contains the sprites.
Returns the name of a css sprite map
The name is derived from the folder than contains the css sprites.
#sprite-file.helper
%h3

101
frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss
View File

@ -1,18 +1,18 @@
@import "compass/layout/grid-background";
// The base font size
// The base font size.
$base-font-size: 16px !default;
// The base line height is the basic unit of line hightness.
// The base line height determines the basic unit of vertical rhythm.
$base-line-height: 24px !default;
// set the default border style for rhythm borders
// Set the default border style for rhythm borders.
$default-rhythm-border-style: solid !default;
// The IE font ratio is a fact of life. Deal with it.
$ie-font-ratio: 16px / 100%;
// Set to false if you want to use absolute pixes in sizing your typography.
// Set to false if you want to use absolute pixels in sizing your typography.
$relative-font-sizing: true !default;
// Allows the `adjust-font-size-to` mixin and the `lines-for-font-size` function
@ -25,26 +25,26 @@ $round-to-nearest-half-line: false !default;
$min-line-padding: 2px !default;
// $base-font-size but in your output unit of choice.
// Defaults to 1em when `$relative-font-sizing`
// Defaults to 1em when `$relative-font-sizing` is true.
$font-unit: if($relative-font-sizing, 1em, $base-font-size) !default;
// The basic unit of font rhythm
// The basic unit of font rhythm.
$base-rhythm-unit: $base-line-height / $base-font-size * $font-unit;
// The leader is the amount of whitespace in a line.
// It might be useful in your calculations
// It might be useful in your calculations.
$base-leader: ($base-line-height - $base-font-size) * $font-unit / $base-font-size;
// The half-leader is the amount of whitespace above and below a line.
// It might be useful in your calculations
// It might be useful in your calculations.
$base-half-leader: $base-leader / 2;
// True if a number has a relative unit
// True if a number has a relative unit.
@function relative-unit($number) {
@return unit($number) == "%" or unit($number) == "em" or unit($number) == "rem"
}
// True if a number has an absolute unit
// True if a number has an absolute unit.
@function absolute-unit($number) {
@return not (relative-unit($number) or unitless($number));
}
@ -53,7 +53,7 @@ $base-half-leader: $base-leader / 2;
@warn "$relative-font-sizing is true but $font-unit is set to #{$font-unit} which is not a relative unit.";
}
// Establishes a font baseline for the given font-size in pixels
// Establishes a font baseline for the given font-size.
@mixin establish-baseline($font-size: $base-font-size) {
body {
font-size: $font-size / $ie-font-ratio;
@ -70,7 +70,7 @@ $base-half-leader: $base-leader / 2;
}
// Show a background image that can be used to debug your alignments.
// include the $img argument if you would rather use your own image than the
// Include the $img argument if you would rather use your own image than the
// Compass default gradient image.
@mixin debug-vertical-alignment($img: false) {
@if $img {
@ -80,11 +80,11 @@ $base-half-leader: $base-leader / 2;
}
}
// Adjust a block to have a different font size and leading to maintain the rhythm.
// $lines is a number that is how many times the baseline rhythm this
// font size should use up. Does not have to be an integer, but it defaults
// to the smallest integer that is large enough to fit the font.
// Use $from_size to adjust from a non-base font-size.
// Adjust a block to have a different font size and line height to maintain the
// rhythm. $lines specifies how many multiples of the baseline rhythm each line
// of this font should use up. It does not have to be an integer, but it
// defaults to the smallest integer that is large enough to fit the font.
// Use $from-size to adjust from a font-size other than the base font-size.
@mixin adjust-font-size-to($to-size, $lines: lines-for-font-size($to-size), $from-size: $base-font-size) {
@if not $relative-font-sizing and $from-size != $base-font-size {
@warn "$relative-font-sizing is false but a relative font size was passed to adjust-font-size-to";
@ -93,14 +93,15 @@ $base-half-leader: $base-leader / 2;
@include adjust-leading-to($lines, if($relative-font-sizing, $to-size, $base-font-size));
}
// Adjust a block to have different line height to maintain the rhythm.
// $lines specifies how many multiples of the baseline rhythm each line of this
// font should use up. It does not have to be an integer, but it defaults to the
// smallest integer that is large enough to fit the font.
@mixin adjust-leading-to($lines, $font-size: $base-font-size) {
@if not $relative-font-sizing and $font-size != $base-font-size {
@warn "$relative-font-sizing is false but a relative font size was passed to adjust-leading-to";
}
line-height: $font-unit * $lines * $base-line-height / $font-size;
line-height: rhythm($lines, $font-size);
}
// Calculate rhythm units
// Calculate rhythm units.
@function rhythm(
$lines: 1,
$font-size: $base-font-size
@ -109,9 +110,14 @@ $base-half-leader: $base-leader / 2;
@warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function";
}
$rhythm: $font-unit * $lines * $base-line-height / $font-size;
// Round the pixels down to nearest integer.
@if unit($rhythm) == px {
$rhythm: floor($rhythm);
}
@return $rhythm;
}
// Calculate the minimum multiple of rhythm units needed to contain the font-size.
@function lines-for-font-size($font-size) {
$lines: if($round-to-nearest-half-line,
ceil(2 * $font-size / $base-line-height) / 2,
@ -122,46 +128,37 @@ $base-half-leader: $base-leader / 2;
@return $lines;
}
// Apply leading whitespace
// Apply leading whitespace. The $property can be margin or padding.
@mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
$leader: rhythm($lines, $font-size);
@if unit($leader) == px {
$leader: floor($leader)
}
#{$property}-top: $leader;
#{$property}-top: rhythm($lines, $font-size);
}
// Apply leading whitespace as padding
// Apply leading whitespace as padding.
@mixin padding-leader($lines: 1, $font-size: $base-font-size) {
@include leader($lines, $font-size, padding);
padding-top: rhythm($lines, $font-size);
}
// Apply leading whitespace as margin
// Apply leading whitespace as margin.
@mixin margin-leader($lines: 1, $font-size: $base-font-size) {
@include leader($lines, $font-size, margin);
margin-top: rhythm($lines, $font-size);
}
// Apply trailing whitespace
// Apply trailing whitespace. The $property can be margin or padding.
@mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
$leader: rhythm($lines, $font-size);
@if unit($leader) == px {
$leader: ceil($leader)
}
#{$property}-bottom: $leader;
#{$property}-bottom: rhythm($lines, $font-size);
}
// Apply trailing whitespace as padding
// Apply trailing whitespace as padding.
@mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
@include trailer($lines, $font-size, padding);
padding-bottom: rhythm($lines, $font-size);
}
// Apply trailing whitespace as margin
// Apply trailing whitespace as margin.
@mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
@include trailer($lines, $font-size, margin);
margin-bottom: rhythm($lines, $font-size);
}
// Whitespace application shortcut
// Apply top margin/padding + bottom padding/margin
// Shorthand mixin to apply whitespace for top and bottom margins and padding.
@mixin rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size) {
@include leader($leader, $font-size);
@include padding-leader($padding-leader, $font-size);
@ -169,8 +166,8 @@ $base-half-leader: $base-leader / 2;
@include trailer($trailer, $font-size);
}
// Apply a border width to any side without destroying the vertical rhythm.
// The available space ($lines) must be greater than the width of your border.
// Apply a border and whitespace to any side without destroying the vertical
// rhythm. The whitespace must be greater than the width of the border.
@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@if not $relative-font-sizing and $font-size != $base-font-size {
@warn "$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border";
@ -182,33 +179,35 @@ $base-half-leader: $base-leader / 2;
padding-#{$side}: $font-unit / $font-size * ($lines * $base-line-height - $width);
}
// Aplly rhythm borders equally to all sides
// Apply borders and whitespace equally to all sides.
@mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@if not $relative-font-sizing and $font-size != $base-font-size {
@warn "$relative-font-sizing is false but a relative font size was passed to rhythm-borders";
}
border: {
style: $border-style;
width: $font-unit * $width / $font-size; };
width: $font-unit * $width / $font-size;
};
padding: $font-unit / $font-size * ($lines * $base-line-height - $width);
}
// Apply a leading rhythm border
// Apply a leading border.
@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style);
}
// Apply a trailing rhythm border
// Apply a trailing border.
@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style);
}
// Apply both leading and trailing rhythm borders
// Apply both leading and trailing borders.
@mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@include leading-border($width, $lines, $font-size, $border-style);
@include trailing-border($width, $lines, $font-size, $border-style);
}
// Alias for `horizontal-borders` mixin.
@mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@include horizontal-borders($width, $lines, $font-size, $border-style);
}

6
lib/compass/sass_extensions/functions/font_files.rb
View File

@ -5,7 +5,8 @@ module Compass::SassExtensions::Functions::FontFiles
:opentype => 'opentype',
:ttf => 'truetype',
:truetype => 'truetype',
:svg => 'svg'
:svg => 'svg',
:eot => 'embedded-opentype'
}
def font_files(*args)
@ -24,7 +25,8 @@ module Compass::SassExtensions::Functions::FontFiles
if FONT_TYPES.key? type
skip_next = true
else
type = arg.to_s.split('.').last.gsub('"', '').to_sym
# let pass url like font.type?thing#stuff
type = arg.to_s.split('.').last.gsub(/(\?(.*))?(#(.*))?"/, '').to_sym
end
if FONT_TYPES.key? type

12
test/units/sass_extensions_test.rb
View File

@ -126,6 +126,18 @@ class SassExtensionsTest < Test::Unit::TestCase
evaluate("font-files('/font/name.woff')")
end
assert_nothing_raised Sass::SyntaxError do
evaluate("font-files('/font/name.svg#fontId')")
end
assert_nothing_raised Sass::SyntaxError do
evaluate("font-files('/font/name.eot?#iefix')")
end
assert_nothing_raised Sass::SyntaxError do
evaluate("font-files('/font/name.svg?mightbedynamic=something%20+escaped#fontId')")
end
assert_raises Sass::SyntaxError do
evaluate("font-files('/font/name.ext')")
end