From 48190e57087981397fb18a4f6a463facfbb687d2 Mon Sep 17 00:00:00 2001 From: JohnAlbin Date: Thu, 26 Apr 2012 17:47:09 +0800 Subject: [PATCH 01/14] Make the reset partial compatible with the establish-baseline() mixin. Fixes #859. --- frameworks/compass/stylesheets/compass/reset/_utilities.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frameworks/compass/stylesheets/compass/reset/_utilities.scss b/frameworks/compass/stylesheets/compass/reset/_utilities.scss index d9d03f17..d173f3e5 100644 --- a/frameworks/compass/stylesheets/compass/reset/_utilities.scss +++ b/frameworks/compass/stylesheets/compass/reset/_utilities.scss @@ -17,7 +17,9 @@ time, mark, audio, video { @include reset-box-model; @include reset-font; } - body { + // Unlike Eric's original reset, we reset the html element to be compatible + // with the vertical rhythm mixins. + html { @include reset-body; } ol, ul { @include reset-list-style; } From 71b1cd9aae653033deb5c444a6462d77ee8cecf0 Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Wed, 28 Mar 2012 11:08:38 -0400 Subject: [PATCH 02/14] Adds experimental CSS region As seen in http://css-tricks.com/content-folding/ Only good for use w/ IE and Webkit right now. Too early for official implementation even. --- .../stylesheets/compass/css3/_regions.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 frameworks/compass/stylesheets/compass/css3/_regions.scss diff --git a/frameworks/compass/stylesheets/compass/css3/_regions.scss b/frameworks/compass/stylesheets/compass/css3/_regions.scss new file mode 100644 index 00000000..95092d2e --- /dev/null +++ b/frameworks/compass/stylesheets/compass/css3/_regions.scss @@ -0,0 +1,16 @@ +@import "shared"; + +// Add and utilize CSS regions for Webkit + IE. Experimental implementation. Limit to those two vendor prefixes until more stable. +// See http://css-tricks.com/content-folding/ and http://dev.w3.org/csswg/css3-regions/ for more info on use + +@mixin flow-into($target) { + @include experimental(flow-into, $target, + not -moz, -webkit, not -o, -ms, not -khtml, not official + ); +} + +@mixin flow-from($target) { + @include experimental(flow-from, $target, + not -moz, -webkit, not -o, -ms, not -khtml, not official + ); +} \ No newline at end of file From 451046848c6434429f5b49ee168f61d62825e0f7 Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Mon, 30 Apr 2012 23:05:54 -0400 Subject: [PATCH 03/14] Adds test case for css regions. --- test/fixtures/stylesheets/compass/sass/regions.scss | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 test/fixtures/stylesheets/compass/sass/regions.scss diff --git a/test/fixtures/stylesheets/compass/sass/regions.scss b/test/fixtures/stylesheets/compass/sass/regions.scss new file mode 100644 index 00000000..79a39c47 --- /dev/null +++ b/test/fixtures/stylesheets/compass/sass/regions.scss @@ -0,0 +1,4 @@ +@import "compass/css3/regions"; + +.source { @include flow-into(target); } +.target { @include flow-from(source); } \ No newline at end of file From 23e1155ad6fa8aca89f7670055b146a3e12f4731 Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Mon, 30 Apr 2012 23:22:19 -0400 Subject: [PATCH 04/14] Adds examples for css regions. --- .../content/examples/compass/css3/regions.haml | 8 ++++++++ .../examples/compass/css3/regions/markup.haml | 7 +++++++ .../compass/css3/regions/stylesheet.sass | 17 +++++++++++++++++ 3 files changed, 32 insertions(+) create mode 100644 doc-src/content/examples/compass/css3/regions.haml create mode 100644 doc-src/content/examples/compass/css3/regions/markup.haml create mode 100644 doc-src/content/examples/compass/css3/regions/stylesheet.sass diff --git a/doc-src/content/examples/compass/css3/regions.haml b/doc-src/content/examples/compass/css3/regions.haml new file mode 100644 index 00000000..2bcd04a8 --- /dev/null +++ b/doc-src/content/examples/compass/css3/regions.haml @@ -0,0 +1,8 @@ +--- +title: CSS Regions +description: css3 mixin for css regions +framework: compass +stylesheet: compass/css3/_regions.scss +example: true +--- += render "partials/example" \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/regions/markup.haml b/doc-src/content/examples/compass/css3/regions/markup.haml new file mode 100644 index 00000000..9431aa1f --- /dev/null +++ b/doc-src/content/examples/compass/css3/regions/markup.haml @@ -0,0 +1,7 @@ +.source + %p + This is the source material + +.target + %p + This is the target location \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/regions/stylesheet.sass b/doc-src/content/examples/compass/css3/regions/stylesheet.sass new file mode 100644 index 00000000..47553e53 --- /dev/null +++ b/doc-src/content/examples/compass/css3/regions/stylesheet.sass @@ -0,0 +1,17 @@ +@import compass/css3 + +.source + +flow-into(target) + +.target + +flow-from(source) + +.source + border: 10px solid green + margin: 20px + width: 200px + +.target + border: 10px solid red + margin: 20px + width: 200px \ No newline at end of file From 55d9176b447a7b61c91830e7bf8cd73c82be0cdc Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Tue, 1 May 2012 00:06:03 -0400 Subject: [PATCH 05/14] Sorting out the targets from the sources. --- .../compass/stylesheets/compass/css3/_regions.scss | 10 +++++++--- test/fixtures/stylesheets/compass/sass/regions.scss | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/frameworks/compass/stylesheets/compass/css3/_regions.scss b/frameworks/compass/stylesheets/compass/css3/_regions.scss index 95092d2e..2dda3533 100644 --- a/frameworks/compass/stylesheets/compass/css3/_regions.scss +++ b/frameworks/compass/stylesheets/compass/css3/_regions.scss @@ -1,7 +1,11 @@ @import "shared"; -// Add and utilize CSS regions for Webkit + IE. Experimental implementation. Limit to those two vendor prefixes until more stable. -// See http://css-tricks.com/content-folding/ and http://dev.w3.org/csswg/css3-regions/ for more info on use +// Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/) +// +// $target is a value you use to link two regions of your css. Give the source of your content the flow-into property, and give your target container the flow-from property. +// +// For a visual explanation, see the diagrams at Chris Coyier's +// [CSS-Tricks](http://css-tricks.com/content-folding/) @mixin flow-into($target) { @include experimental(flow-into, $target, @@ -10,7 +14,7 @@ } @mixin flow-from($target) { - @include experimental(flow-from, $target, + @include experimental(flow-from, $source, not -moz, -webkit, not -o, -ms, not -khtml, not official ); } \ No newline at end of file diff --git a/test/fixtures/stylesheets/compass/sass/regions.scss b/test/fixtures/stylesheets/compass/sass/regions.scss index 79a39c47..841cab4f 100644 --- a/test/fixtures/stylesheets/compass/sass/regions.scss +++ b/test/fixtures/stylesheets/compass/sass/regions.scss @@ -1,4 +1,4 @@ @import "compass/css3/regions"; .source { @include flow-into(target); } -.target { @include flow-from(source); } \ No newline at end of file +.target { @include flow-from(target); } \ No newline at end of file From a5c8858d27265ddac1e2664aa434899758bd181c Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Tue, 1 May 2012 00:13:48 -0400 Subject: [PATCH 06/14] Adds reference for CSS Regions. --- .../examples/compass/css3/regions/markup.haml | 2 +- .../examples/compass/css3/regions/stylesheet.sass | 8 ++------ .../content/reference/compass/css3/regions.haml | 15 +++++++++++++++ 3 files changed, 18 insertions(+), 7 deletions(-) create mode 100644 doc-src/content/reference/compass/css3/regions.haml diff --git a/doc-src/content/examples/compass/css3/regions/markup.haml b/doc-src/content/examples/compass/css3/regions/markup.haml index 9431aa1f..bb9d30e4 100644 --- a/doc-src/content/examples/compass/css3/regions/markup.haml +++ b/doc-src/content/examples/compass/css3/regions/markup.haml @@ -2,6 +2,6 @@ %p This is the source material -.target +.new-container %p This is the target location \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/regions/stylesheet.sass b/doc-src/content/examples/compass/css3/regions/stylesheet.sass index 47553e53..2fe10d07 100644 --- a/doc-src/content/examples/compass/css3/regions/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/regions/stylesheet.sass @@ -2,16 +2,12 @@ .source +flow-into(target) - -.target - +flow-from(source) - -.source border: 10px solid green margin: 20px width: 200px -.target +.new-container + +flow-from(target) border: 10px solid red margin: 20px width: 200px \ No newline at end of file diff --git a/doc-src/content/reference/compass/css3/regions.haml b/doc-src/content/reference/compass/css3/regions.haml new file mode 100644 index 00000000..b0551024 --- /dev/null +++ b/doc-src/content/reference/compass/css3/regions.haml @@ -0,0 +1,15 @@ +--- +title: Compass CSS Regions +crumb: CSS Regions +framework: compass +stylesheet: compass/css3/_regions.scss +meta_description: Specify CSS Regions for supported browsers. +layout: core +classnames: + - reference + - core + - css3 +--- +- render 'reference' do + %p + Provides a mixin for the CSS regions, properties which allow you to flow content into new containers. See the spec draft and Adobe's page on the topic. \ No newline at end of file From f69219716fdaf8fe554084d5b14e9f5740767859 Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Tue, 1 May 2012 00:57:19 -0400 Subject: [PATCH 07/14] cleans up missed var. --- frameworks/compass/stylesheets/compass/css3/_regions.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frameworks/compass/stylesheets/compass/css3/_regions.scss b/frameworks/compass/stylesheets/compass/css3/_regions.scss index 2dda3533..818f204f 100644 --- a/frameworks/compass/stylesheets/compass/css3/_regions.scss +++ b/frameworks/compass/stylesheets/compass/css3/_regions.scss @@ -8,12 +8,14 @@ // [CSS-Tricks](http://css-tricks.com/content-folding/) @mixin flow-into($target) { + $target: unquote($target); @include experimental(flow-into, $target, not -moz, -webkit, not -o, -ms, not -khtml, not official ); } @mixin flow-from($target) { + $target: unquote($target); @include experimental(flow-from, $source, not -moz, -webkit, not -o, -ms, not -khtml, not official ); From e093cd2c8481e15f24a54040ed82f319edbd8103 Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Tue, 1 May 2012 11:50:30 -0400 Subject: [PATCH 08/14] imports css regions into css3 stylesheet. --- frameworks/compass/stylesheets/compass/_css3.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/frameworks/compass/stylesheets/compass/_css3.scss b/frameworks/compass/stylesheets/compass/_css3.scss index 8291bd16..a6d92635 100644 --- a/frameworks/compass/stylesheets/compass/_css3.scss +++ b/frameworks/compass/stylesheets/compass/_css3.scss @@ -14,3 +14,4 @@ @import "css3/transform"; @import "css3/transition"; @import "css3/appearance"; +@import "css3/regions"; \ No newline at end of file From 387e8a8cc2c64383a43405e7337814d65c3b2c8e Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Tue, 1 May 2012 11:53:31 -0400 Subject: [PATCH 09/14] takes care of that pesky that should be --- frameworks/compass/stylesheets/compass/css3/_regions.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frameworks/compass/stylesheets/compass/css3/_regions.scss b/frameworks/compass/stylesheets/compass/css3/_regions.scss index 818f204f..9b2f27cd 100644 --- a/frameworks/compass/stylesheets/compass/css3/_regions.scss +++ b/frameworks/compass/stylesheets/compass/css3/_regions.scss @@ -16,7 +16,7 @@ @mixin flow-from($target) { $target: unquote($target); - @include experimental(flow-from, $source, + @include experimental(flow-from, $target, not -moz, -webkit, not -o, -ms, not -khtml, not official ); } \ No newline at end of file From 5710d6d66e8c7882ab21ef35693654b8ce624998 Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Tue, 1 May 2012 12:01:23 -0400 Subject: [PATCH 10/14] Changes .target to .new-container for clarity. --- test/fixtures/stylesheets/compass/sass/regions.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/fixtures/stylesheets/compass/sass/regions.scss b/test/fixtures/stylesheets/compass/sass/regions.scss index 841cab4f..8d149ce5 100644 --- a/test/fixtures/stylesheets/compass/sass/regions.scss +++ b/test/fixtures/stylesheets/compass/sass/regions.scss @@ -1,4 +1,4 @@ @import "compass/css3/regions"; .source { @include flow-into(target); } -.target { @include flow-from(target); } \ No newline at end of file +.new-container { @include flow-from(target); } \ No newline at end of file From bc3080faf8f3673d266327225b223f93cd2e195e Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Tue, 1 May 2012 12:05:13 -0400 Subject: [PATCH 11/14] updating about text to reflect 2 mixins --- doc-src/content/reference/compass/css3/regions.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc-src/content/reference/compass/css3/regions.haml b/doc-src/content/reference/compass/css3/regions.haml index b0551024..b294a6b3 100644 --- a/doc-src/content/reference/compass/css3/regions.haml +++ b/doc-src/content/reference/compass/css3/regions.haml @@ -12,4 +12,4 @@ classnames: --- - render 'reference' do %p - Provides a mixin for the CSS regions, properties which allow you to flow content into new containers. See the spec draft and Adobe's page on the topic. \ No newline at end of file + Provides two mixins for CSS regions, properties which allow you to flow content into new containers. See the spec draft and Adobe's page on the topic. \ No newline at end of file From 6dd240437850712bf2f03af01ca6101af20a0e7d Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Tue, 1 May 2012 12:05:35 -0400 Subject: [PATCH 12/14] Adds test css for css regions. --- test/fixtures/stylesheets/compass/css/regions.css | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 test/fixtures/stylesheets/compass/css/regions.css diff --git a/test/fixtures/stylesheets/compass/css/regions.css b/test/fixtures/stylesheets/compass/css/regions.css new file mode 100644 index 00000000..b85ea0ce --- /dev/null +++ b/test/fixtures/stylesheets/compass/css/regions.css @@ -0,0 +1,7 @@ +.source { + -webkit-flow-into: target; + -ms-flow-into: target; } + +.new-container { + -webkit-flow-from: target; + -ms-flow-from: target; } From e3d96ee2fa6fab3e861211a4f9edf57f8816a2c3 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Tue, 1 May 2012 09:13:57 -0700 Subject: [PATCH 13/14] Fix failing test. --- test/fixtures/stylesheets/compass/css/reset.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/fixtures/stylesheets/compass/css/reset.css b/test/fixtures/stylesheets/compass/css/reset.css index 388217c4..8e4b7f04 100644 --- a/test/fixtures/stylesheets/compass/css/reset.css +++ b/test/fixtures/stylesheets/compass/css/reset.css @@ -14,8 +14,8 @@ time, mark, audio, video { margin: 0; padding: 0; border: 0; - font-size: 100%; font: inherit; + font-size: 100%; vertical-align: baseline; } body { From 8ded2ee0394b6b67d573ebb8cae3342647b21c51 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Tue, 1 May 2012 09:21:06 -0700 Subject: [PATCH 14/14] mention the css regions support in the changelog. --- doc-src/content/CHANGELOG.markdown | 1 + 1 file changed, 1 insertion(+) diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown index 074bed04..6b0d0ff1 100644 --- a/doc-src/content/CHANGELOG.markdown +++ b/doc-src/content/CHANGELOG.markdown @@ -24,6 +24,7 @@ The Documentation for the [latest preview release](http://beta.compass-style.org vertical rhythm module work better with `rem` based measurements. * [CSS3] Added 3D transform support for Mozillia, IE, and Opera. * [CSS3] Added `-ms` support for css3 columns. Add support for the columns shorthand property. +* [CSS3] Added `-ms` and `-webkit` support for CSS Regions. [Docs](/reference/compass/css3/regions/) * [CLI] Added a `-I` option for adding sass import paths via the CLI during compilation and project set up. * [Configuration] For better ruby and rails integration, the `add_import_path` command now accepts [Sass::Importer](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#custom_importers) objects