diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index 46916319..da8688a2 100644 --- a/doc-src/Gemfile.lock +++ b/doc-src/Gemfile.lock @@ -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) diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown index 2cbc0600..65d879db 100644 --- a/doc-src/content/CHANGELOG.markdown +++ b/doc-src/content/CHANGELOG.markdown @@ -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 diff --git a/doc-src/content/blog.haml b/doc-src/content/blog.haml new file mode 100644 index 00000000..e53a96c5 --- /dev/null +++ b/doc-src/content/blog.haml @@ -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] + + diff --git a/doc-src/content/help/tutorials/spriting.markdown b/doc-src/content/help/tutorials/spriting.markdown index d758917f..77169578 100644 --- a/doc-src/content/help/tutorials/spriting.markdown +++ b/doc-src/content/help/tutorials/spriting.markdown @@ -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; diff --git a/doc-src/content/posts/2011-04-18-v011-release.markdown b/doc-src/content/posts/2011-04-18-v011-release.markdown deleted file mode 100644 index 9d4337ba..00000000 --- a/doc-src/content/posts/2011-04-18-v011-release.markdown +++ /dev/null @@ -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, expect small point releases to adapt to new browser support and changes much more rapidly. By default, Compass provides out-of-the-box support for **all** modern and legacy browsers as far back as IE6 and Firefox 2. But if you want slimmer stylesheets, it is [simple to configure](/reference/compass/support/) which browser support we provide. - -In this release, we embraced the CSS3 syntax as much as possible. It might seem obvious, but the Compass convention is now that all CSS3 mixin arguments should match the CSS3 syntax for their corresponding properties so that you never have to *learn* a compass CSS3 mixin. If you ever find a case where this is not true, it is a bug and we would appreciate it if you would [provide the details in a bug report](http://github.com/chriseppstein/compass/issues). After upgrading, you will encounter a number of deprecation warnings guiding you through the syntax changes. - -### Gradients Evolved - -The best example of the changes in the CSS3 module are related to gradients. In Compass v0.10 we provided two simple mixins: `linear-gradient` and `radial-gradient` for setting the `background-image` property: - - .linear { - @include linear-gradient(#FFF, #000, color-stops(#C00 25%, #0C0 75%)) - } - -This syntax was inspired by the original webkit 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 \ No newline at end of file diff --git a/doc-src/content/posts/2011-04-24-v011-release.markdown b/doc-src/content/posts/2011-04-24-v011-release.markdown new file mode 100644 index 00000000..06c788f9 --- /dev/null +++ b/doc-src/content/posts/2011-04-24-v011-release.markdown @@ -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, expect small point releases to adapt to new browser support and changes much more rapidly. By default, Compass provides out-of-the-box support for **all** modern and legacy browsers as far back as IE6 and Firefox 2. But if you want slimmer stylesheets, it is [simple to configure](/reference/compass/support/) which browser support we provide. + +In this release, we embraced the CSS3 syntax as much as possible. It might seem obvious, but the Compass convention is now that all CSS3 mixin arguments should match the CSS3 syntax for their corresponding properties so that you never have to *learn* a compass CSS3 mixin. If you ever find a case where this is not true, it is a bug and we would appreciate it if you would [provide the details in a bug report](http://github.com/chriseppstein/compass/issues). After upgrading, you will encounter a number of deprecation warnings guiding you through the syntax changes. + +### Gradients Evolved + +The best example of the changes in the CSS3 module are related to gradients. In Compass v0.10 we provided two simple mixins: `linear-gradient` and `radial-gradient` for setting the `background-image` property: + + .linear { + @include linear-gradient(#FFF, #000, color-stops(#C00 25%, #0C0 75%)) + } + +This syntax was inspired by the original webkit gradient syntax but tried to simplify it to some extent. But the gradient specification has evolved and because gradients can be used anywhere an image can, so we now provide a mixin for each property that can accept gradients and the arguments +can be any legal CSS3 value for the that property: + + .linear { + @include background-image(linear-gradient(#FFF, #C00 25%, #0C0 75%, #000)) + } + +Which produces: + + .linear { + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(25%, #cc0000), color-stop(75%, #00cc00), color-stop(100%, #000000)); + background-image: -webkit-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000); + background-image: -moz-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000); + background-image: -o-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000); + background-image: linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000); + } + +## Dead Simple Sprites + +Spriting has never been easier with Compass. Nico Hagenburger joined the Compass team and we have built on his popular Lemonade plugin to make Compass sprites. Existing Lemonade users will need to upgrade. + +The way they work is you place the sprite images in a folder, +import them into your stylesheet, and then you can use the sprite in your selectors in one +of several convenient ways. + +For example, let's imagine that in your project's image folder there are four icons: + +* `/icon/new.png` +* `/icon/edit.png` +* `/icon/save.png` +* `/icon/delete.png` + +The simplest way to use these icon sprites is to let compass give you a class for each sprite: + + @import "icon/*.png"; + @include all-icon-sprites; + +And you'll get the following CSS output: + + .icon-sprite, + .icon-delete, + .icon-edit, + .icon-new, + .icon-save { background: url('/images/icon-34fe0604ab.png') no-repeat; } + + .icon-delete { background-position: 0 0; } + .icon-edit { background-position: 0 -32px; } + .icon-new { background-position: 0 -64px; } + .icon-save { background-position: 0 -96px; } + +You can now apply the `icon-XXX` classes to your markup as needed. + +Of course, this is Compass which means that underneath this simple veneer is a powerful system that you can use to customize your selectors and all kinds of other scenarios involving unicorns and rainbows. Get all the details in our [Spriting Tutorial](/help/tutorials/spriting/). + +## New Typography Module + +New in this release is a typography module. Many of our utility mixins related to typography have been moved here, but the really exciting development is the addition of the [vertical rhythm module](/reference/compass/typography/vertical_rhythm/). Based on [this excellent tutorial](http://24ways.org/2006/compose-to-a-vertical-rhythm) from 24ways, it is now simpler than ever to compose to a vertical rhythm. + +## Blueprint 1.0 + +Blueprint is 1.0 now and the Compass port is updated to match the changes there. Some of the changes that blueprint made might affect your design, so if you don't want to take this upgrade, you should unpack blueprint before you upgrade: + + compass unpack blueprint + +## New Website + +As you can see, we have a spiffy new website design from Compass Core team member [Brandon](http://brandonmathis.com). A testament to the separation of content and presentation, most of this redesign was done by throwing out our old stylesheets and building new ones. If you don't like the light text on dark background theme, you can turn on the lights by clicking the power button in the upper right hand corner of every page. + +## Much, Much More + +There's more features in this release than would fit into this post. Here's some other things you'll find in this release: + +* Custom directory and file watching (E.g. for pngcrush support) +* Compilation Callback support +* Trigonometric functions + +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. + + + + + + + + + + + + + + + + + + + + diff --git a/doc-src/layouts/blog.haml b/doc-src/layouts/blog.haml index 48886078..0f947e97 100644 --- a/doc-src/layouts/blog.haml +++ b/doc-src/layouts/blog.haml @@ -11,6 +11,12 @@ - if n %a{:href => n.rep_named(:default).path, :title => n[:title]} Next Post » #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] diff --git a/doc-src/layouts/partials/main-navigation.haml b/doc-src/layouts/partials/main-navigation.haml index e439ffe1..b6858d0b 100644 --- a/doc-src/layouts/partials/main-navigation.haml +++ b/doc-src/layouts/partials/main-navigation.haml @@ -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