Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: heygrady/compass-grid-plugin
base: 0067dd9f94
...
head fork: heygrady/compass-grid-plugin
compare: 2b4daf8f66
  • 4 commits
  • 9 files changed
  • 0 commit comments
  • 1 contributor
View
15 README.md
@@ -63,7 +63,7 @@ The primary grid is a fixed, pixel grid. This grid is ideal for designs that do
- **grid-offset(** *[$i: 1]*, *[$plus: 0]*, *[$side]* **)** - Mixin for altering the left or right margin on a column. Useful for adding empty columns before or after a column. The `$i` argument specifies the width of the offset in columns. The `$plus` argument can be used to alter the width. *$side* can be right, left, top or bottom (although right and left are the most useful).
- **grid-offset-left(** *[$i: 1]*, *[$plus: 0]* **)** - Convenience mixin for setting the left margin on a column. The `$i` argument specifies the width of the offset in columns. The `$plus` argument can be used to alter the width.
- **grid-offset-right(** *[$i: 1]*, *[$plus: 0]* **)** - Convenience mixin for setting the right margin on a column. The `$i` argument specifies the width of the offset in columns. The `$plus` argument can be used to alter the width.
-- **grid-css( )** - outputs the default grid CSS in case those classes are required in the markup.
+- **grid-css( )** - Outputs the default grid CSS in case those classes are required in the markup.
## Fluid Grid Usage
This is a fluid version of the grid that uses percentages for widths. This grid is ideal for responsive designs that need to scale depending on the device. The fluid grid is more complex because percentage widths depend on their context for meaning. Every function and mixin is similar to the fixed grid but there are two additional variables to provide context.
@@ -80,7 +80,7 @@ The fluid grid uses the variables from the fixed grid module.
### Functions
- **fluid-column-width(** *$i*, *[$plus: 0]*, *[$context: $grid-columns]*, *[$context-plus: 0]*, *[$nudge: false]* **)** - Function for calculating column widths. Useful for integrating standard grid measurements into other elements, besides columns. Particularly useful for using columns widths as margin or padding.
- **fluid-gutter-width(** *[$context: $grid-columns]*, *[$context-plus: 0]*, *[$row: false]*, *[$nudge: false]* **)** - Function for calculating the width of a gutter. Useful for applying margins to columns and rows. The `$row` argument controls if the returned length is negative or not. Rows require a negative margin.
-- **fluid-width(** *$width*, *[$context-width: grid-column-width($grid-columns, $grid-gutter-width)]*, *[$nudge: false]* **)** - Function for calculating arbitrary widths.
+- **fluid-width(** *$width*, *[$context-width: grid-column-width($grid-columns, $grid-gutter-width)]*, *[$nudge: false]* **)** - Function for calculating arbitrary widths in percentages. The `$width` is the width of the element you want to calculate and `$context` is the width of the parent element.
- **fluid-nudge(** *[$context-width: grid-column-width($grid-columns, $grid-gutter-width)]*, *[$nudge: false]* **)** - Function for calculating width of a half-pixel. Used for correcting for IE6 and IE7 because they always roundup.
### Mixins
@@ -90,16 +90,15 @@ The fluid grid uses the variables from the fixed grid module.
- **fluid-column(** *[$i: false]*, *[$plus: 0]*, *[$context: $grid-columns]*, *[$context-plus: 0]*, *[$with-gutters: true]* **)** - Mixin for declaring a column. Specifying `$i` will call the `grid` mixin. The `$plus` argument is passed to the *grid* mixin if `$i` is also specified. The `$with-gutters` argument can be used to omit the gutter margins.
- **fluid-offset(** *[$i: 1]*, *[$plus: 0]*, *[$side]*, *[$context: $grid-columns]*, *[$context-plus: 0]* **)** - Mixin for altering the left or right margin on a column. Useful for adding empty columns before or after a column. The `$i` argument specifies the width of the offset in columns. The `$plus` argument can be used to alter the width. `$side` can be right, left, top or bottom (although right and left are the most useful).
- **fluid-gutters(** *[$context: $grid-columns]*, *[$context-plus: 0]*, *[$row: false]* **)** - Mixin for adding gutter margins to a column or a row. The `$row` argument controls if the returned margins are negative. Rows require a negative margin.
-- **fluid-row-gutters( *[$context: $grid-columns]*, *[$context-plus: 0]* )** - Mixin for adding gutter margins to a row.
-- **fluid-column-gutters( *[$context: $grid-columns]*, *[$context-plus: 0]* )** - Mixin for adding gutter margins to a column.
+- **fluid-row-gutters(** *[$context: $grid-columns]*, *[$context-plus: 0]* **)** - Mixin for adding gutter margins to a row.
+- **fluid-column-gutters(** *[$context: $grid-columns]*, *[$context-plus: 0]* **)** - Mixin for adding gutter margins to a column.
- **fluid-offset-left(** *[$i: 1]*, *[$plus: 0]*, *[$context: $grid-columns]*, *[$context-plus: 0]* **)** - Convenience mixin for setting the left margin on a column. The `$i` argument specifies the width of the offset in columns. The `$plus` argument can be used to alter the width.
- **fluid-offset-right(** *[$i: 1]*, *[$plus: 0]*, *[$context: $grid-columns]*, *[$context-plus: 0]* **)** - Convenience mixin for setting the right margin on a column. The `$i` argument specifies the width of the offset in columns. The `$plus` argument can be used to alter the width.
-- **fluid-css( )** - outputs the default fluid grid CSS in case those classes are required in the markup.
+- **fluid-css( )** - Outputs the default fluid grid CSS in case those classes are required in the markup.
## Notes
- You must define a `.clearfix` class for the grid to work properly. The grid attempts to extend an existing `.clearfix` class. By default a clearfix class is output automatically. If you want to use your own, you can set `$grid-clearfix-class: false;`.
- The only thing requiring an IE6 fix is the floats on columns.
-- In order to support accurate fluid grid percentages, the number precision in Sass is set to 8.
-- The fluid grid is not designed to work in older versions of IE, below version 8. The fluid grid is intended to be used on modern devices that support media queries.
-- The only thing in the fluid grid not supported in IE7 is the use of `box-sizing`. This will only matter if borders or padding are added to a column.
+- In order to support accurate fluid grid percentages, the number precision in Sass is set to 7.
+- The fluid grid uses of `box-sizing` which isn't supported in IE7 or below. This will only matter if borders or padding are added to a column.
- The CSS generated by `@include fluid-css` for the fluid grid will not work in IE6 because of the use of the direct child selector.
View
3  example/scss/example-fluid.scss
@@ -1,7 +1,8 @@
$grid-clearfix-class: false; // don't auto create the clearfix
// import the grid
-@import "grid/fluid";
+@import "../../stylesheets/grid";
+@import "../../stylesheets/grid/fluid";
// establishes page width and centers
#container {
View
2  example/scss/example.scss
@@ -1,5 +1,5 @@
// import the grid
-@import "grid";
+@import "../../stylesheets/grid";
$grid-clearfix-class: false;
// establishes page width and centers
View
1  example/scss/fluid.scss
@@ -1,6 +1,7 @@
$fluid-support-for-ie7: true;
// import the grid
+@import "../../stylesheets/grid";
@import "../../stylesheets/grid/fluid";
@include grid-css;
@include fluid-css;
View
4 example/scss/media.scss
@@ -1,6 +1,6 @@
// import the grid
-@import "grid";
-@import "grid/fluid";
+@import "../../stylesheets/grid";
+@import "../../stylesheets/grid/fluid";
// generic styles
.float-left, .float-right { margin-bottom: ($grid-gutter-width / 2); }
View
2  lib/compass/grid/version.rb
@@ -1,5 +1,5 @@
module Compass
module Grid
- VERSION = '0.0.4'
+ VERSION = '0.0.5'
end
end
View
2  stylesheets/_grid.scss
@@ -52,7 +52,7 @@ $grid-support-for-ie6: false !default;
}
// return a row width in pixels
-@function grid-row-width($i, $plus: 0) {
+@function grid-row-width($i: $grid-columns, $plus: 0) {
@return grid-column-width($i, $plus + $grid-gutter-width);
}
View
26 stylesheets/grid/_fluid.scss
@@ -2,13 +2,13 @@
@import "compass/css3/box-sizing";
// Ensure grid is included
-@import "grid";
-@import "grid/fluid/helpers";
+@import "../../stylesheets/grid";
//-----------------------------------
// Defaults
//-----------------------------------
$fluid-support-for-ie7: false !default;
+$fluid-debug: false !default;
//-----------------------------------
// Column Widths
@@ -16,6 +16,8 @@ $fluid-support-for-ie7: false !default;
// apply a width to a column
@mixin fluid($i, $plus: 0, $context: $grid-columns, $context-plus: 0, $with-gutters: false) {
+ @if $fluid-debug { @debug "@mixin fluid", $i, $plus, $context, $context-plus, $with-gutters; }
+
width: fluid-column-width($i, $plus, $context, $context-plus);
@if $fluid-support-for-ie7 {
*width: fluid-column-width($i, $plus, $context, $context-plus, $nudge: true);
@@ -25,6 +27,8 @@ $fluid-support-for-ie7: false !default;
// apply standard gutters to a column or row
@mixin fluid-gutters($context: $grid-columns, $context-plus: 0, $row: false) {
+ @if $fluid-debug { @debug "@mixin fluid-gutters", $context, $context-plus, $row; }
+
margin: 0 fluid-gutter-width($context, $context-plus, $row);
@if $fluid-support-for-ie7 {
*margin: 0 fluid-gutter-width($context, $context-plus, $row, $nudge: true);
@@ -39,16 +43,22 @@ $fluid-support-for-ie7: false !default;
// return a percentage column width relative to a row width
@function fluid-column-width($i, $plus: 0, $context: $grid-columns, $context-plus: 0, $nudge: false) {
+ @if $fluid-debug { @debug "@function fluid-column-width", $i, $plus, $context, $context-plus, $nudge; }
+
@return fluid-width(grid-column-width($i, $plus), grid-row-width($context, $context-plus), $nudge);
}
// return a percentage gutter width relative to a column or row width
@function fluid-gutter-width($context: $grid-columns, $context-plus: 0, $row: false, $nudge: false) {
- @return fluid-width($grid-gutter-width / 2 * if($row, -1, 1), grid-row-width($context, $context-plus + if($row, 0, $grid-gutter-width)), $nudge);
+ @if $fluid-debug { @debug "@function fluid-gutter-width", $context, $context-plus, $row, $nudge; }
+
+ @return fluid-width($grid-gutter-width / 2 * if($row, -1, 1), grid-row-width($context, $context-plus + if($row, -$grid-gutter-width, 0)), $nudge);
}
// return a percentage width relative to a parent width
@function fluid-width($width, $context-width: grid-column-width($grid-columns, $grid-gutter-width), $nudge: false) {
+ @if $fluid-debug { @debug "@function fluid-width", $width, $context-width, $nudge; }
+
@return percentage($width / $context-width) + if($nudge, fluid-nudge($context-width), 0);
}
@@ -64,6 +74,8 @@ $fluid-support-for-ie7: false !default;
// specify a container as a page
@mixin fluid-page($i: $grid-columns, $plus: 0, $use-max-width: true) {
+ @if $fluid-debug { @debug "@mixin fluid-page", $i, $plus, $use-max-width; }
+
@extend .clearfix;
@include box-sizing(border-box);
@if $use-max-width { max-width: grid-column-width($i, $plus + $grid-gutter-width); }
@@ -73,6 +85,8 @@ $fluid-support-for-ie7: false !default;
// specify a container as a row
@mixin fluid-row($page: false, $context: $grid-columns, $context-plus: 0) {
+ @if $fluid-debug { @debug "@mixin fluid-row", $page, $context, $context-plus; }
+
@extend .clearfix;
@include box-sizing(border-box);
width: auto;
@@ -91,6 +105,8 @@ $fluid-support-for-ie7: false !default;
// specify a column
@mixin fluid-column($i: false, $plus: 0, $context: $grid-columns, $context-plus: 0, $with-gutters: true) {
+ @if $fluid-debug { @debug "@mixin fluid-column", $i, $plus, $context, $context-plus, $with-gutters; }
+
@include box-sizing(border-box);
float: left;
@if $grid-support-for-ie6 { _display: inline; }
@@ -102,7 +118,9 @@ $fluid-support-for-ie7: false !default;
// alter the margins of a column
@mixin fluid-offset($i: 1, $plus: 0, $side: left, $context: $grid-columns, $context-plus: 0) {
- margin-#{$side}: (fluid-column-width($i, $plus) + fluid-gutter-width($context, $context-plus) * 3);
+ @if $fluid-debug { @debug "@mixin fluid-column", $i, $plus, $side, $context, $context-plus; }
+
+ margin-#{$side}: (fluid-column-width($i, $plus, $context, $context-plus) + fluid-gutter-width($context, $context-plus) * 3);
@if $fluid-support-for-ie7 {
*margin-#{$side}: (fluid-column-width($i, $plus, $context, $context-plus, $nudge: nudge) + fluid-gutter-width($context, $context-plus, $nudge: nudge) * 3);
}
View
14 stylesheets/grid/fluid/_helpers.scss
@@ -1,14 +0,0 @@
-
-// Force Sass to return a decimal to the current precision
-@function real-percentage($a, $b) {
- $prec: pow(10, precision());
- @return round($a / $b * $prec) / $prec;
-}
-
-// Return the nth item in a list or a default value
-@function nth-else($list, $n, $else: false) {
- @if type-of($list) != list {
- @return if($n == 1, $list, $else);
- }
- @return if($n <= length($list), nth($list, $n), $else);
-}

No commit comments for this range

Something went wrong with that request. Please try again.