Add beta indicator for new modules
This commit is contained in:
parent
6553e06db6
commit
88275d1281
@ -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
|
||||||
|
@ -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
|
||||||
|
78
doc-src/content/reference/compass/css3/pie.haml
Normal file
78
doc-src/content/reference/compass/css3/pie.haml
Normal 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.
|
||||||
|
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -15,4 +15,7 @@ aside {
|
|||||||
.deprecated {
|
.deprecated {
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
|
.beta span:after {
|
||||||
|
content: " (\3B2)";
|
||||||
|
}
|
||||||
}
|
}
|
@ -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
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user