Add beta indicator for new modules

This commit is contained in:
Chris Eppstein 2010-11-20 08:23:06 -08:00
parent 6553e06db6
commit 88275d1281
8 changed files with 90 additions and 1 deletions

View File

@ -5,6 +5,7 @@ framework: compass
stylesheet: compass/css3/_box-shadow-v2.scss stylesheet: compass/css3/_box-shadow-v2.scss
meta_description: Specify the box shadow for all browsers. meta_description: Specify the box shadow for all browsers.
layout: core layout: core
beta: true
classnames: classnames:
- reference - reference
- core - core

View File

@ -5,6 +5,7 @@ framework: compass
stylesheet: compass/css3/_images.scss stylesheet: compass/css3/_images.scss
meta_description: Specify linear gradients and radial gradients for many browsers. meta_description: Specify linear gradients and radial gradients for many browsers.
layout: core layout: core
beta: true
classnames: classnames:
- reference - reference
- core - core

View File

@ -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.

View File

@ -4,6 +4,7 @@ crumb: Text Shadow (v2)
framework: compass framework: compass
stylesheet: compass/css3/_text-shadow-v2.scss stylesheet: compass/css3/_text-shadow-v2.scss
meta_description: Specify the text shadow for all browsers. meta_description: Specify the text shadow for all browsers.
beta: true
layout: core layout: core
classnames: classnames:
- reference - reference

View File

@ -5,6 +5,7 @@ framework: compass
stylesheet: compass/css3/_transform-v2.scss stylesheet: compass/css3/_transform-v2.scss
meta_description: Specify the 2D transformation for all browsers. meta_description: Specify the 2D transformation for all browsers.
layout: core layout: core
beta: true
classnames: classnames:
- reference - reference
- core - core

View File

@ -15,4 +15,7 @@ aside {
.deprecated { .deprecated {
text-decoration: line-through; text-decoration: line-through;
} }
.beta span:after {
content: " (\3B2)";
}
} }

View File

@ -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} %li{:class => classes}
%a{:href => default_path(@current_item), :class => classes} %a{:href => default_path(@current_item), :class => classes}
%span= @crumb %span= @crumb

View File

@ -1,5 +1,9 @@
%h1= item[:title] %h1= item[:title]
- if item[:beta]
%p.beta
This module is fairly new and is currently in BETA (β).
= yield = yield
%p %p