From c5949beca3eeec7ec0df6358f2497311255af567 Mon Sep 17 00:00:00 2001 From: Eric Meyer Date: Mon, 21 Feb 2011 23:22:55 -0700 Subject: [PATCH] bring back (deprecated) legacy reset and legacy docs --- doc-src/Gemfile.lock | 2 +- doc-src/content/CHANGELOG.markdown | 1 + .../reference/compass/reset-legacy.haml | 27 ++++ .../reset-legacy/utilities-legacy.haml | 22 +++ doc-src/content/reference/compass/reset.haml | 2 +- .../stylesheets/compass/_reset-legacy.scss | 3 + .../compass/reset/_utilities-legacy.scss | 135 ++++++++++++++++++ .../stylesheets/compass/reset/_utilities.scss | 1 - 8 files changed, 190 insertions(+), 3 deletions(-) create mode 100644 doc-src/content/reference/compass/reset-legacy.haml create mode 100644 doc-src/content/reference/compass/reset-legacy/utilities-legacy.haml create mode 100644 frameworks/compass/stylesheets/compass/_reset-legacy.scss create mode 100644 frameworks/compass/stylesheets/compass/reset/_utilities-legacy.scss diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index a6b35b27..41698cae 100644 --- a/doc-src/Gemfile.lock +++ b/doc-src/Gemfile.lock @@ -8,7 +8,7 @@ GIT PATH remote: .. specs: - compass (0.11.beta.2.0dc38bc) + compass (0.11.beta.2.65cf2f9) chunky_png (~> 0.12.0) sass (>= 3.1.0.alpha.218) diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown index cea382cd..23e0a792 100644 --- a/doc-src/content/CHANGELOG.markdown +++ b/doc-src/content/CHANGELOG.markdown @@ -27,6 +27,7 @@ The Documentation for the [latest preview release](http://beta.compass-style.org Growl when a stylesheet compilation error occurs. * A new mixin `reset-float` is available in the [float module](/reference/compass/utilities/general/float/#mixin-reset-float) that makes it easier to reset the floats introduced from that module. * Reset mixins have been updated based on [Eric Meyer's CSS Reset v2.0](http://meyerweb.com/eric/tools/css/reset/index.html). HTML5 support is included by default. + For the legacy projects, you can adjust your imports to reference the the [legacy reset](/reference/compass/reset/) or [legacy reset utilities](/reference/compass/reset/utilities/). * A new module has been added to create readable text against an arbitrary background color based on the lightness of the background: [compass/utilities/color/contrast](/reference/compass/utilities/color/contrast/). * The comma-delimited-list has been renamed to delimited-list and generalized to accept a delimiter which defaults to a comma. diff --git a/doc-src/content/reference/compass/reset-legacy.haml b/doc-src/content/reference/compass/reset-legacy.haml new file mode 100644 index 00000000..9f18b1af --- /dev/null +++ b/doc-src/content/reference/compass/reset-legacy.haml @@ -0,0 +1,27 @@ +--- +title: Compass Reset (legacy) +crumb: Reset (legacy) +framework: compass +stylesheet: compass/_reset-legacy.scss +layout: core +sidebar: true +deprecated: true +classnames: + - reference + - core + - reset +meta_description: Adds a CSS Reset into your stylesheet. +--- +- render 'reference' do + %p.warning + This import is deprecated. Please import + reset instead. + + :markdown + This module applies the [global reset](/reference/compass/reset/utilities-legacy/#mixin-global-reset) + to your stylesheet by simply importing it. + + **Note:** This module will place styles into your stylesheet by importing it. This + is not the standard behavior of a compass module but it optimizes the common use case. + If you want to control the reset, please use the mixins defined in the [reset + utilities module](/reference/compass/reset/utilities-legacy/) diff --git a/doc-src/content/reference/compass/reset-legacy/utilities-legacy.haml b/doc-src/content/reference/compass/reset-legacy/utilities-legacy.haml new file mode 100644 index 00000000..bf052936 --- /dev/null +++ b/doc-src/content/reference/compass/reset-legacy/utilities-legacy.haml @@ -0,0 +1,22 @@ +--- +title: Compass Reset Utilities (legacy) +crumb: Reset Utilities (legacy) +framework: compass +stylesheet: compass/reset/_utilities-legacy.scss +layout: core +deprecated: true +meta_description: Mixins for resetting elements. +classnames: + - reference + - core + - utilities +--- +- render 'reference' do + %p.warning + This import is deprecated. Please import + reset utilities instead. + + :markdown + These utilities are used to reset your document. The easiest way to use them + is to simply `@import "compass/reset"` which will import this module and apply + the appropriate mixins for you. diff --git a/doc-src/content/reference/compass/reset.haml b/doc-src/content/reference/compass/reset.haml index 5001a7d1..21f67fc5 100644 --- a/doc-src/content/reference/compass/reset.haml +++ b/doc-src/content/reference/compass/reset.haml @@ -19,4 +19,4 @@ meta_description: Adds a CSS Reset into your stylesheet. **Note:** This module will place styles into your stylesheet by importing it. This is not the standard behavior of a compass module but it optimizes the common use case. If you want to control the reset, please use the mixins defined in the [reset - utilities module](/reference/compass/reset/utilities/) + utilities module](/reference/compass/reset/utilities/) diff --git a/frameworks/compass/stylesheets/compass/_reset-legacy.scss b/frameworks/compass/stylesheets/compass/_reset-legacy.scss new file mode 100644 index 00000000..f11f07ac --- /dev/null +++ b/frameworks/compass/stylesheets/compass/_reset-legacy.scss @@ -0,0 +1,3 @@ +@import "reset/utilities-legacy"; + +@include global-reset; diff --git a/frameworks/compass/stylesheets/compass/reset/_utilities-legacy.scss b/frameworks/compass/stylesheets/compass/reset/_utilities-legacy.scss new file mode 100644 index 00000000..268e0f9f --- /dev/null +++ b/frameworks/compass/stylesheets/compass/reset/_utilities-legacy.scss @@ -0,0 +1,135 @@ +// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) +// Global reset rules. +// For more specific resets, use the reset mixins provided below +// +// *Please Note*: tables still need `cellspacing="0"` in the markup. +@mixin global-reset { + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, font, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td { + @include reset-box-model; + @include reset-font; } + body { + @include reset-body; } + ol, ul { + @include reset-list-style; } + table { + @include reset-table; } + caption, th, td { + @include reset-table-cell; } + q, blockquote { + @include reset-quotation; } + a img { + @include reset-image-anchor-border; } } + +// Reset all elements within some selector scope. To reset the selector itself, +// mixin the appropriate reset mixin for that element type as well. This could be +// useful if you want to style a part of your page in a dramatically different way. +// +// *Please Note*: tables still need `cellspacing="0"` in the markup. +@mixin nested-reset { + div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, + pre, a, abbr, acronym, address, code, del, dfn, em, img, + dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr { + @include reset-box-model; + @include reset-font; } + table { + @include reset-table; } + caption, th, td { + @include reset-table-cell; } + q, blockquote { + @include reset-quotation; } + a img { + @include reset-image-anchor-border; } } + +// Reset the box model measurements. +@mixin reset-box-model { + margin: 0; + padding: 0; + border: 0; + outline: 0; } + +// Reset the font and vertical alignment. +@mixin reset-font { + font: { + weight: inherit; + style: inherit; + size: 100%; + family: inherit; }; + vertical-align: baseline; } + +// Resets the outline when focus. +// For accessibility you need to apply some styling in its place. +@mixin reset-focus { + outline: 0; } + +// Reset a body element. +@mixin reset-body { + line-height: 1; + color: black; + background: white; } + +// Reset the list style of an element. +@mixin reset-list-style { + list-style: none; } + +// Reset a table +@mixin reset-table { + border-collapse: separate; + border-spacing: 0; + vertical-align: middle; } + +// Reset a table cell (`th`, `td`) +@mixin reset-table-cell { + text-align: left; + font-weight: normal; + vertical-align: middle; } + +// Reset a quotation (`q`, `blockquote`) +@mixin reset-quotation { + quotes: "" ""; + &:before, &:after { + content: ""; } } + +// Resets the border. +@mixin reset-image-anchor-border { + border: none; } + +// Unrecognized elements are displayed inline. +// This reset provides a basic reset for html5 elements +// so they are rendered correctly in browsers that don't recognize them +// and reset in browsers that have default styles for them. +@mixin reset-html5 { + article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { + @include reset-box-model; + display: block; } } + +// Resets the display of inline and block elements to their default display +// according to their tag type. Elements that have a default display that varies across +// versions of html or browser are not handled here, but this covers the 90% use case. +// Usage Example: +// +// // Turn off the display for both of these classes +// .unregistered-only, .registered-only +// display: none +// // Now turn only one of them back on depending on some other context. +// body.registered +// +reset-display(".registered-only") +// body.unregistered +// +reset-display(".unregistered-only") +@mixin reset-display($selector: "", $important: false) { + #{append-selector(elements-of-type("inline"), $selector)} { + @if $important { + display: inline !important; } + @else { + display: inline; } } + #{append-selector(elements-of-type("block"), $selector)} { + @if $important { + display: block !important; } + @else { + display: block; } } } diff --git a/frameworks/compass/stylesheets/compass/reset/_utilities.scss b/frameworks/compass/stylesheets/compass/reset/_utilities.scss index 4ae36990..cd593cfa 100644 --- a/frameworks/compass/stylesheets/compass/reset/_utilities.scss +++ b/frameworks/compass/stylesheets/compass/reset/_utilities.scss @@ -1,7 +1,6 @@ // Based on [Eric Meyer's reset 2.0](http://meyerweb.com/eric/tools/css/reset/index.html) // Global reset rules. // For more specific resets, use the reset mixins provided below - @mixin global-reset { html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,