Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

change API terminology, account for container-outer-width

  • Loading branch information...
commit 6d557090a0262e7afedac99add19d53c69910aa4 1 parent e3f8366
@ericam authored
View
30 CHANGELOG.mkdn
@@ -19,23 +19,29 @@ New Features:
* The `space` function can be used anywhere you need column+gutter math.
* `push`, `pull`, `pre`, `post`, and `squish` add margin left/right shortcuts.
+Changed API:
+
+* `$total-cols` => `$total-columns`
+* `$col-width` => `$column-width`
+* `$side-gutter-width` => `$grid-padding`
+* `+un-column` & `+reset-column` => `+reset-columns`
+
Removed:
-* `alpha` and `full` are no longer needed!
-* The poorly named `un-column` and `reset-column` have been replaced
-once-and-for-all with `reset-columns` (to match the `columns` mixin).
-* `side-gutter()` is no longer meaningful. Use `$side-gutter-width`.
+* `alpha` is no longer needed.
+* `full` can be replaced by a simple `clear: both;` when needed.
+* `side-gutter()` is no longer needed. Use `$grid-padding` instead.
Upgrade:
-1. Remove any mention of 'alpha' and 'full' in your code. In some cases you
- will want to replace 'full' with a simple `clear: both;`.
-2. Replace any mention of 'un-column' or 'reset-column' with 'reset-columns'.
-3. Remove any mention of `side-gutter()`. Side-gutters are no longer forced
- fluid, so they can be referenced directly with `$side-gutter-width`. _This may cause refactoring for certain edge cases_.
-4. Any time 'columns' and 'omega' are declared in the same block, they can now
- be joined together. `@include columns(3); @include omega();` can become
- `@include columns(3 omega)`.
+1. Find and replace the 4 "Changed API's" listed above.
+2. Remove any mention of `alpha` and `full` in your code.
+ * Replace `full` with `clear: both;` where necessary.
+3. Remove any mention of `side-gutter()`.
+ * This may require some refactoring, depending on your uses.
+4. [Optional] Any time 'columns' and 'omega' are declared in the same block,
+ they can now be joined together. `@include columns(3); @include omega();`
+ can become `@include columns(3 omega)`.
You're done! Stop worrying about all that "nested vs. root" bullshit, and start playing with the new toys!
View
35 README.mkdn
@@ -11,16 +11,15 @@ Melts in the mouth
------------------
Susy grids are always fluid on the inside, but contained in the candy shell of
-your choice (fixed/fluid/elastic). That allows them to flex, react, and move
-as needed.
+your choice (fixed/fluid/elastic/magic). That allows them to flex, react, and
+move as needed.
-Built entirely native to [Compass](http://compass-style.org/), Susy is based
-on the philosophy and techniques of [Natalie Downe](http://natbat.net/)'s
-"[CSS Systems](http://www.slideshare.net/nataliedowne/css-systems-presentation)
-" - which introduces difficult math in return for beautiful structure and
-flexibility.
-
-Susy will do all the math, and let you focus on your designs.
+What's a magic grid? That's Susy's Special Sauce. The magic grid begins as a
+simple fixed or elastic grid, but becomes fluid when the window is too small
+to contain it. Based on Natalie Downe's "[CSS Systems]
+(http://www.slideshare.net/nataliedowne/css-systems-presentation)" - this
+otherwise math-heavy technique becomes simple with Susy. It's the only grid
+system I know of that could never exist as a library apart from Sass.
Installation
------------
@@ -35,14 +34,13 @@ _(This now refers to the unreleased 1.0 version of Susy.)_
### Settings:
-Set up your default grid values: total columns, column width, gutter width,
-and side-gutter width.
+Set up your default grid values: total columns, column width, and gutter width.
```scss
-$total-cols : 12; /* a 12-column grid */
-$col-width : 4em; /* each column is 4em wide */
-$gutter-width : 1em; /* 1em gutters between columns */
-$side-gutter-width : $gutter-width; /* 1em padding on the entire grid */
+$total-columns : 12; /* a 12-column grid */
+$column-width : 4em; /* each column is 4em wide */
+$gutter-width : 1em; /* 1em gutters between columns */
+$grid-padding : $gutter-width; /* 1em padding on the grid */
```
### Mixins:
@@ -61,6 +59,7 @@ For example:
```scss
#page {
@include container;
+ /* If you want padding on the grid, just add it to the container. */
/*
full-width items like the header don't need any help from Susy:
@@ -96,11 +95,13 @@ The point is to change layouts (number of columns in the grid) at breakpoints. I
.container { @include container; }
}
-/* Between the min-width of 30em and the max-width of 60em, use a 10-column layout. Provide a fallback class for IE. */
+/* Between the min-width of 30em and the max-width of 60em,
+ use a 10-column layout. Provide a fallback class for IE. */
@include at-breakpoint(30em 10 60em ie) {
.container { @include container; }
}
-/* Create all your container layouts in one go. Each argument accepts min/layout/max/ie, same as at-breakpoint. */
+/* Create all your container layouts in one go.
+ Each argument accepts min/layout/max/ie, same as at-breakpoint. */
.container { @include container(4,8,12); }
```
View
2  sass/susy/_background.scss
@@ -10,7 +10,7 @@
// Uses all your settings to create a grid background for a container element.
// Note: Sub-pixel rounding can lead to several pixels of variation between browsers.
@mixin susy-grid-background (){
- @include column-grid-background($total-cols, $col-width, $gutter-width, $side-gutter-width*0, $force-fluid: true);
+ @include column-grid-background($total-columns, $column-width, $gutter-width, $column-width*0, $force-fluid: true);
@include background-origin(content-box);
@include background-clip(content-box);
}
View
63 sass/susy/_functions.scss
@@ -10,28 +10,32 @@ $browser-default-font-size : 16px;
// ---------------------------------------------------------------------------
// Grid Functions
-// Returns the full width of a grid based on your grid settings
-// Including or excluding side-gutters, depending on context.
+// Returns the full width of a grid based on your grid settings.
//
// $columns : The number of columns to get width for.
-// $nested : If the columns are nested, we don't need side-gutters.
@function columns-width(
- $columns : false
+ $columns : $total-columns
) {
- $columns: if($columns, $columns, $total-cols);
+ $columns : if($columns,$columns,$total-columns);
+ @return ($columns * $column-width) + (ceil($columns - 1) * $gutter-width);
+}
- $columns-width: ($columns * $col-width) + (ceil($columns - 1) * $gutter-width);
- @return $columns-width;
+// Return the full outer width of a Container element.
+//
+// $columns : The number of columns in the Grid Layout.
+@function container-outer-width(
+ $columns : $total-columns
+) {
+ @return columns-width($columns) + $grid-padding*2;
}
// Return the percentage width of a single column in a given 'context'.
//
// $context : The grid context in columns, if nested.
@function column(
- $context : false
+ $context : $total-columns
) {
- $column: percentage($col-width / columns-width($context));
- @return $column;
+ @return percentage($column-width / columns-width($context));
}
// Return the percentage width of multiple 'columns' in a given 'context'.
@@ -40,20 +44,18 @@ $browser-default-font-size : 16px;
// $context : The grid context in columns, if nested.
@function columns(
$columns,
- $context : false
+ $context : $total-columns
) {
- $return: percentage(columns-width($columns) / columns-width($context));
- @return $return;
+ @return percentage(columns-width($columns) / columns-width($context));
}
// Return the percentage width of a single gutter in a given 'context'.
//
// $context : The grid context in columns, if nested.
@function gutter(
- $context : false
+ $context : $total-columns
) {
- $gutter: percentage($gutter-width / columns-width($context));
- @return $gutter;
+ @return percentage($gutter-width / columns-width($context));
}
// Return the total space occupied by multiple columns and associated gutters.
@@ -63,10 +65,9 @@ $browser-default-font-size : 16px;
// $context : The grid context in columns, if nested.
@function space(
$columns,
- $context : false
+ $context : $total-columns
) {
- $space: columns($columns, $context) + gutter($context);
- @return $space;
+ @return columns($columns, $context) + gutter($context);
}
// Accept a list including column-count and (optional) position.
@@ -213,21 +214,21 @@ $browser-default-font-size : 16px;
@function get-layout (
$min
) {
- $default-layout : $total-cols;
- $total-cols : 1;
- $layout-width : columns-width();
+ $default-layout : $total-columns;
+ $total-columns : 1;
+ $layout-width : container-outer-width();
$return : false;
$min : fix-ems($min);
@if comparable($min, $layout-width) {
@while $min >= $layout-width {
- $total-cols : $total-cols + 1;
- $layout-width : columns-width();
+ $total-columns : $total-columns + 1;
+ $layout-width : container-outer-width();
}
- $return : $total-cols;
+ $return : $total-columns;
}
- $total-cols : $default-layout;
+ $total-columns : $default-layout;
@return $return;
}
@@ -245,10 +246,10 @@ $browser-default-font-size : 16px;
$min : nth($media-layout,1);
$layout-cols : nth($media-layout,2);
$max : nth($media-layout,3);
- $return : false;
- @if ($layout-cols == $total-cols) { $return: true; }
- @if $min or $max { $return: false; }
-
- @return $return;
+ @if $min or $max {
+ @return false;
+ } @else {
+ @return if($layout-cols == $total-columns,true,false);
+ }
}
View
6 sass/susy/_grid.scss
@@ -29,17 +29,17 @@
@include pie-clearfix;
@include set-container-width;
margin: { left: auto; right: auto; }
- padding: { left: $side-gutter-width; right: $side-gutter-width; }
+ padding: { left: $grid-padding; right: $grid-padding; }
}
// Set one or more layouts on a grid-containing element at any number of media-query breakpoints.
//
-// $media-layout-1 : [default:$total-cols] A list of values including -
+// $media-layout-1 : [default:$total-columns] A list of values including -
// : One unitless number (representing columns in a layout)
// : Two optional lengths (representing min and max-width media-query breakpoints).
// $media-layout-2 ...-10 : [optional] Same as $media-layout-1
@mixin container(
- $media-layout-1 : $total-cols,
+ $media-layout-1 : $total-columns,
$media-layout-2 : false,
$media-layout-3 : false,
$media-layout-4 : false,
View
12 sass/susy/_media.scss
@@ -7,15 +7,15 @@
@mixin layout(
$layout-cols
) {
- // store default $total-cols setting for later, then change it.
- $default-layout : $total-cols;
- $total-cols : $layout-cols;
+ // store default $total-columns setting for later, then change it.
+ $default-layout : $total-columns;
+ $total-columns : $layout-cols;
// apply children in this new layout context.
@content;
- // return to default $total-cols setting.
- $total-cols : $default-layout;
+ // return to default $total-columns setting.
+ $total-columns : $default-layout;
}
// Nest a block of code inside a new media-query and layout context.
@@ -57,7 +57,7 @@
@if (not $min) and (not $max) {
// Neither $min nor $max:
// We can create a breakpoint based on the number of columns in the layout.
- $min: fix-ems(columns-width());
+ $min: fix-ems(container-outer-width());
}
@if $min {
// Min only:
View
10 sass/susy/_settings.scss
@@ -2,13 +2,15 @@
// Susy Settings
// The total number of columns in the grid
-$total-cols : 12 !default;
+$total-columns : 12 !default;
-// The width of columns, gutters, and side-gutters (padding on the container).
+// The width of columns and gutters.
// These must all be set with the comparable units.
-$col-width : 4em !default;
+$column-width : 4em !default;
$gutter-width : 1em !default;
-$side-gutter-width : $gutter-width !default;
+
+// Add padding to your grid.
+$grid-padding : $gutter-width !default;
// ---------------------------------------------------------------------------
// Advanced Settings
View
8 templates/project/_base.scss
@@ -6,9 +6,9 @@
// ---------------------------------------------------------------------------
// Basic Grid
-$total-cols : 12;
-$col-width : 4em;
-$gutter-width : 1em;
-$side-gutter-width : $gutter-width;
+$total-columns : 12;
+$column-width : 4em;
+$gutter-width : 1em;
+$grid-padding : $gutter-width;
$show-grid-backgrounds : true;
Please sign in to comment.
Something went wrong with that request. Please try again.