Upgrade docs to work on sass 3
This commit is contained in:
Chris Eppstein
parent
09abca682c
commit
cd78ca56c4
@ -2,7 +2,7 @@
|
||||
title: Blueprint Pull Example
|
||||
description: Uses pull to change the display order of columns.
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_grid.sass
|
||||
stylesheet: blueprint/_grid.scss
|
||||
mixin: pull
|
||||
example: true
|
||||
---
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
---
|
||||
---
|
||||
!blueprint_grid_columns = 3
|
||||
$blueprint_grid_columns : 3
|
||||
|
||||
@import blueprint/grid.sass
|
||||
@import blueprint/grid.scss
|
||||
|
||||
#one
|
||||
+column(2, true)
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Two Column Layout
|
||||
description: A semantic two-column layout
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_grid.sass
|
||||
stylesheet: blueprint/_grid.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
@ -1,5 +1,5 @@
|
||||
!blueprint_grid_columns = 8
|
||||
!blueprint_grid_width = 40px
|
||||
$blueprint_grid_columns : 8
|
||||
$blueprint_grid_width : 40px
|
||||
|
||||
@import blueprint
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Background Clip
|
||||
description: See background-clip in action.
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_background_clip.sass
|
||||
stylesheet: compass/css3/_background-clip.scss
|
||||
example: true
|
||||
---
|
||||
- render "partials/example" do
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import compass/css3.sass
|
||||
@import compass/css3.scss
|
||||
.example
|
||||
padding: 2em
|
||||
div
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Background Origin
|
||||
description: See background-origin in action.
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_background_origin.sass
|
||||
stylesheet: compass/css3/_background-origin.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
padding: 2em
|
||||
div
|
||||
background:
|
||||
image= image-url("examples/css3/bg-origin/bg.png")
|
||||
image: image-url("examples/css3/bg-origin/bg.png")
|
||||
repeat: repeat
|
||||
position: top left
|
||||
border: 10px solid rgba(255, 0, 0, 0.5)
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Background Size
|
||||
description: See background-size in action.
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_background_size.sass
|
||||
stylesheet: compass/css3/_background-size.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
padding: 2em
|
||||
div
|
||||
background:
|
||||
image= image-url("examples/css3/bg-origin/bg.png")
|
||||
image: image-url("examples/css3/bg-origin/bg.png")
|
||||
repeat: no-repeat
|
||||
position: top left
|
||||
border: 10px solid rgba(255, 0, 0, 0.5)
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Border radius
|
||||
description: css3 mixin for border-radius
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_border_radius.sass
|
||||
stylesheet: compass/css3/_border-radius.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
@ -2,7 +2,7 @@
|
||||
title: Box-shadow
|
||||
description: css3 mixin for box-shadow
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_box_shadow.sass
|
||||
stylesheet: compass/css3/_box-shadow.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
@ -2,7 +2,7 @@
|
||||
title: Box-sizing
|
||||
description: css3 mixin for box-sizing
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_box_sizing.sass
|
||||
stylesheet: compass/css3/_box-sizing.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
@ -2,7 +2,7 @@
|
||||
title: Columns
|
||||
description: css3 mixin for css columns
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_columns.sass
|
||||
stylesheet: compass/css3/_columns.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Font Face Example
|
||||
description: How to use the @font-face mixin
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_font_face.sass
|
||||
stylesheet: compass/css3/_font-face.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import compass/css3
|
||||
|
||||
+font-face("Angelina", font_files("examples/angelina.ttf", "truetype"))
|
||||
+font-face("Angelina", font-files("examples/angelina.ttf", "truetype"))
|
||||
.example
|
||||
font-family: "Angelina"
|
||||
padding: 1em
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Gradient
|
||||
description: css3 mixin for css gradients
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_gradient.sass
|
||||
stylesheet: compass/css3/_gradient.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
@ -8,24 +8,24 @@
|
||||
|
||||
// This will yield a radial gradient with an apparent specular highlight
|
||||
#radial-gradient
|
||||
+radial-gradient(color_stops(#00FFFF 10px, #1E90FF 30px), 45 45)
|
||||
+radial-gradient(color-stops(#00FFFF 10px, #1E90FF 30px), 45 45)
|
||||
|
||||
// This yields a linear gradient spanning from the upper left corner to the lower right corner
|
||||
#linear-gradient
|
||||
+linear-gradient(color_stops(#fff, #ddd), "left top")
|
||||
+linear-gradient(color-stops(#fff, #ddd), "left top")
|
||||
|
||||
// This yields a gradient starting at the top with #fff, ending in #aaa
|
||||
#v-gradient
|
||||
+linear-gradient(color_stops(#fff, #aaa))
|
||||
+linear-gradient(color-stops(#fff, #aaa))
|
||||
|
||||
// Same as above but with a #ccc at the halfway point
|
||||
#v-gradient-2
|
||||
+linear-gradient(color_stops(#fff, #ccc, #aaa))
|
||||
+linear-gradient(color-stops(#fff, #ccc, #aaa))
|
||||
|
||||
// Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top
|
||||
#v-gradient-3
|
||||
+linear-gradient(color_stops(#fff, #ccc 30%, #bbb 70%, #aaa))
|
||||
+linear-gradient(color-stops(#fff, #ccc 30%, #bbb 70%, #aaa))
|
||||
|
||||
// This yields a horizontal linear gradient spanning from left to right.
|
||||
#h-gradient
|
||||
+linear-gradient(color_stops(#fff, #ddd), "left")
|
||||
+linear-gradient(color-stops(#fff, #ddd), "left")
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Inline-block
|
||||
description: css3 mixin for inline-block
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_inline_block.sass
|
||||
stylesheet: compass/css3/_inline-block.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
@ -2,7 +2,7 @@
|
||||
title: Opacity
|
||||
description: css3 mixin for opacity
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_opacity.sass
|
||||
stylesheet: compass/css3/_opacity.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
@ -2,7 +2,7 @@
|
||||
title: Text-shadow
|
||||
description: css3 mixin for text-shadow
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_text_shadow.sass
|
||||
stylesheet: compass/css3/_text-shadow.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
@ -2,7 +2,7 @@
|
||||
title: Transform
|
||||
description: css3 mixin for css transforms
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_transform.sass
|
||||
stylesheet: compass/css3/_transform.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
@ -2,7 +2,7 @@
|
||||
title: Transition
|
||||
description: css3 mixin for css transitions
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_transition.sass
|
||||
stylesheet: compass/css3/_transition.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Sticky Footer Example
|
||||
description: How to use the sticky footer mixin.
|
||||
framework: compass
|
||||
stylesheet: compass/layout/_sticky_footer.sass
|
||||
stylesheet: compass/layout/_sticky-footer.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import compass/reset.sass
|
||||
@import compass/layout.sass
|
||||
@import compass/reset.scss
|
||||
@import compass/layout.scss
|
||||
|
||||
+sticky-footer(72px, "#layout", "#layout_footer", "#footer")
|
||||
|
||||
|
||||
@ -157,10 +157,10 @@ crumb: Plugins and frameworks
|
||||
\.
|
||||
%ul
|
||||
%li
|
||||
%a{ :href => "http://github.com/handcrafted/handcrafted-compass-mixins/blob/master/_border-radius.sass" }
|
||||
%a{ :href => "http://github.com/handcrafted/handcrafted-compass-mixins/blob/master/_border-radius.scss" }
|
||||
Handcrafted Rounded Corners
|
||||
%li
|
||||
%a{ :href => "http://github.com/ntreadway/JQuery.tools.tabs.sass" }
|
||||
%a{ :href => "http://github.com/ntreadway/JQuery.tools.tabs.scss" }
|
||||
Ntreadway JQuery tools tabs
|
||||
%h3
|
||||
Plugins that are Works-In-Progress
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Module
|
||||
crumb: Blueprint
|
||||
framework: blueprint
|
||||
stylesheet: _blueprint.sass
|
||||
stylesheet: _blueprint.scss
|
||||
classnames:
|
||||
- reference
|
||||
meta_description: The Blueprint Framework -- ported to Sass.
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Buttons
|
||||
crumb: Buttons
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_buttons.sass
|
||||
stylesheet: blueprint/_buttons.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Colors
|
||||
crumb: Colors
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_colors.sass
|
||||
stylesheet: blueprint/_colors.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Debug
|
||||
crumb: Debug
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_debug.sass
|
||||
stylesheet: blueprint/_debug.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Fancy Type
|
||||
crumb: Fancy Type
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_fancy_type.sass
|
||||
stylesheet: blueprint/_fancy-type.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Form
|
||||
crumb: Form
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_form.sass
|
||||
stylesheet: blueprint/_form.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Grid
|
||||
crumb: Grid
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_grid.sass
|
||||
stylesheet: blueprint/_grid.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint IE Compatibility
|
||||
crumb: Internet Explorer
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_ie.sass
|
||||
stylesheet: blueprint/_ie.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Interaction
|
||||
crumb: Interaction
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_interaction.sass
|
||||
stylesheet: blueprint/_interaction.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Link Icons
|
||||
crumb: Link Icons
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_link_icons.sass
|
||||
stylesheet: blueprint/_link-icons.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Liquid
|
||||
crumb: Liquid
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_liquid.sass
|
||||
stylesheet: blueprint/_liquid.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Print
|
||||
crumb: Print
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_print.sass
|
||||
stylesheet: blueprint/_print.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Reset
|
||||
crumb: Reset
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_reset.sass
|
||||
stylesheet: blueprint/_reset.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Rtl
|
||||
crumb: Rtl
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_rtl.sass
|
||||
stylesheet: blueprint/_rtl.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Scaffolding
|
||||
crumb: Scaffolding
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_scaffolding.sass
|
||||
stylesheet: blueprint/_scaffolding.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
---
|
||||
title: Blueprint Screen
|
||||
crumb: Screen
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_screen.sass
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
- render 'reference' do
|
||||
%p
|
||||
Lorem ipsum dolor sit amet.
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Typography
|
||||
crumb: Typography
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_typography.sass
|
||||
stylesheet: blueprint/_typography.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blueprint Utilities
|
||||
crumb: Utilities
|
||||
framework: blueprint
|
||||
stylesheet: blueprint/_utilities.sass
|
||||
stylesheet: blueprint/_utilities.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Core Framework
|
||||
crumb: Compass Core
|
||||
framework: compass
|
||||
stylesheet: _compass.sass
|
||||
stylesheet: _compass.scss
|
||||
classnames:
|
||||
- reference
|
||||
meta_description: The Compass Core Framework.
|
||||
@ -18,7 +18,7 @@ meta_description: The Compass Core Framework.
|
||||
%p
|
||||
You can import these yourself if you want to use them.
|
||||
%ul
|
||||
= render "partials/reference/import", :import => "compass/_layout.sass"
|
||||
= render "partials/reference/import", :import => "compass/_reset.sass"
|
||||
= render "partials/reference/import", :import => "compass/_misc.sass"
|
||||
= render "partials/reference/import", :import => "compass/_layout.scss"
|
||||
= render "partials/reference/import", :import => "compass/_reset.scss"
|
||||
= render "partials/reference/import", :import => "compass/_misc.scss"
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass CSS3
|
||||
crumb: CSS3
|
||||
framework: compass
|
||||
stylesheet: compass/_css3.sass
|
||||
stylesheet: compass/_css3.scss
|
||||
classnames:
|
||||
- reference
|
||||
meta_description: Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes.
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Background Clip
|
||||
crumb: Background Clip
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_background_clip.sass
|
||||
stylesheet: compass/css3/_background-clip.scss
|
||||
meta_description: Specify the background clip for all browsers.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Background Origin
|
||||
crumb: Background Origin
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_background_origin.sass
|
||||
stylesheet: compass/css3/_background-origin.scss
|
||||
meta_description: Specify the background origin for all browsers.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Background Size
|
||||
crumb: Background Size
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_background_size.sass
|
||||
stylesheet: compass/css3/_background-size.scss
|
||||
meta_description: Specify the background size for all browsers.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Border Radius
|
||||
crumb: Border Radius
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_border_radius.sass
|
||||
stylesheet: compass/css3/_border-radius.scss
|
||||
meta_description: Specify the border radius for all browsers.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Box Shadow
|
||||
crumb: Box Shadow
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_box_shadow.sass
|
||||
stylesheet: compass/css3/_box-shadow.scss
|
||||
meta_description: Specify the box shadow for all browsers.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Box Sizing
|
||||
crumb: Box Sizing
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_box_sizing.sass
|
||||
stylesheet: compass/css3/_box-sizing.scss
|
||||
meta_description: Specify the box sizing for all browsers.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Columns
|
||||
crumb: Columns
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_columns.sass
|
||||
stylesheet: compass/css3/_columns.scss
|
||||
meta_description: Specify a columnar layout for all browsers.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Font Face
|
||||
crumb: Font Face
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_font_face.sass
|
||||
stylesheet: compass/css3/_font-face.scss
|
||||
meta_description: Specify a downloadable font face for all browsers.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Gradient
|
||||
crumb: Gradient
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_gradient.sass
|
||||
stylesheet: compass/css3/_gradient.scss
|
||||
meta_description: Specify linear gradients and radial gradients for all browsers.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Inline Block
|
||||
crumb: Inline Block
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_inline_block.sass
|
||||
stylesheet: compass/css3/_inline-block.scss
|
||||
meta_description: Declare an element inline block for all browsers.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Opacity
|
||||
crumb: Opacity
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_opacity.sass
|
||||
stylesheet: compass/css3/_opacity.scss
|
||||
meta_description: Specify the opacity for all browsers.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Text Shadow
|
||||
crumb: Text Shadow
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_text_shadow.sass
|
||||
stylesheet: compass/css3/_text-shadow.scss
|
||||
meta_description: Specify the text shadow for all browsers.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Transform
|
||||
crumb: Transform
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_transform.sass
|
||||
stylesheet: compass/css3/_transform.scss
|
||||
meta_description: Specify the 2D transformation for all browsers.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Transition
|
||||
crumb: Transition
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_transition.sass
|
||||
stylesheet: compass/css3/_transition.scss
|
||||
meta_description: Specify a style transition for all browsers.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Layout
|
||||
crumb: Layout
|
||||
framework: compass
|
||||
stylesheet: compass/_layout.sass
|
||||
stylesheet: compass/_layout.scss
|
||||
meta_description: Page layout module. So far, this is just the sticky-footer mixin.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Sticky Footer
|
||||
crumb: Sticky Footer
|
||||
framework: compass
|
||||
stylesheet: compass/layout/_sticky_footer.sass
|
||||
stylesheet: compass/layout/_sticky-footer.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Misc
|
||||
crumb: Misc
|
||||
framework: compass
|
||||
stylesheet: compass/_misc.sass
|
||||
stylesheet: compass/_misc.scss
|
||||
meta_description: Cute stuff you probably don't need.
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Reset
|
||||
crumb: Reset
|
||||
framework: compass
|
||||
stylesheet: compass/_reset.sass
|
||||
stylesheet: compass/_reset.scss
|
||||
classnames:
|
||||
- reference
|
||||
meta_description: Adds a CSS Reset into your stylesheet.
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Utilities
|
||||
crumb: Utilities
|
||||
framework: compass
|
||||
stylesheet: compass/_utilities.sass
|
||||
stylesheet: compass/_utilities.scss
|
||||
classnames:
|
||||
- reference
|
||||
meta_description: Provides basic mixins for common styling patterns.
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass General
|
||||
crumb: General
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/_general.sass
|
||||
stylesheet: compass/utilities/_general.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Clearfix
|
||||
crumb: Clearfix
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/general/_clearfix.sass
|
||||
stylesheet: compass/utilities/general/_clearfix.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Float
|
||||
crumb: Float
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/general/_float.sass
|
||||
stylesheet: compass/utilities/general/_float.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Hacks
|
||||
crumb: Hacks
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/general/_hacks.sass
|
||||
stylesheet: compass/utilities/general/_hacks.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Min
|
||||
crumb: Min
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/general/_min.sass
|
||||
stylesheet: compass/utilities/general/_min.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Reset
|
||||
crumb: Reset
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/general/_reset.sass
|
||||
stylesheet: compass/utilities/general/_reset.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Tabs
|
||||
crumb: Tabs
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/general/_tabs.sass
|
||||
stylesheet: compass/utilities/general/_tabs.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Tag_cloud
|
||||
crumb: Tag Cloud
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/general/_tag_cloud.sass
|
||||
stylesheet: compass/utilities/general/_tag-cloud.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Links
|
||||
crumb: Links
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/_links.sass
|
||||
stylesheet: compass/utilities/_links.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Hover Link
|
||||
crumb: Hover Link
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/links/_hover_link.sass
|
||||
stylesheet: compass/utilities/links/_hover-link.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Link Colors
|
||||
crumb: Link Colors
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/links/_link_colors.sass
|
||||
stylesheet: compass/utilities/links/_link-colors.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Unstyled Link
|
||||
crumb: Unstyled Link
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/links/_unstyled_link.sass
|
||||
stylesheet: compass/utilities/links/_unstyled-link.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Lists
|
||||
crumb: Lists
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/_lists.sass
|
||||
stylesheet: compass/utilities/_lists.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Bullets
|
||||
crumb: Bullets
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/lists/_bullets.sass
|
||||
stylesheet: compass/utilities/lists/_bullets.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Horizontal List
|
||||
crumb: Horizontal List
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/lists/_horizontal_list.sass
|
||||
stylesheet: compass/utilities/lists/_horizontal-list.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Inline List
|
||||
crumb: Inline List
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/lists/_inline_list.sass
|
||||
stylesheet: compass/utilities/lists/_inline-list.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Print
|
||||
crumb: Print
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/_print.sass
|
||||
stylesheet: compass/utilities/_print.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Sprites
|
||||
crumb: Sprites
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/_sprites.sass
|
||||
stylesheet: compass/utilities/_sprites.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Sprite Image
|
||||
crumb: Sprite Image
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/sprites/_sprite_img.sass
|
||||
stylesheet: compass/utilities/sprites/_sprite-img.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Tables
|
||||
crumb: Tables
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/_tables.sass
|
||||
stylesheet: compass/utilities/_tables.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Alternating Rows and Columns
|
||||
crumb: Alternating Rows And Columns
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/tables/_alternating_rows_and_columns.sass
|
||||
stylesheet: compass/utilities/tables/_alternating-rows-and-columns.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Borders
|
||||
crumb: Borders
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/tables/_borders.sass
|
||||
stylesheet: compass/utilities/tables/_borders.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Scaffolding
|
||||
crumb: Scaffolding
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/tables/_scaffolding.sass
|
||||
stylesheet: compass/utilities/tables/_scaffolding.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Text
|
||||
crumb: Text
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/_text.sass
|
||||
stylesheet: compass/utilities/_text.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Ellipsis
|
||||
crumb: Ellipsis
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/text/_ellipsis.sass
|
||||
stylesheet: compass/utilities/text/_ellipsis.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Nowrap
|
||||
crumb: Nowrap
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/text/_nowrap.sass
|
||||
stylesheet: compass/utilities/text/_nowrap.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Compass Replacement
|
||||
crumb: Replacement
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/text/_replacement.sass
|
||||
stylesheet: compass/utilities/text/_replacement.scss
|
||||
classnames:
|
||||
- reference
|
||||
---
|
||||
|
||||
@ -22,5 +22,5 @@ body
|
||||
margin: 0
|
||||
overflow: auto
|
||||
|
||||
@import partials/syntax.sass
|
||||
@import partials/syntax
|
||||
|
||||
@ -154,4 +154,4 @@ body#reference-compass-css3
|
||||
#text-shadow
|
||||
+text-shadow(red)
|
||||
|
||||
@import partials/syntax.sass
|
||||
@import partials/syntax
|
||||
@ -1,2 +1,2 @@
|
||||
@import partials/syntax/coderay.sass
|
||||
@import partials/syntax/pygments.sass
|
||||
@import partials/syntax/coderay
|
||||
@import partials/syntax/pygments
|
||||
@ -8,7 +8,7 @@ crumb: Best practices
|
||||
%p
|
||||
Create a
|
||||
%code
|
||||
_base.sass
|
||||
_base.scss
|
||||
%a{ :href => "http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials" }
|
||||
partial
|
||||
to initialize your stylesheets with common variables and (
|
||||
@ -16,43 +16,43 @@ crumb: Best practices
|
||||
often
|
||||
) the framework utilities you plan to use:
|
||||
%h4
|
||||
_base.sass
|
||||
_base.scss
|
||||
%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
|
||||
@import compass/reset.scss
|
||||
@import compass/utilities.scss
|
||||
@import blueprint/screen.scss
|
||||
\
|
||||
\// etc.
|
||||
%p
|
||||
The
|
||||
%code
|
||||
_base.sass
|
||||
_base.scss
|
||||
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
|
||||
application.scss
|
||||
%pre
|
||||
@import base.sass
|
||||
@import base.scss
|
||||
\
|
||||
\#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
|
||||
It is important to define any compass/framework constants that you want to override in base.scss 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
|
||||
_base.scss
|
||||
without the leading underscore, since it is a
|
||||
%a{ :href => "http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials" }
|
||||
partial
|
||||
|
||||
@ -27,4 +27,4 @@ classnames:
|
||||
|
||||
Because of this, it is common to have one or more partials
|
||||
that set the constants first and get imported before any other imports in your stylesheet(s).
|
||||
This is commonly referred to as the "base" stylesheet and is usually named `_base.sass`.
|
||||
This is commonly referred to as the "base" stylesheet and is usually named `_base.scss`.
|
||||
@ -1,6 +1,7 @@
|
||||
- if breadcrumbs_trail.size > 1
|
||||
%ol#breadcrumbs
|
||||
- breadcrumbs_trail.each_with_index do |bc, index|
|
||||
- next unless bc
|
||||
- klass = "first" if index == 0
|
||||
- klass = "last" if index == breadcrumbs_trail.size - 1
|
||||
%li{:class => klass}= link_to_unless_current((bc[:crumb] || bc[:title]), bc.reps.find { |r| r.name == :default })
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
%a.permalink{:href => "#const-#{const_id}"}= "!"+constant_def.name
|
||||
%dl.constant-details.source-documentation
|
||||
%dt Value
|
||||
%dd= constant_def.expr.to_sass(:html)
|
||||
%dd= constant_def.expr.to_sass(:format => :html)
|
||||
- if constant_def.comment
|
||||
%dt Description
|
||||
%dd= format_doc constant_def.comment
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
Frameworks
|
||||
|
||||
%ul
|
||||
= item_tree(reference_item(:stylesheet => "_compass.sass"))
|
||||
= item_tree(reference_item(:stylesheet => "_blueprint.sass"))
|
||||
= item_tree(reference_item(:stylesheet => "_compass.scss"))
|
||||
= item_tree(reference_item(:stylesheet => "_blueprint.scss"))
|
||||
|
||||
%h3
|
||||
Misc
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user