Update the CHANGELOG for the 0.10.5 release

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

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;  }

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); }
+    }
+  }
+}
+