diff --git a/doc-src/content/reference/compass/css3/box_shadow_v2.haml b/doc-src/content/reference/compass/css3/box_shadow_v2.haml index e2e1bdbf..f11bd9ed 100644 --- a/doc-src/content/reference/compass/css3/box_shadow_v2.haml +++ b/doc-src/content/reference/compass/css3/box_shadow_v2.haml @@ -5,6 +5,7 @@ framework: compass stylesheet: compass/css3/_box-shadow-v2.scss meta_description: Specify the box shadow for all browsers. layout: core +beta: true classnames: - reference - core diff --git a/doc-src/content/reference/compass/css3/images.haml b/doc-src/content/reference/compass/css3/images.haml index ddcb411f..5436dadb 100644 --- a/doc-src/content/reference/compass/css3/images.haml +++ b/doc-src/content/reference/compass/css3/images.haml @@ -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 diff --git a/doc-src/content/reference/compass/css3/pie.haml b/doc-src/content/reference/compass/css3/pie.haml new file mode 100644 index 00000000..5f5f5990 --- /dev/null +++ b/doc-src/content/reference/compass/css3/pie.haml @@ -0,0 +1,78 @@ +--- +title: CSS3 Pie +crumb: CSS3 Pie +framework: compass +stylesheet: compass/css3/_pie.scss +meta_description: Compass integration with the css3pie tool. +layout: core +classnames: + - reference + - core + - css3 +--- +- render 'reference' do + :markdown + ### Installing + + CSS PIE is a javascript library that enhances Internet Explorer + to render many modern CSS3 capabilities wherever possible. To install: + + compass install compass/pie + + This will install an example stylesheet and a PIE.htc behavior file + that must be loaded into your pages for IE. This file must be delivered + with the following mime-type: + + Content-Type: text/x-component + + ### Conventions + + The example stylesheet will walk you through setting up your project with + css3pie support. + + ### Properties Supported + + The following css3 properties are supported: + + * border-radius + * box-shadow + * border-image + * background (in the form of -pie-background, use the [background mixin](/docs/reference/compass/css3/images/#mixin-background)) + + Additionally, PIE supports the following CSS3 features: + + * rgba color values + * linear gradients in backgrounds + + [Full Documentation on Supported Properties](http://css3pie.com/documentation/supported-css3-features/) + + ### Caveats + + 1. PIE only understands shortcut properties, long-hand properties don't + work because the code, in order to be fast, does not attempt to resolve + the stylesheet cascade and so it cannot determine which order to apply + the long-hand properties. + 2. Each element that has a PIE behavior attached adds about 10ms to + the page render time. Moderation is recommended. + 3. PIE generates content that contains the css3 graphical elements. It has to + insert this content into your page and so it needs a little help from + you. You have two choices: + 1. You can make your element `position: relative`. + 2. You can give your element a z-index. If you do this you + should also give apply a z-index to an ancestor element that comes before + or itself has a background. + The compass mixins below and the example stylesheet will help get you set up. + + ### Best Practices + + It is suggested that you use Sass's `@extend` directive to mark elements as + PIE elements. The example stylesheet you get when you install `compass/pie` + into your project will walk you through the process of setting that up. + + ### Notes + + * For more information see the [css3pie website](http://css3pie.com/). + * CSS PIE is written by and copyright to: [Jason Johnston](http://twitter.com/lojjic) + * Compass is using css3pie version 1.0-beta2. It can be upgraded by downloading + a new behavior file and replacing the one that comes with compass. + \ No newline at end of file diff --git a/doc-src/content/reference/compass/css3/text-shadow-v2.haml b/doc-src/content/reference/compass/css3/text-shadow-v2.haml index 1e87346f..e7b8499d 100644 --- a/doc-src/content/reference/compass/css3/text-shadow-v2.haml +++ b/doc-src/content/reference/compass/css3/text-shadow-v2.haml @@ -4,6 +4,7 @@ crumb: Text Shadow (v2) framework: compass stylesheet: compass/css3/_text-shadow-v2.scss meta_description: Specify the text shadow for all browsers. +beta: true layout: core classnames: - reference diff --git a/doc-src/content/reference/compass/css3/transform-v2.haml b/doc-src/content/reference/compass/css3/transform-v2.haml index 2ab863f2..c0709dca 100644 --- a/doc-src/content/reference/compass/css3/transform-v2.haml +++ b/doc-src/content/reference/compass/css3/transform-v2.haml @@ -5,6 +5,7 @@ framework: compass stylesheet: compass/css3/_transform-v2.scss meta_description: Specify the 2D transformation for all browsers. layout: core +beta: true classnames: - reference - core diff --git a/doc-src/content/stylesheets/partials/_sidebar.scss b/doc-src/content/stylesheets/partials/_sidebar.scss index 167de6fa..b9ab5a1c 100644 --- a/doc-src/content/stylesheets/partials/_sidebar.scss +++ b/doc-src/content/stylesheets/partials/_sidebar.scss @@ -15,4 +15,7 @@ aside { .deprecated { text-decoration: line-through; } + .beta span:after { + content: " (\3B2)"; + } } \ No newline at end of file diff --git a/doc-src/layouts/partials/sidebar/item.haml b/doc-src/layouts/partials/sidebar/item.haml index 4a829ea0..8ff2f4f9 100644 --- a/doc-src/layouts/partials/sidebar/item.haml +++ b/doc-src/layouts/partials/sidebar/item.haml @@ -1,4 +1,4 @@ -- classes = [("selected" if @selected), ("deprecated" if @current_item[:deprecated])].compact.join(" ") +- classes = [("selected" if @selected), ("deprecated" if @current_item[:deprecated]), ("beta" if @current_item[:beta])].compact.join(" ") %li{:class => classes} %a{:href => default_path(@current_item), :class => classes} %span= @crumb diff --git a/doc-src/layouts/reference.haml b/doc-src/layouts/reference.haml index f577c504..ff2026a6 100644 --- a/doc-src/layouts/reference.haml +++ b/doc-src/layouts/reference.haml @@ -1,5 +1,9 @@ %h1= item[:title] +- if item[:beta] + %p.beta + This module is fairly new and is currently in BETA (β). + = yield %p