diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown index 88bef6fa..d457a3fa 100644 --- a/doc-src/content/CHANGELOG.markdown +++ b/doc-src/content/CHANGELOG.markdown @@ -7,8 +7,23 @@ layout: article COMPASS CHANGELOG ================= +0.10.5 (UNRELEASED) +------------------- + +* The [HTML5 Reset mixin][html5-reset] now resets the following new elements: + `canvas`, `details`, `figcaption`, `hgroup`, `menu`, `summary` +* A new Utility mixin has been added: [inline-block-list][inline-block-list]. +* Compass projects can now (as was always intended) use paths outside of the project directory + for css, images, fonts, etc by configuring those locations using `xxx_path` instead of + `xxx_dir`. For instance: `css_path = "/var/www/docroot/css"`. It is recommended + to set the corresponding `http_xxx_path` when you do this, for instance: + `http_stylesheets_path = "/css"`. On the command line, all absolute urls are + treated as paths instead of relative directories so + `--css-dir /var/www/docroot/css` will set `css_path`. Should both a directory + and a path be specified, the path will override the corresponding directory. + 0.10.4 (8/08/2010) ------------------------ +------------------ * [Rails] Fixed a bug introduced in 0.10.3 that caused rails applications using the old configuration file (config/compass.config) to break. * [Extensions] Make it easier to create manifest files by allowing template files to be discovered. See the Manifest Declarations section of [extensions tutorial](http://compass-style.org/docs/tutorials/extensions/) for details. @@ -817,3 +832,5 @@ Almost definitely. Please let me know if you encounter any problems and I'll get [der-rich]: http://github.com/der-rich [adamstac]: http://github.com/adamstac [ttilley]: http://github.com/ttilley +[inline-block-list]: http://compass-style.org/docs/reference/compass/utilities/lists/inline-block-list/ +[html5-reset]: http://compass-style.org/docs/reference/compass/reset/utilities/#mixin-reset-html5 \ No newline at end of file diff --git a/examples/compass/src/bp_layout.scss b/examples/compass/src/bp_layout.scss new file mode 100644 index 00000000..0f8775a4 --- /dev/null +++ b/examples/compass/src/bp_layout.scss @@ -0,0 +1,18 @@ +@import "compass/layout/floated"; + +// It's easy to build a grid with a floated layout +$gutter: $compass-gutter-width; +$col-width: 30px; +$number-of-columns: 24; +$total-width: $number-of-columns * ($col-width + $gutter) - $gutter ; + +@mixin span($n) { + width: $n * ($col-width + $gutter) - $gutter; +} + +// Provides a number of base classes. +@include act-like-blueprint; + +#page { @extend .container; @include span($number-of-columns); } +#sidebar { @extend .column; @include span(8); } +#content { @extend .column; @include span(16); @extend .last; } diff --git a/frameworks/compass/stylesheets/compass/layout/_floated.scss b/frameworks/compass/stylesheets/compass/layout/_floated.scss new file mode 100644 index 00000000..00ee634c --- /dev/null +++ b/frameworks/compass/stylesheets/compass/layout/_floated.scss @@ -0,0 +1,111 @@ +@import "compass/utilities/general/float"; +@import "compass/utilities/general/clearfix"; + +// Direction of the float +$compass-float-direction: left !default; +// Set to 0 to disable gutters +$compass-gutter-width: 10px !default; +$compass-left-gutter-width: ceil($compass-gutter-width / 2); +$compass-right-gutter-width: floor($compass-gutter-width / 2); + +// A floated element is generally assigned a width to achieve table-less alignment +@mixin floated($side : $compass-float-direction, + $left-gutter : $compass-left-gutter-width, + $right-gutter : $compass-right-gutter-width) { + @include float($side); + @if $left-gutter > 0 { + margin-left: $left-gutter; + } + @if $right-gutter > 0 { + margin-right: $right-gutter; + } +} + +// Remove the gutter for a particular side of a floated element +// pass `both` to disable the gutter on both sides. +@mixin gutterless($side) { + margin-#{$side}: 0; + @if $side == both { + margin-#{opposite-position($side)}: 0; + } +} + +// provides the base structure required to make an element pushable in +// the specified direction (which defaults to `right`). +@mixin pushable($side: opposite-position($compass-float-direction)) { + @include float($side); + position: relative; +} + +// provides the base structure required to make an element pullable in +// the specified direction (which defaults to `left`). +@mixin pullable($side : $compass-float-direction) { + @include float($side); + position: relative; +} + +// push an element in the specified direction by the specified amount. +@mixin pushed($side, $amount) { + margin-#{$side}: -$amount; + margin-#{opposite-position($side)}: $amount; +} + +// pull an element in the specified directionn by the specified amount. +@mixin pulled($side, $amount) { + margin-#{$side}: $amount; +} + +// Take an element out of the float if it had been made floated already. +// This might be applied to an element to allow it to fill the remainder +// of a row, in which case you'll probably want to make that element also +// a float container. +@mixin sunken { + float: none; + width: auto; + margin-left: auto; + margin-right: auto; +} + +// make an element centered within its fixed-width parent. +// Can be applied to a top level float container to create +// a centered layout within the window. +@mixin centered { + margin-left: auto; + margin-right: auto; +} + +@mixin act-like-blueprint { + .clearfixed { @include pie-clearfix; } + .column { @include floated(left, 0, $compass-gutter-width); } + .last { @include gutterless(right); } + .float-container { @extend .clearfixed; } + .container { @extend .float-container; @include centered; } + .push { @include pushable; } + .pull { @include pullable; } +} + +@mixin act-like-960 { + .clearfixed { @include pie-clearfix; } + .grid { @include floated(left, $compass-gutter-left-width, $compass-gutter-right-width); } + .alpha { @include gutterless(left); } + .omega { @include gutterless(right); } + .container { @extend .clearfixed; } + .grid-container { @extend .container; @include centered; } + .push { @include pushable; } + .pull { @include pullable; } +} + +@mixin act-like-oocss { + .clearfixed { @include pie-clearfix; } + .line { @extend .clearfixed; } + .unit { @include floated(left, 0, 0); } + .lastUnit { @extend .clearfixed; @include sunken; } + .size1of1 { @include sunken; } + + @for $divisions from 2 through 5 { + @for $segment from 1 to $divisions { + .size#{$segment}of#{$divisions} { width: percentage($segment / $divisions); } + } + } +} +