Permalink
Browse files

Add basic isolation mixins

  • Loading branch information...
1 parent 5d6e228 commit b310ee69fcab25e9e97e2513b3bc449b68069cbc @mirisuzanne mirisuzanne committed Mar 18, 2013
Showing with 78 additions and 0 deletions.
  1. +38 −0 sass/susy/_isolation.scss
  2. +25 −0 test/css/isolation.css
  3. +15 −0 test/scss/isolation.scss
View
@@ -0,0 +1,38 @@
+// ---------------------------------------------------------------------------
+// Isolation
+
+// Isolate the position of a grid element (use in addition to span-columns)
+//
+// $location : The grid column to isolate in, relative to the container;
+// $context : [optional] The context (columns spanned by parent).
+// $from : The start direction of your layout (e.g. 'left' for ltr languages)
+@mixin isolate($location, $context: $total-columns, $from: $from-direction) {
+ $to: opposite-position($from);
+ margin-#{$to}: -100%;
+ margin-#{$from}: space($location - 1, $context);
+}
+
+// Isolate a group of elements in a grid, using nth-child selectors
+//
+// $columns : The column-width of each item on the grid;
+// $context : [optional] The context (columns spanned by parent).
+// $from : The start direction of your layout (e.g. 'left' for ltr languages)
+@mixin isolate-grid($columns, $context: $total-columns, $from: $from-direction) {
+ $to: opposite-position($from);
+ $location: 1;
+ $line: floor($context / $columns);
+
+ @include span-columns($columns, $context, $from: $from);
+ margin-#{$to}: -100%;
+
+ @for $item from 1 through $line {
+ $nth: '#{$line}n + #{$item}';
+ &:nth-child(#{$nth}) {
+ margin-#{$from}: space($location - 1, $context);
+ @if $location == 1 { clear: $from; }
+
+ $location: $location + $columns;
+ @if $location > $context { $location: 1; }
+ }
+ }
+}
View
@@ -0,0 +1,25 @@
+.isolate {
+ margin-right: -100%;
+ margin-left: 16.94915%;
+}
+
+.isolate-grid {
+ width: 24.05063%;
+ float: left;
+ margin-right: 1.26582%;
+ display: inline;
+ margin-right: -100%;
+}
+.isolate-grid:nth-child(4n + 1) {
+ margin-left: 0%;
+ clear: left;
+}
+.isolate-grid:nth-child(4n + 2) {
+ margin-left: 25.31646%;
+}
+.isolate-grid:nth-child(4n + 3) {
+ margin-left: 50.63291%;
+}
+.isolate-grid:nth-child(4n + 4) {
+ margin-left: 75.94937%;
+}
View
@@ -0,0 +1,15 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../sass/susy";
+
+// ---------------------------------------------------------------------------
+// Isolation
+
+.isolate {
+ @include isolate(3);
+}
+
+.isolate-grid {
+ @include isolate-grid(4,16);
+}

0 comments on commit b310ee6

Please sign in to comment.