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

v0.11 release posting and docs cleanup.

Browse Source
This commit is contained in:
Chris Eppstein 2011-04-24 22:11:06 -07:00
parent 28ccff0fba
commit bb53c8c34b
8 changed files with 172 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
doc-src/Gemfile.lock
View File

@ -8,8 +8,8 @@ GIT
PATH
remote: ..
specs:
compass (0.11.beta.7.f4ac295)
chunky_png (~> 1.1.0)
compass (0.11.beta.7.28ccff0)
chunky_png (~> 1.1.1)
fssm (>= 0.2.7)
sass (>= 3.1.0.alpha.249)
@ -17,7 +17,7 @@ GEM
remote: http://rubygems.org/
specs:
activesupport (3.0.5)
chunky_png (1.1.0)
chunky_png (1.1.1)
coderay (0.9.7)
compass-susy-plugin (0.9.beta.3)
compass (>= 0.11.beta.3)

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

@ -14,7 +14,7 @@ The Documentation for the [latest stable release](http://compass-style.org/docs/
The Documentation for the [latest preview release](http://beta.compass-style.org/)
0.11.0 (UNRELEASED)
0.11.0 (04/24/2011)
-------------------
This changelog entry is aggregated across all the v0.11 beta releases.
@ -39,6 +39,8 @@ If you're upgrading from a previous beta v0.11 beta release, you can read
* Some blueprint color defaults now use color functions instead of color arithmetic.
This may result in different output for those who have color customizations.
* The deprecated & unused arguments to the `font-face` mixin have been removed.
* Lemonade has been merged into compass. If you've been using Lemonade, you need to
upgrade your sprites to use the new [Compass Sprites](/help/tutorials/spriting/).
#### Dependencies

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

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

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

@ -7,7 +7,7 @@ classnames:
---
# Spriting with Compass
Spriting has never been easier with Compass. You place the sprite images to be in a folder,
Spriting has never been easier with Compass. You place the sprite images in a folder,
import them into your stylesheet, and then you can use the sprite in your selectors in one
of several convenient ways.
@ -25,7 +25,6 @@ Each is an icon that is 32px square.
## Basic Usage
The simplest way to use these icon sprites is to let compass give you a class for each sprite:
@import "compass/utilities/sprites";
@import "icon/*.png";
@include all-icon-sprites;

50
doc-src/content/posts/2011-04-18-v011-release.markdown
View File

@ -1,50 +0,0 @@
---
title: "Compass v0.11 is Released!"
description: "Months in the making, Compass v0.11 continues to revolutionize CSS Frameworks."
author: chris
---
The Compass team is proud to announce that v0.11 is released. With this release, Compass & Sass continue to revolutionize the world of CSS Frameworks bringing never-before-seen features and unmatched simplicity, quality, and flexibility to your stylesheets.
## Embracing CSS3
The power and flexibility of CSS3 is well known and web developers and designers are finding many new and interesting ways to take advantage of it. In Compass v0.11 we have revisited each CSS3 feature to ensure the greatest ease of use and similarity to CSS3 syntax. The compass internals for managing cross-browser compatibility have been rewritten to provide a powerful platform for moving as fast as the browser implementors are. Going forward, <span style="text-decoration: underline;">expect small point releases to adapt to new browser support and changes much more rapidly</span>. By default, Compass provides out-of-the-box support for **all** modern and legacy browsers as far back as IE6 and Firefox 2. But if you want slimmer stylesheets, it is [simple to configure](/reference/compass/support/) which browser support we provide.
In this release, we embraced the CSS3 syntax as much as possible. It might seem obvious, but the Compass convention is now that all CSS3 mixin arguments should match the CSS3 syntax for their corresponding properties so that you never have to *learn* a compass CSS3 mixin. If you ever find a case where this is not true, it is a bug and we would appreciate it if you would [provide the details in a bug report](http://github.com/chriseppstein/compass/issues). After upgrading, you will encounter a number of deprecation warnings guiding you through the syntax changes.
### Gradients Evolved
The best example of the changes in the CSS3 module are related to gradients. In Compass v0.10 we provided two simple mixins: `linear-gradient` and `radial-gradient` for setting the `background-image` property:
.linear {
@include linear-gradient(#FFF, #000, color-stops(#C00 25%, #0C0 75%))
}
This syntax was inspired by the original webkit syntax gradients but tried to simplify it to some extent. But the gradient specification has evolved, since gradients can be used anywhere an image can, so we now provide a mixin for each property that can accept gradients and the arguments
can be any legal CSS3 value for the that property:
.linear {
@include background-image(linear-gradient(#FFF, #C00 25%, #0C0 75%, #000))
}
Which produces:
.linear {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(25%, #cc0000), color-stop(75%, #00cc00), color-stop(100%, #000000));
background-image: -webkit-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
background-image: -moz-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
background-image: -o-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
background-image: linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
}
## New Typography Module
New in this release is a typography module. Many of our utility mixins related to typography have been moved here, but the really exciting development is the addition of the [vertical rhythm module](/reference/compass/typography/vertical_rhythm/). Based on [this excellent tutorial](http://24ways.org/2006/compose-to-a-vertical-rhythm) from 24ways, it is now simpler than ever to compose to a vertical rhythm.
## Blueprint 1.0
Blueprint is 1.0 now and the Compass port is updated to match the changes there. Some of the changes that blueprint made might affect your design, so if you don't want to take this upgrade, you should unpack blueprint before you upgrade:
compass unpack blueprint
T

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

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

6
doc-src/layouts/blog.haml
View File

@ -11,6 +11,12 @@
- if n
%a{:href => n.rep_named(:default).path, :title => n[:title]} Next Post &raquo;
#page
#docs_panel
#theme_pref
%a{:href => "#", :rel => "theme", :title => "switch theme" } Q
#version
Version:
%a.number(href="/CHANGELOG/")= compass_version
= yield
%footer(role="contentinfo")= render "partials/footer"
= @item[:content_for_javascripts]

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

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