summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--STARTERKIT/sass-extensions/zen-grids/DO_NOT_MODIFY2
-rw-r--r--STARTERKIT/sass-extensions/zen-grids/README.txt6
-rw-r--r--STARTERKIT/sass-extensions/zen-grids/stylesheets/zen/_background-grid.scss91
-rw-r--r--STARTERKIT/sass-extensions/zen-grids/stylesheets/zen/_grids.scss139
-rw-r--r--STARTERKIT/sass-extensions/zen-grids/zen-grids.gemspec5
5 files changed, 207 insertions, 36 deletions
diff --git a/STARTERKIT/sass-extensions/zen-grids/DO_NOT_MODIFY b/STARTERKIT/sass-extensions/zen-grids/DO_NOT_MODIFY
index 97901da..b041904 100644
--- a/STARTERKIT/sass-extensions/zen-grids/DO_NOT_MODIFY
+++ b/STARTERKIT/sass-extensions/zen-grids/DO_NOT_MODIFY
@@ -2,7 +2,7 @@ This is a copy of the "zen-grids" extension.
It now overrides the original which was found here:
-/Library/Ruby/Gems/1.8/gems/zen-grids-1.0.beta.4
+/Library/Ruby/Gems/1.8/gems/zen-grids-1.0.beta.5
Unpacking an extension is useful when you need to easily peruse the
extension's source. You might find yourself tempted to change the
diff --git a/STARTERKIT/sass-extensions/zen-grids/README.txt b/STARTERKIT/sass-extensions/zen-grids/README.txt
index bf22b80..0eda74a 100644
--- a/STARTERKIT/sass-extensions/zen-grids/README.txt
+++ b/STARTERKIT/sass-extensions/zen-grids/README.txt
@@ -22,13 +22,13 @@ to a 12 column grid.
@include zen-grid-container;
}
.sidebar1 {
- @include zen-grid(1, 3); // 3 col. wide sidebar starting in the 1st column
+ @include zen-grid(3, 1); // 3 col. wide sidebar starting in the 1st column
}
.content {
- @include zen-grid(4, 6); // 6 col. wide element starting in the 4th column
+ @include zen-grid(6, 4); // 6 col. wide element starting in the 4th column
}
.sidebar2 {
- @include zen-grid(10, 3); // 3 col. wide sidebar starting in the 10th column
+ @include zen-grid(3, 10); // 3 col. wide sidebar starting in the 10th column
}
Within the .container element, the .sidebar1, .sidebar2 and .content elements
diff --git a/STARTERKIT/sass-extensions/zen-grids/stylesheets/zen/_background-grid.scss b/STARTERKIT/sass-extensions/zen-grids/stylesheets/zen/_background-grid.scss
new file mode 100644
index 0000000..76730b0
--- /dev/null
+++ b/STARTERKIT/sass-extensions/zen-grids/stylesheets/zen/_background-grid.scss
@@ -0,0 +1,91 @@
+@import "zen/grids";
+
+// Specify the number of columns in the grid.
+$bg-grid-column-count: $zen-column-count !default;
+
+// Specify the width of the gutters; half of the gutter will be placed on each
+// side of a grid column.
+$bg-grid-gutter-width: $zen-gutter-width !default;
+
+// Specify the column background color.
+$bg-grid-color: #ffdede !default;
+
+// Specify the width of the entire grid. Defaults to 100% for a fluid responsive
+// design, but you can change this to a pixel value if you need a fixed grid.
+$bg-grid-width: $zen-grid-width !default;
+
+// Specify the default floating direction for zen's mixins.
+$bg-float-direction: $zen-float-direction !default;
+
+
+//
+// This mixin currently requires the following markup at the top of the responsive container (e.g. body or div#page, etc.).
+// <p class="bg-grid">
+// <span class="bgcol-1">1</span><span class="bgcol-2">2</span><span class="bgcol-3">3</span><span class="bgcol-4">4</span><span class="bgcol-5">5</span><span class="bgcol-6">6</span><span class="bgcol-7">7</span><span class="bgcol-8">8</span><span class="bgcol-9">9</span><span class="bgcol-10">10</span><span class="bgcol-11">11</span><span class="bgcol-12">12</span><span class="bgcol-13">13</span><span class="bgcol-14">14</span><span class="bgcol-15">15</span><span class="bgcol-16">16</span><span class="bgcol-17">17</span><span class="bgcol-18">18</span><span class="bgcol-19">19</span><span class="bgcol-20">20</span><span class="bgcol-21">21</span><span class="bgcol-22">22</span><span class="bgcol-23">23</span><span class="bgcol-24">24</span><span class="bgcol-25">25</span><span class="bgcol-26">26</span><span class="bgcol-27">27</span><span class="bgcol-28">28</span><span class="bgcol-29">29</span><span class="bgcol-30">30</span>
+// <span class="bgcolrev-1">1</span><span class="bgcolrev-2">2</span><span class="bgcolrev-3">3</span><span class="bgcolrev-4">4</span><span class="bgcolrev-5">5</span><span class="bgcolrev-6">6</span><span class="bgcolrev-7">7</span><span class="bgcolrev-8">8</span><span class="bgcolrev-9">9</span><span class="bgcolrev-10">10</span><span class="bgcolrev-11">11</span><span class="bgcolrev-12">12</span><span class="bgcolrev-13">13</span><span class="bgcolrev-14">14</span><span class="bgcolrev-15">15</span><span class="bgcolrev-16">16</span><span class="bgcolrev-17">17</span><span class="bgcolrev-18">18</span><span class="bgcolrev-19">19</span><span class="bgcolrev-20">20</span><span class="bgcolrev-21">21</span><span class="bgcolrev-22">22</span><span class="bgcolrev-23">23</span><span class="bgcolrev-24">24</span><span class="bgcolrev-25">25</span><span class="bgcolrev-26">26</span><span class="bgcolrev-27">27</span><span class="bgcolrev-28">28</span><span class="bgcolrev-29">29</span><span class="bgcolrev-30">30</span>
+// </p>
+//
+@mixin -experimental-bg-grid(
+ $column-count: $bg-grid-column-count,
+ $gutter-width: $bg-grid-gutter-width,
+ $grid-color: $bg-grid-color,
+ $grid-width: $bg-grid-width,
+ $flow-direction: $bg-float-direction
+) {
+
+ // Internal variables.
+ $dir: $flow-direction;
+ @if $zen-reverse-all-floats {
+ $dir: zen-direction-flip($dir);
+ }
+ $rev: zen-direction-flip($dir);
+
+ $font-size: 16px;
+ $line-height: 24px;
+ $color-bg: #fff;
+
+ @include zen-grid-container;
+ position: absolute;
+ position: fixed;
+ z-index: -1;
+ margin: 0 auto;
+ width: $grid-width;
+ height: 100%;
+ font-size: $font-size;
+ line-height: $line-height;
+ font-weight: bold;
+ font-family: sans-serif;
+ background-color: $color-bg;
+
+ span {
+ @include zen-grid-item-base;
+ padding: 0;
+ text-align: center;
+ color: $color-bg;
+ @include text-shadow(darken($grid-color, 75%) 0 0 4px);
+ }
+ @for $i from 1 through $column-count {
+ .bgcol-#{$i} {
+ @include zen-grid-item(1, $i, $column-count: $column-count, $gutter-width: $gutter-width, $float-direction: $dir, $auto-include-item-base: false);
+ height: 100%;
+ margin-bottom: -($line-height);
+ background-color: $grid-color;
+ border: {
+ left: zen-half-gutter($gutter-width) solid $color-bg;
+ right: zen-half-gutter($gutter-width) solid $color-bg;
+ }
+ }
+ .bgcolrev-#{$i} {
+ @if $i == 1 {
+ @include zen-clear();
+ }
+ @include zen-grid-item(1, $i, $column-count: $column-count, $gutter-width: $gutter-width, $float-direction: $rev, $auto-include-item-base: false);
+ }
+ }
+ @for $i from ($column-count + 1) through 30 {
+ .bgcol-#{$i},
+ .bgcolrev-#{$i} {
+ display: none;
+ }
+ }
+}
diff --git a/STARTERKIT/sass-extensions/zen-grids/stylesheets/zen/_grids.scss b/STARTERKIT/sass-extensions/zen-grids/stylesheets/zen/_grids.scss
index 12394ce..1520f6d 100644
--- a/STARTERKIT/sass-extensions/zen-grids/stylesheets/zen/_grids.scss
+++ b/STARTERKIT/sass-extensions/zen-grids/stylesheets/zen/_grids.scss
@@ -33,6 +33,16 @@ $zen-box-sizing: border-box !default;
$legacy-support-for-ie7: false !default;
$legacy-support-for-ie6: false !default;
+// Specify the method to add IE legacy support; can be hack or class. Setting
+// this to class will result in generated CSS rules using html/body classes
+// specified in $default-legacy-ie*-class variables, like those used in HTML5
+// Boilerplate.
+$default-legacy-ie-approach: hack !default;
+
+// The html/body classes to use when $default-legacy-ie-approach equals class.
+$default-legacy-ie6-class: lt-ie7;
+$default-legacy-ie7-class: lt-ie8;
+
// Specify the default floating direction for zen's mixins.
$zen-float-direction: left !default;
@@ -89,6 +99,10 @@ $zen-reverse-all-floats: false !default;
// Calculate the unit width.
$unit-width: $grid-width / $column-count;
+ @if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) {
+ @warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$column-count} columns.";
+ }
+
// Determine the float direction and its reverse.
$dir: $float-direction;
@if $reverse-all-floats {
@@ -97,7 +111,16 @@ $zen-reverse-all-floats: false !default;
$rev: zen-direction-flip($dir);
float: $dir;
- width: $column-span * $unit-width;
+ $width: $column-span * $unit-width;
+ @if $box-sizing == content-box {
+ @if not comparable($width, $gutter-width) {
+ $units-gutter: unit($gutter-width);
+ $units-grid: unit($grid-width);
+ @warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
+ }
+ $width: $width - $gutter-width;
+ }
+ width: $width;
margin: {
#{$dir}: ($column-position - 1) * $unit-width;
#{$rev}: (1 - $column-position - $column-span) * $unit-width;
@@ -122,11 +145,20 @@ $zen-reverse-all-floats: false !default;
// cooler. IE 6 and 7 don't support border-box.
@mixin zen-grid-item-base (
$gutter-width: $zen-gutter-width,
- $box-sizing: $zen-box-sizing
+ $box-sizing: $zen-box-sizing,
+ $flow-direction: $zen-float-direction,
+ $reverse-all-flows: $zen-reverse-all-floats
) {
+
+ $dir: $flow-direction;
+ @if $reverse-all-flows {
+ $dir: zen-direction-flip($dir);
+ }
+ $rev: zen-direction-flip($dir);
+
padding: {
- left: zen-half-gutter($gutter-width);
- right: zen-half-gutter($gutter-width);
+ left: zen-half-gutter($gutter-width, $dir);
+ right: zen-half-gutter($gutter-width, $rev);
}
// Specify the border-box properties.
@if $box-sizing == border-box {
@@ -147,18 +179,29 @@ $zen-reverse-all-floats: false !default;
@warn "IE legacy support is on, but $box-sizing is set to #{$box-sizing} and the $box-sizing-polyfill-path is empty.";
}
@else {
- @if $legacy-support-for-ie7 and $box-sizing-polyfill-path {
- .ie7 & {
- behavior: url($box-sizing-polyfill-path);
+ @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
+ @if $box-sizing-polyfill-path {
+ @if $default-legacy-ie-approach == hack {
+ *behavior: url($box-sizing-polyfill-path);
+ }
+ @else {
+ #{$default-legacy-ie7-class} & {
+ behavior: url($box-sizing-polyfill-path);
+ }
+ }
}
- }
- @if $legacy-support-for-ie6 {
- .ie6 & {
- display: inline; // display inline or double your floated margin! [1]
- overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3]
- overflow-y: visible;
- @if $box-sizing-polyfill-path {
- behavior: url($box-sizing-polyfill-path);
+ @if $legacy-support-for-ie6 {
+ @if $default-legacy-ie-approach == hack {
+ _display: inline; // display inline or double your floated margin! [1]
+ _overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3]
+ _overflow-y: visible;
+ }
+ @else {
+ #{$default-legacy-ie6-class} & {
+ display: inline; // display inline or double your floated margin! [1]
+ overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3]
+ overflow-y: visible;
+ }
}
// 1. http://www.positioniseverything.net/explorer/doubled-margin.html
// 2. http://browservulsel.blogspot.com/2005/04/ie-overflow-auto-scrollbar-overlap.html
@@ -186,8 +229,10 @@ $zen-reverse-all-floats: false !default;
//
// Apply this to an HTML item that is in the normal flow of a document to help
// align it to the grid. Set the $column-span to the number of columns that the
-// HTML element should span. Set the $column-count to the number of columns that
-// the parent element spans.
+// HTML element should span. For responsive layouts with a percentage-based grid
+// width, set the $parent-column-count to the number of columns that the parent
+// element spans; fixed-unit layouts using px, em, etc. do not need to specify
+// this.
//
// Unlike the zen-grid-item() mixin, this mixin does not float the HTML item; it
// also does not have a half-gutter on each side. By default, it has no gutter
@@ -201,39 +246,60 @@ $zen-reverse-all-floats: false !default;
//
@mixin zen-grid-flow-item (
$column-span,
- $column-count,
+ $parent-column-count: false,
$alpha-gutter: false,
$omega-gutter: true,
+ $flow-direction: $zen-float-direction,
+ $column-count: $zen-column-count,
$gutter-width: $zen-gutter-width,
$grid-width: $zen-grid-width,
$box-sizing: $zen-box-sizing,
- $auto-include-flow-item-base: $zen-auto-include-flow-item-base,
- $flow-direction: $zen-float-direction
+ $reverse-all-flows: $zen-reverse-all-floats,
+ $auto-include-flow-item-base: $zen-auto-include-flow-item-base
) {
+ $columns: $column-count;
+ @if unit($grid-width) == "%" {
+ @if $parent-column-count == false {
+ @warn "For responsive layouts with a percentage-based grid width, you must set the $column-count to the number of columns that the parent element spans.";
+ }
+ @else {
+ $columns: $parent-column-count;
+ }
+ }
+
$dir: $flow-direction;
- @if $zen-reverse-all-floats {
+ @if $reverse-all-flows {
$dir: zen-direction-flip($dir);
}
$rev: zen-direction-flip($dir);
// Ensure the HTML item either has a full gutter or no gutter on each side.
@if $alpha-gutter {
- margin-#{$dir}: zen-half-gutter($gutter-width);
+ margin-#{$dir}: zen-half-gutter($gutter-width, $rev);
}
@else {
- margin-#{$dir}: -1 * zen-half-gutter($gutter-width);
+ margin-#{$dir}: -(zen-half-gutter($gutter-width, $dir));
}
@if $omega-gutter {
- margin-#{$rev}: zen-half-gutter($gutter-width);
+ margin-#{$rev}: zen-half-gutter($gutter-width, $dir);
}
@else {
- margin-#{$rev}: -1 * zen-half-gutter($gutter-width);
+ margin-#{$rev}: -(zen-half-gutter($gutter-width, $rev));
}
// Calculate the unit width.
- $unit-width: $grid-width / $column-count;
- width: $column-span * $unit-width;
+ $unit-width: $grid-width / $columns;
+ $width: $column-span * $unit-width;
+ @if $box-sizing == content-box {
+ @if not comparable($width, $gutter-width) {
+ $units-gutter: unit($gutter-width);
+ $units-grid: unit($grid-width);
+ @warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
+ }
+ $width: $width - $gutter-width;
+ }
+ width: $width;
// Auto-apply the unit base mixin.
@if $auto-include-flow-item-base {
@@ -247,9 +313,22 @@ $zen-reverse-all-floats: false !default;
//
// Returns a half gutter width.
-@function zen-half-gutter($gutter-width: $zen-gutter-width) {
- // @todo Handle odd-pixel-sized gutters.
- @return $gutter-width / 2;
+@function zen-half-gutter(
+ $gutter-width: $zen-gutter-width,
+ $gutter-side: $zen-float-direction,
+ $flow-direction: $zen-float-direction
+) {
+ $half-gutter: $gutter-width / 2;
+ // Special handling in case gutter has an odd number of pixels.
+ @if unit($gutter-width) == "px" {
+ @if $gutter-side == $flow-direction {
+ @return floor($half-gutter);
+ }
+ @else {
+ @return ceil($half-gutter);
+ }
+ }
+ @return $half-gutter;
}
// Returns the opposite direction, given "left" or "right".
diff --git a/STARTERKIT/sass-extensions/zen-grids/zen-grids.gemspec b/STARTERKIT/sass-extensions/zen-grids/zen-grids.gemspec
index 9e296a6..2e48ec3 100644
--- a/STARTERKIT/sass-extensions/zen-grids/zen-grids.gemspec
+++ b/STARTERKIT/sass-extensions/zen-grids/zen-grids.gemspec
@@ -9,8 +9,8 @@ Gem::Specification.new do |s|
s.homepage = 'http://zengrids.com'
s.rubyforge_project =
- s.version = '1.0.beta.4'
- s.date = '2012-02-09'
+ s.version = '1.0.beta.5'
+ s.date = '2012-02-13'
s.authors = ['John Albin Wilkins']
s.email = 'virtually.johnalbin@gmail.com'
@@ -22,6 +22,7 @@ Gem::Specification.new do |s|
README.txt
lib/zen-grids.rb
stylesheets/_zen.scss
+ stylesheets/zen/_background-grid.scss
stylesheets/zen/_columns.scss
stylesheets/zen/_grids.scss
templates/project/example.html