From 13af3a752165fa2e1760eeec75bd1d141f34f49b Mon Sep 17 00:00:00 2001 From: Johan Ronsse Date: Thu, 4 Feb 2010 00:41:21 +0100 Subject: [PATCH 1/4] * Added examples for CSS3 transforms, transitions and gradients. * Updated every CSS3 example to follow doc conventions: no tabs, spaces(2), colon after property (e.g. background: red), id naming like #id-name, no camelCasing --- .../compass/css3/border_radius/markup.haml | 50 ++++++++++++++++++- .../css3/border_radius/stylesheet.sass | 41 +++++++++++++-- .../compass/css3/box_shadow/markup.haml | 4 +- .../compass/css3/box_shadow/stylesheet.sass | 18 +++---- .../compass/css3/box_sizing/markup.haml | 4 +- .../compass/css3/box_sizing/stylesheet.sass | 25 ++++------ .../examples/compass/css3/columns/markup.haml | 6 +-- .../compass/css3/columns/stylesheet.sass | 26 +++++----- .../examples/compass/css3/gradient.haml | 8 +++ .../compass/css3/gradient/markup.haml | 34 +++++++++++++ .../compass/css3/gradient/stylesheet.sass | 31 ++++++++++++ .../compass/css3/inline_block/stylesheet.sass | 8 +-- .../examples/compass/css3/opacity/markup.haml | 10 ++-- .../compass/css3/opacity/stylesheet.sass | 26 +++++----- .../compass/css3/text_shadow/markup.haml | 4 +- .../compass/css3/text_shadow/stylesheet.sass | 8 +-- .../examples/compass/css3/transform.haml | 8 +++ .../compass/css3/transform/markup.haml | 24 +++++++++ .../compass/css3/transform/stylesheet.sass | 37 ++++++++++++++ .../examples/compass/css3/transition.haml | 8 +++ .../compass/css3/transition/markup.haml | 19 +++++++ .../compass/css3/transition/stylesheet.sass | 35 +++++++++++++ 22 files changed, 357 insertions(+), 77 deletions(-) create mode 100644 doc-src/content/examples/compass/css3/gradient.haml create mode 100644 doc-src/content/examples/compass/css3/gradient/markup.haml create mode 100644 doc-src/content/examples/compass/css3/gradient/stylesheet.sass create mode 100644 doc-src/content/examples/compass/css3/transform.haml create mode 100644 doc-src/content/examples/compass/css3/transform/markup.haml create mode 100644 doc-src/content/examples/compass/css3/transform/stylesheet.sass create mode 100644 doc-src/content/examples/compass/css3/transition.haml create mode 100644 doc-src/content/examples/compass/css3/transition/markup.haml create mode 100644 doc-src/content/examples/compass/css3/transition/stylesheet.sass diff --git a/doc-src/content/examples/compass/css3/border_radius/markup.haml b/doc-src/content/examples/compass/css3/border_radius/markup.haml index ae276cc3..46466fb6 100644 --- a/doc-src/content/examples/compass/css3/border_radius/markup.haml +++ b/doc-src/content/examples/compass/css3/border_radius/markup.haml @@ -1 +1,49 @@ -#border-radius \ No newline at end of file +%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 diff --git a/doc-src/content/examples/compass/css3/border_radius/stylesheet.sass b/doc-src/content/examples/compass/css3/border_radius/stylesheet.sass index 7be1c1a6..ac159974 100644 --- a/doc-src/content/examples/compass/css3/border_radius/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/border_radius/stylesheet.sass @@ -1,7 +1,40 @@ @import compass/css3 +.border-radius-example + width: 40px + height: 40px + background: red + margin: 20px + #border-radius - +border-radius('10px') - :width 40px - :height 40px - :background red \ No newline at end of file + +border-radius("10px") + +#border-radius-top-left + +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") \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/box_shadow/markup.haml b/doc-src/content/examples/compass/css3/box_shadow/markup.haml index 45c30407..9ea50518 100644 --- a/doc-src/content/examples/compass/css3/box_shadow/markup.haml +++ b/doc-src/content/examples/compass/css3/box_shadow/markup.haml @@ -1,3 +1,3 @@ -#box-shadow-default +#box-shadow-default.box-shadow-example -#box-shadow-custom \ No newline at end of file +#box-shadow-custom.box-shadow-example \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/box_shadow/stylesheet.sass b/doc-src/content/examples/compass/css3/box_shadow/stylesheet.sass index dbbbdd55..6edab9f5 100644 --- a/doc-src/content/examples/compass/css3/box_shadow/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/box_shadow/stylesheet.sass @@ -1,17 +1,15 @@ @import compass/css3 +.box-shadow-example + width: 40px + height: 40px + background: #EEE + margin: 20px + // Default box shadow #box-shadow-default - +box-shadow - :width 40px - :height 40px - :background #EEE - :margin 20px + +box-shadow // Box shadow with custom settings #box-shadow-custom - +box-shadow(red, 2px, 2px, 10px) - :width 40px - :height 40px - :background #EEE - :margin 20px \ No newline at end of file + +box-shadow(red, 2px, 2px, 10px) \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/box_sizing/markup.haml b/doc-src/content/examples/compass/css3/box_sizing/markup.haml index ee684afe..a053d6c4 100644 --- a/doc-src/content/examples/compass/css3/box_sizing/markup.haml +++ b/doc-src/content/examples/compass/css3/box_sizing/markup.haml @@ -1,3 +1,3 @@ -#contentBox +#content-box.box-sizing-example -#borderBox +#border-box.box-sizing-example \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/box_sizing/stylesheet.sass b/doc-src/content/examples/compass/css3/box_sizing/stylesheet.sass index 8167069e..5be4cd9f 100644 --- a/doc-src/content/examples/compass/css3/box_sizing/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/box_sizing/stylesheet.sass @@ -1,17 +1,14 @@ @import compass/css3 -#contentBox - +box-sizing('content-box') - :background red - :padding 20px - :border 10px solid green - :margin 20px - :width 200px +.box-sizing-example + background: red + padding: 20px + border: 10px solid green + margin: 20px + width: 200px -#borderBox - +box-sizing('border-box') - :background red - :padding 20px - :border 10px solid green - :margin 20px - :width 200px \ No newline at end of file +#content-box + +box-sizing('content-box') + +#border-box + +box-sizing('border-box') \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/columns/markup.haml b/doc-src/content/examples/compass/css3/columns/markup.haml index 44249c14..666f62a8 100644 --- a/doc-src/content/examples/compass/css3/columns/markup.haml +++ b/doc-src/content/examples/compass/css3/columns/markup.haml @@ -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. -%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. -%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. diff --git a/doc-src/content/examples/compass/css3/columns/stylesheet.sass b/doc-src/content/examples/compass/css3/columns/stylesheet.sass index eff8f0e6..3db347e7 100644 --- a/doc-src/content/examples/compass/css3/columns/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/columns/stylesheet.sass @@ -1,17 +1,17 @@ @import compass/css3 -#twoColumn - +column-count(2) - :width 300px - :margin-bottom 20px +#two-column + +column-count(2) + width: 300px + margin-bottom: 20px -#threeColumn - +column-count(3) - :width 300px - :margin-bottom 20px +#three-column + +column-count(3) + width: 300px + margin-bottom: 20px -#fourColumnWithRule - +column-count(4) - +column-rule(1px, solid, red) - :width 300px - :margin-bottom 20px +#four-column-with-rule + +column-count(4) + +column-rule(1px, "solid", red) + width: 300px + margin-bottom: 20px diff --git a/doc-src/content/examples/compass/css3/gradient.haml b/doc-src/content/examples/compass/css3/gradient.haml new file mode 100644 index 00000000..b1785b35 --- /dev/null +++ b/doc-src/content/examples/compass/css3/gradient.haml @@ -0,0 +1,8 @@ +--- +title: Gradient +description: css3 mixin for css gradients +framework: compass/css3 +stylesheet: compass/css3/_gradient.sass +example: true +--- += render "partials/example" \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/gradient/markup.haml b/doc-src/content/examples/compass/css3/gradient/markup.haml new file mode 100644 index 00000000..41248093 --- /dev/null +++ b/doc-src/content/examples/compass/css3/gradient/markup.haml @@ -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 \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/gradient/stylesheet.sass b/doc-src/content/examples/compass/css3/gradient/stylesheet.sass new file mode 100644 index 00000000..39d5ac8f --- /dev/null +++ b/doc-src/content/examples/compass/css3/gradient/stylesheet.sass @@ -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) \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/inline_block/stylesheet.sass b/doc-src/content/examples/compass/css3/inline_block/stylesheet.sass index a818ca34..7c337f95 100644 --- a/doc-src/content/examples/compass/css3/inline_block/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/inline_block/stylesheet.sass @@ -1,7 +1,7 @@ @import compass/css3 #inline-block - +inline-block - :padding 4px 10px - :background red - :color white + +inline-block + padding: 4px 10px + background: red + color: white diff --git a/doc-src/content/examples/compass/css3/opacity/markup.haml b/doc-src/content/examples/compass/css3/opacity/markup.haml index 12b6e13f..e0bab6f4 100644 --- a/doc-src/content/examples/compass/css3/opacity/markup.haml +++ b/doc-src/content/examples/compass/css3/opacity/markup.haml @@ -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 \ No newline at end of file +#transparent.opacity-example \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/opacity/stylesheet.sass b/doc-src/content/examples/compass/css3/opacity/stylesheet.sass index ec7d8f9b..1e12cb6f 100644 --- a/doc-src/content/examples/compass/css3/opacity/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/opacity/stylesheet.sass @@ -1,22 +1,22 @@ @import compass/css3 -.opacityExample - :background red - :width 40px - :height 40px - :float left +.opacity-example + background: red + width: 40px + height: 40px + float: left -#opacity10 - +opacity(0.1) +#opacity-10 + +opacity(0.1) -#opacity20 - +opacity(0.2) +#opacity-20 + +opacity(0.2) -#opacity50 - +opacity(0.5) +#opacity-50 + +opacity(0.5) #opaque - +opaque + +opaque #transparent - +transparent + +transparent \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/text_shadow/markup.haml b/doc-src/content/examples/compass/css3/text_shadow/markup.haml index 987fef1b..afd6fdbb 100644 --- a/doc-src/content/examples/compass/css3/text_shadow/markup.haml +++ b/doc-src/content/examples/compass/css3/text_shadow/markup.haml @@ -2,7 +2,7 @@ this text has no shadow #p - %span(class="hasShadow") this text does have shadow + %span(class="has-shadow") this text has a shadow #p - %span(class="hasCustomShadow") this text has a custom shadow \ No newline at end of file + %span(class="has-custom-shadow") this text has a custom shadow \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/text_shadow/stylesheet.sass b/doc-src/content/examples/compass/css3/text_shadow/stylesheet.sass index 017c12fc..dec2707c 100644 --- a/doc-src/content/examples/compass/css3/text_shadow/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/text_shadow/stylesheet.sass @@ -1,7 +1,7 @@ @import compass/css3 -.hasShadow - +text-shadow +.has-shadow + +text-shadow -.hasCustomShadow - +text-shadow(red, 3px, 3px, 0) \ No newline at end of file +.has-custom-shadow + +text-shadow(red, 3px, 3px, 0) \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/transform.haml b/doc-src/content/examples/compass/css3/transform.haml new file mode 100644 index 00000000..7a21d4eb --- /dev/null +++ b/doc-src/content/examples/compass/css3/transform.haml @@ -0,0 +1,8 @@ +--- +title: Transform +description: css3 mixin for css transforms +framework: compass/css3 +stylesheet: compass/css3/_transform.sass +example: true +--- += render "partials/example" \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/transform/markup.haml b/doc-src/content/examples/compass/css3/transform/markup.haml new file mode 100644 index 00000000..f85cb2d8 --- /dev/null +++ b/doc-src/content/examples/compass/css3/transform/markup.haml @@ -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 \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/transform/stylesheet.sass b/doc-src/content/examples/compass/css3/transform/stylesheet.sass new file mode 100644 index 00000000..bbb975bf --- /dev/null +++ b/doc-src/content/examples/compass/css3/transform/stylesheet.sass @@ -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) \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/transition.haml b/doc-src/content/examples/compass/css3/transition.haml new file mode 100644 index 00000000..e56d7ff5 --- /dev/null +++ b/doc-src/content/examples/compass/css3/transition.haml @@ -0,0 +1,8 @@ +--- +title: Transition +description: css3 mixin for css transitions +framework: compass/css3 +stylesheet: compass/css3/_transform.sass +example: true +--- += render "partials/example" \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/transition/markup.haml b/doc-src/content/examples/compass/css3/transition/markup.haml new file mode 100644 index 00000000..b6086953 --- /dev/null +++ b/doc-src/content/examples/compass/css3/transition/markup.haml @@ -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 \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/transition/stylesheet.sass b/doc-src/content/examples/compass/css3/transition/stylesheet.sass new file mode 100644 index 00000000..9b71b263 --- /dev/null +++ b/doc-src/content/examples/compass/css3/transition/stylesheet.sass @@ -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 \ No newline at end of file From f549f0c8da9acefe16a2d71ff04030cc8d9cf005 Mon Sep 17 00:00:00 2001 From: Johan Ronsse Date: Thu, 4 Feb 2010 22:38:30 +0100 Subject: [PATCH 2/4] Make the docs a little more nicer looking to work in --- doc-src/content/stylesheets/main.sass | 18 +++++++++++------- doc-src/layouts/reference.haml | 2 +- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/doc-src/content/stylesheets/main.sass b/doc-src/content/stylesheets/main.sass index c49cc085..932b6aef 100644 --- a/doc-src/content/stylesheets/main.sass +++ b/doc-src/content/stylesheets/main.sass @@ -1,15 +1,14 @@ -@import blueprint/reset @import compass/utilities @import compass/css3 - @import blueprint body font-family: "Lucida Sans", "Lucida Grande", Lucida, sans-serif line-height: 1.5 + font-size: 13px #container - +container + +pie-clearfix #main +column(16, true) @@ -18,11 +17,16 @@ body #sidebar +column(8) +pull(24, true) + background: #F5F5F5 + h2 + font-size: 16px + ul + padding: 5px body.reference h3.mixin background-color: #eee - border: 3px solid #aaa + border: 1px solid #aaa padding: 0.75em margin-bottom: 0 a.permalink @@ -30,7 +34,7 @@ body.reference +link-colors("inherit", "inherit") .source-documentation background-color: #eee - border: 3px solid #aaa + border: 1px solid #aaa border-top-width: 0 padding: 0.75em a.view-source @@ -67,8 +71,8 @@ body.reference table.constants width: 100% - +alternating-rows-and-columns(#eee, #bbb, #191919) - +outer-table-borders(2px) + +alternating-rows-and-columns(#EEE, #bbb, #191919) + +outer-table-borders(1px) +inner-table-borders(1px) td, th padding: 0.25em 0.5em diff --git a/doc-src/layouts/reference.haml b/doc-src/layouts/reference.haml index 0e3445a8..d7ce1c3b 100644 --- a/doc-src/layouts/reference.haml +++ b/doc-src/layouts/reference.haml @@ -10,4 +10,4 @@ = render "partials/reference/constants" -= render "partials/reference/mixins" += render "partials/reference/mixins" \ No newline at end of file From 4bc02bc53e8222d67734f69a0b2ddc9b07e475b3 Mon Sep 17 00:00:00 2001 From: Johan Ronsse Date: Thu, 4 Feb 2010 23:03:33 +0100 Subject: [PATCH 3/4] Corrected metadata for current css3 examples so they show up in reference docs --- doc-src/content/examples/compass/css3/border_radius.haml | 4 ++-- doc-src/content/examples/compass/css3/box_shadow.haml | 2 +- doc-src/content/examples/compass/css3/box_sizing.haml | 2 +- doc-src/content/examples/compass/css3/columns.haml | 2 +- doc-src/content/examples/compass/css3/gradient.haml | 2 +- doc-src/content/examples/compass/css3/inline_block.haml | 2 +- doc-src/content/examples/compass/css3/opacity.haml | 2 +- doc-src/content/examples/compass/css3/text_shadow.haml | 2 +- doc-src/content/examples/compass/css3/transform.haml | 2 +- doc-src/content/examples/compass/css3/transition.haml | 4 ++-- doc-src/content/stylesheets/main.sass | 8 ++++++++ 11 files changed, 20 insertions(+), 12 deletions(-) diff --git a/doc-src/content/examples/compass/css3/border_radius.haml b/doc-src/content/examples/compass/css3/border_radius.haml index c6f24876..7de8569c 100644 --- a/doc-src/content/examples/compass/css3/border_radius.haml +++ b/doc-src/content/examples/compass/css3/border_radius.haml @@ -1,7 +1,7 @@ --- -title: Border-radius +title: Border radius description: css3 mixin for border-radius -framework: compass/css3 +framework: compass stylesheet: compass/css3/_border_radius.sass example: true --- diff --git a/doc-src/content/examples/compass/css3/box_shadow.haml b/doc-src/content/examples/compass/css3/box_shadow.haml index 90e72fc1..e6fddcf5 100644 --- a/doc-src/content/examples/compass/css3/box_shadow.haml +++ b/doc-src/content/examples/compass/css3/box_shadow.haml @@ -1,7 +1,7 @@ --- title: Box-shadow description: css3 mixin for box-shadow -framework: compass/css3 +framework: compass stylesheet: compass/css3/_box_shadow.sass example: true --- diff --git a/doc-src/content/examples/compass/css3/box_sizing.haml b/doc-src/content/examples/compass/css3/box_sizing.haml index 72cdf334..91b04a3b 100644 --- a/doc-src/content/examples/compass/css3/box_sizing.haml +++ b/doc-src/content/examples/compass/css3/box_sizing.haml @@ -1,7 +1,7 @@ --- title: Box-sizing description: css3 mixin for box-sizing -framework: compass/css3 +framework: compass stylesheet: compass/css3/_box_sizing.sass example: true --- diff --git a/doc-src/content/examples/compass/css3/columns.haml b/doc-src/content/examples/compass/css3/columns.haml index deb81eee..b5abbb28 100644 --- a/doc-src/content/examples/compass/css3/columns.haml +++ b/doc-src/content/examples/compass/css3/columns.haml @@ -1,7 +1,7 @@ --- title: Columns description: css3 mixin for css columns -framework: compass/css3 +framework: compass stylesheet: compass/css3/_columns.sass example: true --- diff --git a/doc-src/content/examples/compass/css3/gradient.haml b/doc-src/content/examples/compass/css3/gradient.haml index b1785b35..6cfeec9e 100644 --- a/doc-src/content/examples/compass/css3/gradient.haml +++ b/doc-src/content/examples/compass/css3/gradient.haml @@ -1,7 +1,7 @@ --- title: Gradient description: css3 mixin for css gradients -framework: compass/css3 +framework: compass stylesheet: compass/css3/_gradient.sass example: true --- diff --git a/doc-src/content/examples/compass/css3/inline_block.haml b/doc-src/content/examples/compass/css3/inline_block.haml index 974377a4..52198596 100644 --- a/doc-src/content/examples/compass/css3/inline_block.haml +++ b/doc-src/content/examples/compass/css3/inline_block.haml @@ -1,7 +1,7 @@ --- title: Inline-block description: css3 mixin for inline-block -framework: compass/css3 +framework: compass stylesheet: compass/css3/_inline_block.sass example: true --- diff --git a/doc-src/content/examples/compass/css3/opacity.haml b/doc-src/content/examples/compass/css3/opacity.haml index f8036c70..edcbf99b 100644 --- a/doc-src/content/examples/compass/css3/opacity.haml +++ b/doc-src/content/examples/compass/css3/opacity.haml @@ -1,7 +1,7 @@ --- title: Opacity description: css3 mixin for opacity -framework: compass/css3 +framework: compass stylesheet: compass/css3/_opacity.sass example: true --- diff --git a/doc-src/content/examples/compass/css3/text_shadow.haml b/doc-src/content/examples/compass/css3/text_shadow.haml index 20b82b91..bfefc199 100644 --- a/doc-src/content/examples/compass/css3/text_shadow.haml +++ b/doc-src/content/examples/compass/css3/text_shadow.haml @@ -1,7 +1,7 @@ --- title: Text-shadow description: css3 mixin for text-shadow -framework: compass/css3 +framework: compass stylesheet: compass/css3/_text_shadow.sass example: true --- diff --git a/doc-src/content/examples/compass/css3/transform.haml b/doc-src/content/examples/compass/css3/transform.haml index 7a21d4eb..9248ca2e 100644 --- a/doc-src/content/examples/compass/css3/transform.haml +++ b/doc-src/content/examples/compass/css3/transform.haml @@ -1,7 +1,7 @@ --- title: Transform description: css3 mixin for css transforms -framework: compass/css3 +framework: compass stylesheet: compass/css3/_transform.sass example: true --- diff --git a/doc-src/content/examples/compass/css3/transition.haml b/doc-src/content/examples/compass/css3/transition.haml index e56d7ff5..ee2474b7 100644 --- a/doc-src/content/examples/compass/css3/transition.haml +++ b/doc-src/content/examples/compass/css3/transition.haml @@ -1,8 +1,8 @@ --- title: Transition description: css3 mixin for css transitions -framework: compass/css3 -stylesheet: compass/css3/_transform.sass +framework: compass +stylesheet: compass/css3/_transition.sass example: true --- = render "partials/example" \ No newline at end of file diff --git a/doc-src/content/stylesheets/main.sass b/doc-src/content/stylesheets/main.sass index 932b6aef..87f09946 100644 --- a/doc-src/content/stylesheets/main.sass +++ b/doc-src/content/stylesheets/main.sass @@ -7,6 +7,7 @@ body line-height: 1.5 font-size: 13px +// Layout #container +pie-clearfix @@ -23,6 +24,13 @@ body ul padding: 5px +// Typography + +blockquote + :font-style italic + +// Reference + body.reference h3.mixin background-color: #eee From 7dc9d66fbfed21edb51fc49f5e88f40d9f5a35b2 Mon Sep 17 00:00:00 2001 From: Johan Ronsse Date: Fri, 5 Feb 2010 00:13:57 +0100 Subject: [PATCH 4/4] 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. --- doc-src/content/best_practices.haml | 104 +++++++++++++ doc-src/content/frameworks.haml | 205 ++++++++++++++++++++++++++ doc-src/content/index.haml | 2 +- doc-src/content/stylesheets/main.css | 0 doc-src/content/stylesheets/main.sass | 22 ++- doc-src/layouts/partials/sidebar.haml | 18 +++ 6 files changed, 349 insertions(+), 2 deletions(-) create mode 100644 doc-src/content/best_practices.haml create mode 100644 doc-src/content/frameworks.haml create mode 100644 doc-src/content/stylesheets/main.css diff --git a/doc-src/content/best_practices.haml b/doc-src/content/best_practices.haml new file mode 100644 index 00000000..8f9f1a2a --- /dev/null +++ b/doc-src/content/best_practices.haml @@ -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 ) diff --git a/doc-src/content/frameworks.haml b/doc-src/content/frameworks.haml new file mode 100644 index 00000000..08530864 --- /dev/null +++ b/doc-src/content/frameworks.haml @@ -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. diff --git a/doc-src/content/index.haml b/doc-src/content/index.haml index cfe0d09f..4174ff4d 100644 --- a/doc-src/content/index.haml +++ b/doc-src/content/index.haml @@ -3,7 +3,7 @@ title: Compass Documentation crumb: Docs body_id: home --- -%h1 Compass +%h1#logo Compass %p Compass is a stylesheet authoring tool that uses the Sass stylesheet diff --git a/doc-src/content/stylesheets/main.css b/doc-src/content/stylesheets/main.css new file mode 100644 index 00000000..e69de29b diff --git a/doc-src/content/stylesheets/main.sass b/doc-src/content/stylesheets/main.sass index 87f09946..a61af886 100644 --- a/doc-src/content/stylesheets/main.sass +++ b/doc-src/content/stylesheets/main.sass @@ -29,6 +29,26 @@ body 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 @@ -94,6 +114,6 @@ ol#breadcrumbs content: "" li.last visibility: hidden -body#home h1 +body#home #logo +replace-text("compass.png", 0px) height: 159px \ No newline at end of file diff --git a/doc-src/layouts/partials/sidebar.haml b/doc-src/layouts/partials/sidebar.haml index cb290885..fb2f6a4d 100644 --- a/doc-src/layouts/partials/sidebar.haml +++ b/doc-src/layouts/partials/sidebar.haml @@ -1,5 +1,23 @@ %h2 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 = item_tree(reference_item(:stylesheet => "_blueprint.sass")) = item_tree(reference_item(:stylesheet => "_compass.sass"))