forked from Compass/compass
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update the CHANGELOG for the 0.10.5 release
- Loading branch information
1 parent
b6b0723
commit b13f5ac
Showing
3 changed files
with
147 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; } |
111 changes: 111 additions & 0 deletions
111
frameworks/compass/stylesheets/compass/layout/_floated.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); } | ||
| } | ||
| } | ||
| } | ||
|
|