Merge commit 'wolfr/docs' into docs
* commit 'wolfr/docs': Ported following pages from the github wiki to the docs: Adding Frameworks to Compass, Supported Frameworks, Compass Plugins. Added some styles where necessary so the content was readable. Used html2haml with some manual adjustment so likely not super perfect. Corrected metadata for current css3 examples so they show up in reference docs Make the docs a little more nicer looking to work in * Added examples for CSS3 transforms, transitions and gradients.
This commit is contained in:
Chris Eppstein
commit
4f6beead0a
104
doc-src/content/best_practices.haml
Normal file
104
doc-src/content/best_practices.haml
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
---
|
||||||
|
title: Best practices
|
||||||
|
crumb: Best practices
|
||||||
|
---
|
||||||
|
|
||||||
|
%h3
|
||||||
|
Use a Base stylesheet file
|
||||||
|
%p
|
||||||
|
Create a
|
||||||
|
%code
|
||||||
|
_base.sass
|
||||||
|
%a{ :href => "http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials" }
|
||||||
|
partial
|
||||||
|
to initialize your stylesheets with common variables and (
|
||||||
|
%a{ :href => "http://groups.google.com/group/compass-users/browse_frm/thread/0ed216d409476f88" }
|
||||||
|
often
|
||||||
|
) the framework utilities you plan to use:
|
||||||
|
%h4
|
||||||
|
_base.sass
|
||||||
|
%pre
|
||||||
|
\!blueprint_grid_columns = 24
|
||||||
|
\!blueprint_grid_width = 30px
|
||||||
|
\!blueprint_grid_margin = 10px
|
||||||
|
\!font_color = #333
|
||||||
|
\
|
||||||
|
@import compass/reset.sass
|
||||||
|
@import compass/utilities.sass
|
||||||
|
@import blueprint/screen.sass
|
||||||
|
\
|
||||||
|
\// etc.
|
||||||
|
%p
|
||||||
|
The
|
||||||
|
%code
|
||||||
|
_base.sass
|
||||||
|
file is also a great place to keep your own custom mixins, so they’re available to any stylesheet that includes it.
|
||||||
|
%p
|
||||||
|
Then you can include this file in all other stylesheets:
|
||||||
|
%h4
|
||||||
|
application.sass
|
||||||
|
%pre
|
||||||
|
@import base.sass
|
||||||
|
\
|
||||||
|
\#wrapper
|
||||||
|
\ +container
|
||||||
|
\
|
||||||
|
\// etc.
|
||||||
|
%p
|
||||||
|
It is important to define any compass/framework constants that you want to override in base.sass first, before @import-ing the framework files. See
|
||||||
|
%a{ :href => "http://wiki.github.com/chriseppstein/compass/overriding-constants" }
|
||||||
|
Overriding Constants
|
||||||
|
, for an example of where the number of grid columns for blueprint is overridden/set to 32.
|
||||||
|
%br
|
||||||
|
Note that you can refer to
|
||||||
|
%code
|
||||||
|
_base.sass
|
||||||
|
without the leading underscore, since it is a
|
||||||
|
%a{ :href => "http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials" }
|
||||||
|
partial
|
||||||
|
\.
|
||||||
|
%h3
|
||||||
|
Write your own Custom Mixins
|
||||||
|
%p
|
||||||
|
Mixins let you insert any number of style rules into a selector (and its descendants!) with a single line. This is a great way to
|
||||||
|
%a{ :href => "http://c2.com/cgi/wiki?DontRepeatYourself" }
|
||||||
|
%span.caps
|
||||||
|
DRY
|
||||||
|
up your stylesheet source code and make it much more maintainable. Using mixins will also make your stylesheet look like self-documented source code — like using descriptive method names in a programming language. It’s much more obvious to read something like
|
||||||
|
%code
|
||||||
|
+round_corners(6px, #f00)
|
||||||
|
than the whole list of rules which define that appearance.
|
||||||
|
%h4
|
||||||
|
Mixin Example
|
||||||
|
%pre
|
||||||
|
\// Mixin for the html element, so the footer stays at the bottom of the screen.
|
||||||
|
\// Relies on the following html structure, and a fixed-height #footer element:
|
||||||
|
\//
|
||||||
|
\// %body
|
||||||
|
\// #root
|
||||||
|
\// #root_footer
|
||||||
|
\// #footer
|
||||||
|
\
|
||||||
|
\=attach_footer( !footer_height )
|
||||||
|
\ :height 100%
|
||||||
|
\
|
||||||
|
body
|
||||||
|
\ :height 100%
|
||||||
|
\
|
||||||
|
\#root
|
||||||
|
\ :min-height 100%
|
||||||
|
\ :margin-bottom = -!footer_height
|
||||||
|
\
|
||||||
|
\#root_footer
|
||||||
|
\ :clear both
|
||||||
|
\ :height = !footer_height
|
||||||
|
\
|
||||||
|
\#footer
|
||||||
|
\ :clear both
|
||||||
|
\ :position relative
|
||||||
|
\ :height = !footer_height
|
||||||
|
%p
|
||||||
|
A single line is all that’s needed to use the mixin, which moves the implementation details out of the way and replaces them with a clear and concise label:
|
||||||
|
%pre
|
||||||
|
\html
|
||||||
|
\ +attach_footer( 54px )
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Border-radius
|
title: Border radius
|
||||||
description: css3 mixin for border-radius
|
description: css3 mixin for border-radius
|
||||||
framework: compass/css3
|
framework: compass
|
||||||
stylesheet: compass/css3/_border_radius.sass
|
stylesheet: compass/css3/_border_radius.sass
|
||||||
example: true
|
example: true
|
||||||
---
|
---
|
||||||
|
|||||||
@ -1 +1,49 @@
|
|||||||
#border-radius
|
%p
|
||||||
|
Box with all corners rounded
|
||||||
|
|
||||||
|
#border-radius.border-radius-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
Box with only top left corner rounded
|
||||||
|
|
||||||
|
#border-radius-top-left.border-radius-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
Box with only top right corner rounded
|
||||||
|
|
||||||
|
#border-radius-top-right.border-radius-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
Box with only bottom left corner rounded
|
||||||
|
|
||||||
|
#border-radius-bottom-left.border-radius-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
Box with only bottom right corner rounded
|
||||||
|
|
||||||
|
#border-radius-bottom-right.border-radius-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
Box with top corners rounded
|
||||||
|
|
||||||
|
#border-radiusTop.border-radius-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
Box with bottom corners rounded
|
||||||
|
|
||||||
|
#border-radius-bottom.border-radius-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
Box with left corners rounded
|
||||||
|
|
||||||
|
#border-radius-left.border-radius-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
Box with right corners rounded
|
||||||
|
|
||||||
|
#border-radius-right.border-radius-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
Box with different roundings for top/bottom and left/right
|
||||||
|
|
||||||
|
#border-radius-combo.border-radius-example
|
||||||
|
|||||||
@ -1,7 +1,40 @@
|
|||||||
@import compass/css3
|
@import compass/css3
|
||||||
|
|
||||||
|
.border-radius-example
|
||||||
|
width: 40px
|
||||||
|
height: 40px
|
||||||
|
background: red
|
||||||
|
margin: 20px
|
||||||
|
|
||||||
#border-radius
|
#border-radius
|
||||||
+border-radius('10px')
|
+border-radius("10px")
|
||||||
:width 40px
|
|
||||||
:height 40px
|
#border-radius-top-left
|
||||||
:background red
|
+border-top-left-radius("10px")
|
||||||
|
|
||||||
|
#border-radius-top-right
|
||||||
|
+border-top-right-radius("10px")
|
||||||
|
|
||||||
|
#border-radius-bottom-left
|
||||||
|
+border-bottom-left-radius("10px")
|
||||||
|
|
||||||
|
#border-radius-bottom-right
|
||||||
|
+border-bottom-right-radius("10px")
|
||||||
|
|
||||||
|
#border-radius-top
|
||||||
|
+border-top-radius("10px")
|
||||||
|
|
||||||
|
#border-radius-bottom
|
||||||
|
+border-bottom-radius("10px")
|
||||||
|
|
||||||
|
#border-radius-left
|
||||||
|
+border-left-radius("10px")
|
||||||
|
|
||||||
|
#border-radius-right
|
||||||
|
+border-right-radius("10px")
|
||||||
|
|
||||||
|
#border-radius-combo
|
||||||
|
+border-corner-radius("top", "left", "20px")
|
||||||
|
+border-corner-radius("top", "right", "5px")
|
||||||
|
+border-corner-radius("bottom", "left", "12px")
|
||||||
|
+border-corner-radius("bottom", "right", "28px")
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Box-shadow
|
title: Box-shadow
|
||||||
description: css3 mixin for box-shadow
|
description: css3 mixin for box-shadow
|
||||||
framework: compass/css3
|
framework: compass
|
||||||
stylesheet: compass/css3/_box_shadow.sass
|
stylesheet: compass/css3/_box_shadow.sass
|
||||||
example: true
|
example: true
|
||||||
---
|
---
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
#box-shadow-default
|
#box-shadow-default.box-shadow-example
|
||||||
|
|
||||||
#box-shadow-custom
|
#box-shadow-custom.box-shadow-example
|
||||||
@ -1,17 +1,15 @@
|
|||||||
@import compass/css3
|
@import compass/css3
|
||||||
|
|
||||||
|
.box-shadow-example
|
||||||
|
width: 40px
|
||||||
|
height: 40px
|
||||||
|
background: #EEE
|
||||||
|
margin: 20px
|
||||||
|
|
||||||
// Default box shadow
|
// Default box shadow
|
||||||
#box-shadow-default
|
#box-shadow-default
|
||||||
+box-shadow
|
+box-shadow
|
||||||
:width 40px
|
|
||||||
:height 40px
|
|
||||||
:background #EEE
|
|
||||||
:margin 20px
|
|
||||||
|
|
||||||
// Box shadow with custom settings
|
// Box shadow with custom settings
|
||||||
#box-shadow-custom
|
#box-shadow-custom
|
||||||
+box-shadow(red, 2px, 2px, 10px)
|
+box-shadow(red, 2px, 2px, 10px)
|
||||||
:width 40px
|
|
||||||
:height 40px
|
|
||||||
:background #EEE
|
|
||||||
:margin 20px
|
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Box-sizing
|
title: Box-sizing
|
||||||
description: css3 mixin for box-sizing
|
description: css3 mixin for box-sizing
|
||||||
framework: compass/css3
|
framework: compass
|
||||||
stylesheet: compass/css3/_box_sizing.sass
|
stylesheet: compass/css3/_box_sizing.sass
|
||||||
example: true
|
example: true
|
||||||
---
|
---
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
#contentBox
|
#content-box.box-sizing-example
|
||||||
|
|
||||||
#borderBox
|
#border-box.box-sizing-example
|
||||||
@ -1,17 +1,14 @@
|
|||||||
@import compass/css3
|
@import compass/css3
|
||||||
|
|
||||||
#contentBox
|
.box-sizing-example
|
||||||
+box-sizing('content-box')
|
background: red
|
||||||
:background red
|
padding: 20px
|
||||||
:padding 20px
|
border: 10px solid green
|
||||||
:border 10px solid green
|
margin: 20px
|
||||||
:margin 20px
|
width: 200px
|
||||||
:width 200px
|
|
||||||
|
|
||||||
#borderBox
|
#content-box
|
||||||
+box-sizing('border-box')
|
+box-sizing('content-box')
|
||||||
:background red
|
|
||||||
:padding 20px
|
#border-box
|
||||||
:border 10px solid green
|
+box-sizing('border-box')
|
||||||
:margin 20px
|
|
||||||
:width 200px
|
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Columns
|
title: Columns
|
||||||
description: css3 mixin for css columns
|
description: css3 mixin for css columns
|
||||||
framework: compass/css3
|
framework: compass
|
||||||
stylesheet: compass/css3/_columns.sass
|
stylesheet: compass/css3/_columns.sass
|
||||||
example: true
|
example: true
|
||||||
---
|
---
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
%div(id="twoColumn")
|
%div(id="two-column")
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
|
||||||
%div(id="threeColumn")
|
%div(id="three-column")
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
|
||||||
%div(id="fourColumnWithRule")
|
%div(id="four-column-with-rule")
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
|||||||
@ -1,17 +1,17 @@
|
|||||||
@import compass/css3
|
@import compass/css3
|
||||||
|
|
||||||
#twoColumn
|
#two-column
|
||||||
+column-count(2)
|
+column-count(2)
|
||||||
:width 300px
|
width: 300px
|
||||||
:margin-bottom 20px
|
margin-bottom: 20px
|
||||||
|
|
||||||
#threeColumn
|
#three-column
|
||||||
+column-count(3)
|
+column-count(3)
|
||||||
:width 300px
|
width: 300px
|
||||||
:margin-bottom 20px
|
margin-bottom: 20px
|
||||||
|
|
||||||
#fourColumnWithRule
|
#four-column-with-rule
|
||||||
+column-count(4)
|
+column-count(4)
|
||||||
+column-rule(1px, "solid", red)
|
+column-rule(1px, "solid", red)
|
||||||
:width 300px
|
width: 300px
|
||||||
:margin-bottom 20px
|
margin-bottom: 20px
|
||||||
8
doc-src/content/examples/compass/css3/gradient.haml
Normal file
8
doc-src/content/examples/compass/css3/gradient.haml
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
title: Gradient
|
||||||
|
description: css3 mixin for css gradients
|
||||||
|
framework: compass
|
||||||
|
stylesheet: compass/css3/_gradient.sass
|
||||||
|
example: true
|
||||||
|
---
|
||||||
|
= render "partials/example"
|
||||||
34
doc-src/content/examples/compass/css3/gradient/markup.haml
Normal file
34
doc-src/content/examples/compass/css3/gradient/markup.haml
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
%p
|
||||||
|
this box has no gradients
|
||||||
|
|
||||||
|
.gradient-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
This will yield a radial gradient with an apparent specular highlight
|
||||||
|
|
||||||
|
#radial-gradient.gradient-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
This yields a linear gradient spanning from !start to !end coordinates
|
||||||
|
|
||||||
|
#linear-gradient.gradient-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
This yields a gradient starting at the top with #fff, ending in #aaa
|
||||||
|
|
||||||
|
#v-gradient.gradient-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
Same as above but with a #ccc at the halfway point
|
||||||
|
|
||||||
|
#v-gradient-2.gradient-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top
|
||||||
|
|
||||||
|
#v-gradient-3.gradient-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
This yields a horizontal linear gradient spanning from left to right. It can be used just like v-gradient above
|
||||||
|
|
||||||
|
#h-gradient.gradient-example
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
@import compass/css3
|
||||||
|
|
||||||
|
.gradient-example
|
||||||
|
width: 80px
|
||||||
|
height: 80px
|
||||||
|
background: red
|
||||||
|
margin: 20px
|
||||||
|
|
||||||
|
// This will yield a radial gradient with an apparent specular highlight
|
||||||
|
#radial-gradient
|
||||||
|
+radial-gradient("45 45, 10, 52 50, 30", "Cyan", "DodgerBlue")
|
||||||
|
|
||||||
|
// This yields a linear gradient spanning from !start to !end coordinates
|
||||||
|
#linear-gradient
|
||||||
|
+linear-gradient("left top", "left bottom", #fff, #ddd)
|
||||||
|
|
||||||
|
// This yields a gradient starting at the top with #fff, ending in #aaa
|
||||||
|
#v-gradient
|
||||||
|
+v-gradient(#fff, #aaa)
|
||||||
|
|
||||||
|
// Same as above but with a #ccc at the halfway point
|
||||||
|
#v-gradient-2
|
||||||
|
+v-gradient(#fff, #aaa, color_stop(50%, #ccc))
|
||||||
|
|
||||||
|
// Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top
|
||||||
|
#v-gradient-3
|
||||||
|
+v-gradient(#fff, #aaa, color_stop(30%, #ccc, 70%, #bbb))
|
||||||
|
|
||||||
|
// This yields a horizontal linear gradient spanning from left to right. It can be used just like v-gradient above
|
||||||
|
#h-gradient
|
||||||
|
+h-gradient(#fff, #ddd)
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Inline-block
|
title: Inline-block
|
||||||
description: css3 mixin for inline-block
|
description: css3 mixin for inline-block
|
||||||
framework: compass/css3
|
framework: compass
|
||||||
stylesheet: compass/css3/_inline_block.sass
|
stylesheet: compass/css3/_inline_block.sass
|
||||||
example: true
|
example: true
|
||||||
---
|
---
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
@import compass/css3
|
@import compass/css3
|
||||||
|
|
||||||
#inline-block
|
#inline-block
|
||||||
+inline-block
|
+inline-block
|
||||||
:padding 4px 10px
|
padding: 4px 10px
|
||||||
:background red
|
background: red
|
||||||
:color white
|
color: white
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Opacity
|
title: Opacity
|
||||||
description: css3 mixin for opacity
|
description: css3 mixin for opacity
|
||||||
framework: compass/css3
|
framework: compass
|
||||||
stylesheet: compass/css3/_opacity.sass
|
stylesheet: compass/css3/_opacity.sass
|
||||||
example: true
|
example: true
|
||||||
---
|
---
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
#opacity10.opacityExample
|
#opacity-10.opacity-example
|
||||||
|
|
||||||
#opacity20.opacityExample
|
#opacity-20.opacity-example
|
||||||
|
|
||||||
#opacity50.opacityExample
|
#opacity-50.opacity-example
|
||||||
|
|
||||||
#opaque.opacityExample
|
#opaque.opacity-example
|
||||||
|
|
||||||
#transparent.opacityExample
|
#transparent.opacity-example
|
||||||
@ -1,22 +1,22 @@
|
|||||||
@import compass/css3
|
@import compass/css3
|
||||||
|
|
||||||
.opacityExample
|
.opacity-example
|
||||||
:background red
|
background: red
|
||||||
:width 40px
|
width: 40px
|
||||||
:height 40px
|
height: 40px
|
||||||
:float left
|
float: left
|
||||||
|
|
||||||
#opacity10
|
#opacity-10
|
||||||
+opacity(0.1)
|
+opacity(0.1)
|
||||||
|
|
||||||
#opacity20
|
#opacity-20
|
||||||
+opacity(0.2)
|
+opacity(0.2)
|
||||||
|
|
||||||
#opacity50
|
#opacity-50
|
||||||
+opacity(0.5)
|
+opacity(0.5)
|
||||||
|
|
||||||
#opaque
|
#opaque
|
||||||
+opaque
|
+opaque
|
||||||
|
|
||||||
#transparent
|
#transparent
|
||||||
+transparent
|
+transparent
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Text-shadow
|
title: Text-shadow
|
||||||
description: css3 mixin for text-shadow
|
description: css3 mixin for text-shadow
|
||||||
framework: compass/css3
|
framework: compass
|
||||||
stylesheet: compass/css3/_text_shadow.sass
|
stylesheet: compass/css3/_text_shadow.sass
|
||||||
example: true
|
example: true
|
||||||
---
|
---
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
this text has no shadow
|
this text has no shadow
|
||||||
|
|
||||||
#p
|
#p
|
||||||
%span(class="hasShadow") this text does have shadow
|
%span(class="has-shadow") this text has a shadow
|
||||||
|
|
||||||
#p
|
#p
|
||||||
%span(class="hasCustomShadow") this text has a custom shadow
|
%span(class="has-custom-shadow") this text has a custom shadow
|
||||||
@ -1,7 +1,7 @@
|
|||||||
@import compass/css3
|
@import compass/css3
|
||||||
|
|
||||||
.hasShadow
|
.has-shadow
|
||||||
+text-shadow
|
+text-shadow
|
||||||
|
|
||||||
.hasCustomShadow
|
.has-custom-shadow
|
||||||
+text-shadow(red, 3px, 3px, 0)
|
+text-shadow(red, 3px, 3px, 0)
|
||||||
8
doc-src/content/examples/compass/css3/transform.haml
Normal file
8
doc-src/content/examples/compass/css3/transform.haml
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
title: Transform
|
||||||
|
description: css3 mixin for css transforms
|
||||||
|
framework: compass
|
||||||
|
stylesheet: compass/css3/_transform.sass
|
||||||
|
example: true
|
||||||
|
---
|
||||||
|
= render "partials/example"
|
||||||
24
doc-src/content/examples/compass/css3/transform/markup.haml
Normal file
24
doc-src/content/examples/compass/css3/transform/markup.haml
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
%p
|
||||||
|
this div will change scale on hover
|
||||||
|
|
||||||
|
#scale.transform-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
this div will rotate on hover
|
||||||
|
|
||||||
|
#rotate.transform-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
this div will translate on hover
|
||||||
|
|
||||||
|
#translate.transform-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
this div will skew on hover
|
||||||
|
|
||||||
|
#skew.transform-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
this div will change scale, rotate, translate and skew on hover
|
||||||
|
|
||||||
|
#combo.transform-example
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
@import compass/css3
|
||||||
|
|
||||||
|
.transform-example
|
||||||
|
width: 40px
|
||||||
|
height: 40px
|
||||||
|
background: red
|
||||||
|
margin: 20px
|
||||||
|
|
||||||
|
#scale
|
||||||
|
+scale(1)
|
||||||
|
|
||||||
|
#scale:hover
|
||||||
|
+scale(2)
|
||||||
|
|
||||||
|
#rotate
|
||||||
|
+rotate(0)
|
||||||
|
|
||||||
|
#rotate:hover
|
||||||
|
+rotate(45)
|
||||||
|
|
||||||
|
#translate
|
||||||
|
+translate(0, 0)
|
||||||
|
|
||||||
|
#translate:hover
|
||||||
|
+translate(20px, 20px)
|
||||||
|
|
||||||
|
#skew
|
||||||
|
+skew(0, 0)
|
||||||
|
|
||||||
|
#skew:hover
|
||||||
|
+skew(20, 20)
|
||||||
|
|
||||||
|
#combo
|
||||||
|
+transform(1, 0, 0, 0, 0, 0)
|
||||||
|
|
||||||
|
#combo:hover
|
||||||
|
+transform(1, 45, 20px, 20px, 20, 20)
|
||||||
8
doc-src/content/examples/compass/css3/transition.haml
Normal file
8
doc-src/content/examples/compass/css3/transition.haml
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
title: Transition
|
||||||
|
description: css3 mixin for css transitions
|
||||||
|
framework: compass
|
||||||
|
stylesheet: compass/css3/_transition.sass
|
||||||
|
example: true
|
||||||
|
---
|
||||||
|
= render "partials/example"
|
||||||
19
doc-src/content/examples/compass/css3/transition/markup.haml
Normal file
19
doc-src/content/examples/compass/css3/transition/markup.haml
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
%p
|
||||||
|
this box has a width transition on hover
|
||||||
|
|
||||||
|
#width.transition-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
this box has a width transition on hover, with a set duration
|
||||||
|
|
||||||
|
#width-duration.transition-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
this box has a width transition on hover, with a set duration, and uses the 'easein' timing function
|
||||||
|
|
||||||
|
#width-duration-easein.transition-example
|
||||||
|
|
||||||
|
%p
|
||||||
|
this box has a few seconds delay, so wait a little before the transition occurs
|
||||||
|
|
||||||
|
#width-delay.transition-example
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
@import compass/css3
|
||||||
|
|
||||||
|
.transition-example
|
||||||
|
width: 40px
|
||||||
|
height: 40px
|
||||||
|
background: red
|
||||||
|
margin: 20px
|
||||||
|
|
||||||
|
#width
|
||||||
|
+transition-property('width')
|
||||||
|
|
||||||
|
#width:hover
|
||||||
|
width: 80px
|
||||||
|
|
||||||
|
#width-duration
|
||||||
|
+transition-property('width')
|
||||||
|
+transition-duration('2s')
|
||||||
|
|
||||||
|
#width-duration:hover
|
||||||
|
width: 80px
|
||||||
|
|
||||||
|
#width-duration-easein
|
||||||
|
+transition-property('width')
|
||||||
|
+transition-duration('2s')
|
||||||
|
+transition-timing-function('ease-in')
|
||||||
|
|
||||||
|
#width-duration-easein:hover
|
||||||
|
width: 80px
|
||||||
|
|
||||||
|
#width-delay
|
||||||
|
+transition-property('width')
|
||||||
|
+transition-delay('2s')
|
||||||
|
|
||||||
|
#width-delay:hover
|
||||||
|
width: 80px
|
||||||
205
doc-src/content/frameworks.haml
Normal file
205
doc-src/content/frameworks.haml
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
---
|
||||||
|
title: Plugins and frameworks
|
||||||
|
crumb: Plugins and frameworks
|
||||||
|
---
|
||||||
|
|
||||||
|
%h3
|
||||||
|
Adding Frameworks to Compass
|
||||||
|
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
Add a folder under
|
||||||
|
%code
|
||||||
|
compass/frameworks
|
||||||
|
%li
|
||||||
|
Register it by creating a file in
|
||||||
|
%code
|
||||||
|
compass/lib/compass/frameworks/
|
||||||
|
%li
|
||||||
|
Require it in
|
||||||
|
%code
|
||||||
|
compass/lib/compass/frameworks.rb
|
||||||
|
\.
|
||||||
|
|
||||||
|
%h3
|
||||||
|
Supported Frameworks
|
||||||
|
|
||||||
|
%table.datagrid
|
||||||
|
%tr
|
||||||
|
%th Framework
|
||||||
|
%th Version
|
||||||
|
%th Status
|
||||||
|
%th Homepage
|
||||||
|
%th Documentation
|
||||||
|
%tr
|
||||||
|
%td Compass Core
|
||||||
|
%td 0.10
|
||||||
|
%td pre5
|
||||||
|
%td
|
||||||
|
%a
|
||||||
|
http://compass-style.org
|
||||||
|
%td
|
||||||
|
You are currently vising the Compass docs.
|
||||||
|
%tr
|
||||||
|
%td Blueprint
|
||||||
|
%td 0.8.0
|
||||||
|
%td Stable
|
||||||
|
%td
|
||||||
|
%a
|
||||||
|
http://blueprintcss.org/
|
||||||
|
%td
|
||||||
|
%a{:href => "/docs/reference/blueprint/"}
|
||||||
|
Blueprint docs
|
||||||
|
%tr
|
||||||
|
%td YUI
|
||||||
|
%td 2.5.2
|
||||||
|
%td Beta
|
||||||
|
%td
|
||||||
|
%a
|
||||||
|
http://developer.yahoo.com/yui/grids/
|
||||||
|
%td
|
||||||
|
%a{:href => "/docs/reference/yui/"}
|
||||||
|
YUI docs
|
||||||
|
%tr
|
||||||
|
%td 960
|
||||||
|
%td 1.0
|
||||||
|
%td Stable
|
||||||
|
%td
|
||||||
|
%a
|
||||||
|
http://960.gs/
|
||||||
|
%td
|
||||||
|
%a{:href => "http://github.com/chriseppstein/compass-960-plugin"}
|
||||||
|
Compass960 plugin on Github
|
||||||
|
|
||||||
|
%h3
|
||||||
|
Compass plugins
|
||||||
|
|
||||||
|
%p
|
||||||
|
Compass allows you to easily download, install, and upgrade plugins that share design and design elements between users and projects.
|
||||||
|
|
||||||
|
%p
|
||||||
|
For instructions on how to install a plugin, please refer to the individual plugin's instructions.
|
||||||
|
|
||||||
|
%h3 Released Plugins
|
||||||
|
|
||||||
|
%h4 Frameworks
|
||||||
|
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/chriseppstein/compass-960-plugin" }
|
||||||
|
960.gs
|
||||||
|
– a lightweight CSS framework for producing fixed-width grid-based layouts
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/adamstac/grid-coordinates" }
|
||||||
|
Grid Coordinates
|
||||||
|
– a lightweight CSS framework for producing fixed-width grid-based layouts, based on
|
||||||
|
%a{ :href => "http://1kbgrid.com/" }
|
||||||
|
1KB CSS Grid
|
||||||
|
(which was loosely based on 960.gs). Supports nested grids.
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/alexcabrera/graphpaper" }
|
||||||
|
GraphPaper
|
||||||
|
– a lightweight CSS framework for producing fixed-width grid-based layouts
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/tdreyno/compass-baseline" }
|
||||||
|
Baseline
|
||||||
|
– a CSS framework for producing grid-based layouts (up to 8 columns) with typography. See
|
||||||
|
%a{ :href => "http://baselinecss.com/" }
|
||||||
|
http://baselinecss.com/
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/bangpound/compass-drupal-zen-plugin" }
|
||||||
|
Drupal Zen
|
||||||
|
– adds the Drupal Zen theme STARTERKIT to Compass
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/ericam/compass-susy-plugin" }
|
||||||
|
Susy
|
||||||
|
– a semantic CSS framework creator. Susy is an expert at fluid grids in an elastic (or fluid, or fixed) shell that will never activate the horizontal scroll bar.
|
||||||
|
|
||||||
|
%h3
|
||||||
|
Colors
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/chriseppstein/compass-colors" }
|
||||||
|
Compass Colors
|
||||||
|
– for working with colors in Sass, and generating color themes
|
||||||
|
|
||||||
|
%h3
|
||||||
|
Widgets
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/imathis/fancy-buttons" }
|
||||||
|
Fancy Buttons
|
||||||
|
–
|
||||||
|
%a{ :href => "http://sass-lang.com/tutorial.html#mixins" }
|
||||||
|
mixins
|
||||||
|
to get beautiful buttons with
|
||||||
|
%span.caps
|
||||||
|
CSS
|
||||||
|
gradients that degrade nicely. Uses Compass Colors.
|
||||||
|
|
||||||
|
%h3
|
||||||
|
Misc
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/tdreyno/compass-slickmap" }
|
||||||
|
Slickmap
|
||||||
|
– plugin for
|
||||||
|
%a{ :href => "http://astuteo.com/slickmap/" }
|
||||||
|
slickmap
|
||||||
|
sitemaps
|
||||||
|
|
||||||
|
%h3
|
||||||
|
Sass Libraries
|
||||||
|
%p
|
||||||
|
Libraries are simply Sass stylesheets or
|
||||||
|
%a{ :href => "http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials" }
|
||||||
|
partials
|
||||||
|
\.
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/handcrafted/handcrafted-compass-mixins/blob/master/_border-radius.sass" }
|
||||||
|
Handcrafted Rounded Corners
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/ntreadway/JQuery.tools.tabs.sass" }
|
||||||
|
Ntreadway JQuery tools tabs
|
||||||
|
%h3
|
||||||
|
Plugins that are Works-In-Progress
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/hpoydar/compass-aristo-plugin" }
|
||||||
|
Aristo
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/marnen/compass-elastic-plugin" }
|
||||||
|
Elastic
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/jtoy/compass-fluid960-plugin" }
|
||||||
|
Fluid 960
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/kosmas58/compass-jquery-plugin" }
|
||||||
|
jQuery
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/djmaze/compass-yaml-plugin" }
|
||||||
|
%span.caps
|
||||||
|
YAML
|
||||||
|
|
||||||
|
%h3
|
||||||
|
Other Sass-based Projects
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/jazen/css" }
|
||||||
|
Jazen’s
|
||||||
|
%span.caps
|
||||||
|
CSS
|
||||||
|
Framework
|
||||||
|
– Sass library that
|
||||||
|
%em
|
||||||
|
should
|
||||||
|
be a compass plugin.
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/teejayvanslyke/sassafras" }
|
||||||
|
Sassafras
|
||||||
|
– Color Scheme Generator for Sass
|
||||||
|
%li
|
||||||
|
%a{ :href => "http://github.com/danboy/tenplate" }
|
||||||
|
Tenplate
|
||||||
|
– Another Sass library with rails helpers.
|
||||||
@ -3,7 +3,7 @@ title: Compass Documentation
|
|||||||
crumb: Docs
|
crumb: Docs
|
||||||
body_id: home
|
body_id: home
|
||||||
---
|
---
|
||||||
%h1 Compass
|
%h1#logo Compass
|
||||||
|
|
||||||
%p
|
%p
|
||||||
Compass is a stylesheet authoring tool that uses the Sass stylesheet
|
Compass is a stylesheet authoring tool that uses the Sass stylesheet
|
||||||
|
|||||||
0
doc-src/content/stylesheets/main.css
Normal file
0
doc-src/content/stylesheets/main.css
Normal file
@ -1,15 +1,15 @@
|
|||||||
@import blueprint/reset
|
|
||||||
@import compass/utilities
|
@import compass/utilities
|
||||||
@import compass/css3
|
@import compass/css3
|
||||||
|
|
||||||
@import blueprint
|
@import blueprint
|
||||||
|
|
||||||
body
|
body
|
||||||
font-family: "Lucida Sans", "Lucida Grande", Lucida, sans-serif
|
font-family: "Lucida Sans", "Lucida Grande", Lucida, sans-serif
|
||||||
line-height: 1.5
|
line-height: 1.5
|
||||||
|
font-size: 13px
|
||||||
|
|
||||||
|
// Layout
|
||||||
#container
|
#container
|
||||||
+container
|
+pie-clearfix
|
||||||
|
|
||||||
#main
|
#main
|
||||||
+column(16, true)
|
+column(16, true)
|
||||||
@ -18,11 +18,43 @@ body
|
|||||||
#sidebar
|
#sidebar
|
||||||
+column(8)
|
+column(8)
|
||||||
+pull(24, true)
|
+pull(24, true)
|
||||||
|
background: #F5F5F5
|
||||||
|
h2
|
||||||
|
font-size: 16px
|
||||||
|
ul
|
||||||
|
padding: 5px
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
|
||||||
|
blockquote
|
||||||
|
:font-style italic
|
||||||
|
|
||||||
|
hr
|
||||||
|
:background none
|
||||||
|
:height 0
|
||||||
|
:font-size 0
|
||||||
|
:line-height 0
|
||||||
|
:border none
|
||||||
|
:border-top 2px solid #CCC
|
||||||
|
|
||||||
|
// Regular data tables
|
||||||
|
table.datagrid
|
||||||
|
border-collapse: collapse
|
||||||
|
th
|
||||||
|
:background #EEE
|
||||||
|
td,
|
||||||
|
th
|
||||||
|
border: 1px solid #CCC
|
||||||
|
text-align: left
|
||||||
|
padding: 5px
|
||||||
|
cell-spacing: 0
|
||||||
|
|
||||||
|
// Reference
|
||||||
|
|
||||||
body.reference
|
body.reference
|
||||||
h3.mixin
|
h3.mixin
|
||||||
background-color: #eee
|
background-color: #eee
|
||||||
border: 3px solid #aaa
|
border: 1px solid #aaa
|
||||||
padding: 0.75em
|
padding: 0.75em
|
||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
a.permalink
|
a.permalink
|
||||||
@ -30,7 +62,7 @@ body.reference
|
|||||||
+link-colors("inherit", "inherit")
|
+link-colors("inherit", "inherit")
|
||||||
.source-documentation
|
.source-documentation
|
||||||
background-color: #eee
|
background-color: #eee
|
||||||
border: 3px solid #aaa
|
border: 1px solid #aaa
|
||||||
border-top-width: 0
|
border-top-width: 0
|
||||||
padding: 0.75em
|
padding: 0.75em
|
||||||
a.view-source
|
a.view-source
|
||||||
@ -67,8 +99,8 @@ body.reference
|
|||||||
|
|
||||||
table.constants
|
table.constants
|
||||||
width: 100%
|
width: 100%
|
||||||
+alternating-rows-and-columns(#eee, #bbb, #191919)
|
+alternating-rows-and-columns(#EEE, #bbb, #191919)
|
||||||
+outer-table-borders(2px)
|
+outer-table-borders(1px)
|
||||||
+inner-table-borders(1px)
|
+inner-table-borders(1px)
|
||||||
td, th
|
td, th
|
||||||
padding: 0.25em 0.5em
|
padding: 0.25em 0.5em
|
||||||
@ -82,6 +114,6 @@ ol#breadcrumbs
|
|||||||
content: ""
|
content: ""
|
||||||
li.last
|
li.last
|
||||||
visibility: hidden
|
visibility: hidden
|
||||||
body#home h1
|
body#home #logo
|
||||||
+replace-text("compass.png", 0px)
|
+replace-text("compass.png", 0px)
|
||||||
height: 159px
|
height: 159px
|
||||||
@ -1,5 +1,23 @@
|
|||||||
%h2
|
%h2
|
||||||
Compass Documentation
|
Compass Documentation
|
||||||
|
|
||||||
|
%h3
|
||||||
|
General
|
||||||
|
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
%a{:href => "/docs/"}
|
||||||
|
Home
|
||||||
|
%li
|
||||||
|
%a{:href => "/docs/best_practices/"}
|
||||||
|
Best practices
|
||||||
|
%li
|
||||||
|
%a{:href => "/docs/frameworks/"}
|
||||||
|
Working with plugins and frameworks
|
||||||
|
|
||||||
|
%h3
|
||||||
|
Frameworks
|
||||||
|
|
||||||
%ul
|
%ul
|
||||||
= item_tree(reference_item(:stylesheet => "_blueprint.sass"))
|
= item_tree(reference_item(:stylesheet => "_blueprint.sass"))
|
||||||
= item_tree(reference_item(:stylesheet => "_compass.sass"))
|
= item_tree(reference_item(:stylesheet => "_compass.sass"))
|
||||||
|
|||||||
@ -10,4 +10,4 @@
|
|||||||
|
|
||||||
= render "partials/reference/constants"
|
= render "partials/reference/constants"
|
||||||
|
|
||||||
= render "partials/reference/mixins"
|
= render "partials/reference/mixins"
|
||||||
Loading…
Reference in New Issue
Block a user