From 2c8eb9f32c3fa760d3b967c9bffb45c3a9b47c31 Mon Sep 17 00:00:00 2001 From: chrisbuttery Date: Mon, 23 Jul 2012 20:32:50 +1000 Subject: [PATCH 1/8] added default value so you could just use spacing-classes() to get the defaults --- stylesheets/stitch/patterns/layout/_spacing.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stylesheets/stitch/patterns/layout/_spacing.scss b/stylesheets/stitch/patterns/layout/_spacing.scss index 382c5c2..b98ff45 100644 --- a/stylesheets/stitch/patterns/layout/_spacing.scss +++ b/stylesheets/stitch/patterns/layout/_spacing.scss @@ -1,4 +1,4 @@ -@mixin spacing-classes($base, $list: small normal medium large){ +@mixin spacing-classes($base: 10px, $list: small normal medium large){ @for $i from 1 through length($list) { From 728889491aa1a1d68cb7e02018ee5ceb91bca3a0 Mon Sep 17 00:00:00 2001 From: chrisbuttery Date: Wed, 25 Jul 2012 19:06:10 +1000 Subject: [PATCH 2/8] Added more flexibility with classnames like: inset-vert-small-large --- .../stitch/patterns/layout/_spacing.scss | 91 ++++++++++++++----- 1 file changed, 66 insertions(+), 25 deletions(-) diff --git a/stylesheets/stitch/patterns/layout/_spacing.scss b/stylesheets/stitch/patterns/layout/_spacing.scss index b98ff45..2820c39 100644 --- a/stylesheets/stitch/patterns/layout/_spacing.scss +++ b/stylesheets/stitch/patterns/layout/_spacing.scss @@ -1,35 +1,76 @@ +// Generate inline class names for your elements +// +//
+// +//
+// +// Padding +// --------------- +// pad-{item} : pad-small (padding: 10px) +// pad-vert-{item}-{item + 1} : pad-vert-small-large (padding: 10px 0 40px 0) +// pad-horz-{item}-{item + 1} : pad-horz-small-large (padding: 0 10px 0 40px) +// +// Margin +// --------------- +// inset-{item} : inset-small (margin: 10px) +// inset-vert-{item}-{item + 1} : inset-vert-small-large (margin: 10px 0 40px 0) +// inset-horz-{item}-{item + 1} : inset-horz-small-large (margin: 0 10px 0 40px) +// +// Offset margin +// --------------- +// offset-{item} : offset-small (margin: -10px) +// offset-vert-{item}-{item + 1} : offset-vert-small-large (margin: -10px 0 -40px 0) +// offset-horz-{item}-{item + 1} : offset-horz-small-large (margin: 0 -10px 0 -40px) + @mixin spacing-classes($base: 10px, $list: small normal medium large){ - - @for $i from 1 through length($list) { - - .padding-#{nth(unquote($list), $i)} { + + @for $i from 1 through (length($list)) { + + .pad-#{nth(unquote($list), $i)} { padding: ($base * $i); } - - .padding-vertical-#{nth(unquote($list), $i)} { - padding-top: ($base * $i); - padding-bottom: ($base * $i); - } - - .padding-horizontal-#{nth(unquote($list), $i)} { - padding-right: ($base * $i); - padding-left: ($base * $i); - } - - .margin-#{nth(unquote($list), $i)} { + + .inset-#{nth(unquote($list), $i)} { margin: ($base * $i); } - - .margin-vertical-#{nth(unquote($list), $i)} { - margin-top: ($base * $i); - margin-bottom: ($base * $i); + + .offset-#{nth(unquote($list), $i)} { + margin: (-($base * $i)); } - - .margin-horizontal-#{nth(unquote($list), $i)} { - margin-right: ($base * $i); - margin-left: ($base * $i); + } + + @for $k from 1 through length($list) { + + @for $l from 1 through length($list) { + + @if ($k != $l) { + + .pad-vert-#{nth(unquote($list), $k)}-#{nth(unquote($list), ($l))} { + padding: ($base * $k) 0 ($base * $l); + } + + .pad-horz-#{nth(unquote($list), $k)}-#{nth(unquote($list), ($l))} { + padding: 0 ($base * $k) 0 ($base * $l); + } + + .inset-vert-#{nth(unquote($list), $k)}-#{nth(unquote($list), ($l))} { + margin: ($base * $k) 0 ($base * $l); + } + + .inset-horz-#{nth(unquote($list), $k)}-#{nth(unquote($list), ($l))} { + margin: 0 ($base * $k) 0 ($base * $l); + } + + .offset-vert-#{nth(unquote($list), $k)}-#{nth(unquote($list), ($l))} { + margin: (-($base * $k)) 0 (-($base * $l)); + } + + .offset-horz-#{nth(unquote($list), $k)}-#{nth(unquote($list), ($l))} { + margin: 0 (-($base * $k)) 0 (-($base * $l)); + } + } } } } -//@include spacing-classes(20px, $list: "big" "bigger" "biggerer" "biggest" ); \ No newline at end of file +// @include spacing-classes($list: big bigger biggerer evenbiggerer biggest, $base: 5px); \ No newline at end of file From f62ca9daf013ff486046865e200d325925be2fd2 Mon Sep 17 00:00:00 2001 From: chrisbuttery Date: Wed, 25 Jul 2012 22:16:09 +1000 Subject: [PATCH 3/8] updated for loop var names to be in order --- .../stitch/patterns/layout/_spacing.scss | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/stylesheets/stitch/patterns/layout/_spacing.scss b/stylesheets/stitch/patterns/layout/_spacing.scss index 2820c39..69d408a 100644 --- a/stylesheets/stitch/patterns/layout/_spacing.scss +++ b/stylesheets/stitch/patterns/layout/_spacing.scss @@ -39,34 +39,34 @@ } } - @for $k from 1 through length($list) { + @for $j from 1 through length($list) { - @for $l from 1 through length($list) { + @for $k from 1 through length($list) { - @if ($k != $l) { + @if ($j != $k) { - .pad-vert-#{nth(unquote($list), $k)}-#{nth(unquote($list), ($l))} { - padding: ($base * $k) 0 ($base * $l); + .pad-vert-#{nth(unquote($list), $j)}-#{nth(unquote($list), ($k))} { + padding: ($base * $j) 0 ($base * $k); } - .pad-horz-#{nth(unquote($list), $k)}-#{nth(unquote($list), ($l))} { - padding: 0 ($base * $k) 0 ($base * $l); + .pad-horz-#{nth(unquote($list), $j)}-#{nth(unquote($list), ($k))} { + padding: 0 ($base * $j) 0 ($base * $k); } - .inset-vert-#{nth(unquote($list), $k)}-#{nth(unquote($list), ($l))} { - margin: ($base * $k) 0 ($base * $l); + .inset-vert-#{nth(unquote($list), $j)}-#{nth(unquote($list), ($k))} { + margin: ($base * $j) 0 ($base * $k); } - .inset-horz-#{nth(unquote($list), $k)}-#{nth(unquote($list), ($l))} { - margin: 0 ($base * $k) 0 ($base * $l); + .inset-horz-#{nth(unquote($list), $j)}-#{nth(unquote($list), ($k))} { + margin: 0 ($base * $j) 0 ($base * $k); } - .offset-vert-#{nth(unquote($list), $k)}-#{nth(unquote($list), ($l))} { - margin: (-($base * $k)) 0 (-($base * $l)); + .offset-vert-#{nth(unquote($list), $j)}-#{nth(unquote($list), ($k))} { + margin: (-($base * $j)) 0 (-($base * $k)); } - .offset-horz-#{nth(unquote($list), $k)}-#{nth(unquote($list), ($l))} { - margin: 0 (-($base * $k)) 0 (-($base * $l)); + .offset-horz-#{nth(unquote($list), $j)}-#{nth(unquote($list), ($k))} { + margin: 0 (-($base * $j)) 0 (-($base * $k)); } } } From f5784c0e3fe2648625f948ac4662057c3f566b3b Mon Sep 17 00:00:00 2001 From: chrisbuttery Date: Wed, 25 Jul 2012 22:55:02 +1000 Subject: [PATCH 4/8] Removed a loop, and included 4 examples on how to call the mixin --- .../stitch/patterns/layout/_spacing.scss | 41 +++++++++---------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/stylesheets/stitch/patterns/layout/_spacing.scss b/stylesheets/stitch/patterns/layout/_spacing.scss index 69d408a..f759227 100644 --- a/stylesheets/stitch/patterns/layout/_spacing.scss +++ b/stylesheets/stitch/patterns/layout/_spacing.scss @@ -24,7 +24,7 @@ @mixin spacing-classes($base: 10px, $list: small normal medium large){ - @for $i from 1 through (length($list)) { + @for $i from 1 through length($list) { .pad-#{nth(unquote($list), $i)} { padding: ($base * $i); @@ -37,40 +37,39 @@ .offset-#{nth(unquote($list), $i)} { margin: (-($base * $i)); } - } - - @for $j from 1 through length($list) { - - @for $k from 1 through length($list) { + + @for $j from 1 through length($list) { - @if ($j != $k) { + @if ($i != $j) { - .pad-vert-#{nth(unquote($list), $j)}-#{nth(unquote($list), ($k))} { - padding: ($base * $j) 0 ($base * $k); + .pad-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { + padding: ($base * $i) 0 ($base * $j); } - .pad-horz-#{nth(unquote($list), $j)}-#{nth(unquote($list), ($k))} { - padding: 0 ($base * $j) 0 ($base * $k); + .pad-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { + padding: 0 ($base * $i) 0 ($base * $j); } - .inset-vert-#{nth(unquote($list), $j)}-#{nth(unquote($list), ($k))} { - margin: ($base * $j) 0 ($base * $k); + .inset-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { + margin: ($base * $i) 0 ($base * $j); } - .inset-horz-#{nth(unquote($list), $j)}-#{nth(unquote($list), ($k))} { - margin: 0 ($base * $j) 0 ($base * $k); + .inset-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { + margin: 0 ($base * $i) 0 ($base * $j); } - .offset-vert-#{nth(unquote($list), $j)}-#{nth(unquote($list), ($k))} { - margin: (-($base * $j)) 0 (-($base * $k)); + .offset-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { + margin: (-($base * $i)) 0 (-($base * $j)); } - .offset-horz-#{nth(unquote($list), $j)}-#{nth(unquote($list), ($k))} { - margin: 0 (-($base * $j)) 0 (-($base * $k)); + .offset-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { + margin: 0 (-($base * $i)) 0 (-($base * $j)); } } } } } - -// @include spacing-classes($list: big bigger biggerer evenbiggerer biggest, $base: 5px); \ No newline at end of file +// @include spacing-classes(); +// @include spacing-classes($base: 5px); +// @include spacing-classes($base: 5px, $list: big bigger biggerer evenbiggerer biggest); +// @include spacing-classes($list: big bigger biggerer evenbiggerer biggest); \ No newline at end of file From 79ee979b3aa9f0b1a20f9044d7d5f4b781d3fb95 Mon Sep 17 00:00:00 2001 From: chrisbuttery Date: Wed, 25 Jul 2012 22:56:39 +1000 Subject: [PATCH 5/8] clean comments --- stylesheets/stitch/patterns/layout/_spacing.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/stylesheets/stitch/patterns/layout/_spacing.scss b/stylesheets/stitch/patterns/layout/_spacing.scss index f759227..5728a8c 100644 --- a/stylesheets/stitch/patterns/layout/_spacing.scss +++ b/stylesheets/stitch/patterns/layout/_spacing.scss @@ -7,14 +7,14 @@ // Padding // --------------- // pad-{item} : pad-small (padding: 10px) -// pad-vert-{item}-{item + 1} : pad-vert-small-large (padding: 10px 0 40px 0) -// pad-horz-{item}-{item + 1} : pad-horz-small-large (padding: 0 10px 0 40px) +// pad-vert-{item}-{item + 1} : pad-vert-small-large (padding: 10px 0 40px 0) +// pad-horz-{item}-{item + 1} : pad-horz-small-large (padding: 0 10px 0 40px) // // Margin // --------------- -// inset-{item} : inset-small (margin: 10px) -// inset-vert-{item}-{item + 1} : inset-vert-small-large (margin: 10px 0 40px 0) -// inset-horz-{item}-{item + 1} : inset-horz-small-large (margin: 0 10px 0 40px) +// inset-{item} : inset-small (margin: 10px) +// inset-vert-{item}-{item + 1} : inset-vert-small-large (margin: 10px 0 40px 0) +// inset-horz-{item}-{item + 1} : inset-horz-small-large (margin: 0 10px 0 40px) // // Offset margin // --------------- @@ -69,6 +69,7 @@ } } } + // @include spacing-classes(); // @include spacing-classes($base: 5px); // @include spacing-classes($base: 5px, $list: big bigger biggerer evenbiggerer biggest); From f5578460b6fd36e72be582b2ac893aef6c55feee Mon Sep 17 00:00:00 2001 From: chrisbuttery Date: Thu, 26 Jul 2012 08:43:11 +1000 Subject: [PATCH 6/8] Left put declarations like padd-vert-small...derp --- .../stitch/patterns/layout/_spacing.scss | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/stylesheets/stitch/patterns/layout/_spacing.scss b/stylesheets/stitch/patterns/layout/_spacing.scss index 5728a8c..257fed3 100644 --- a/stylesheets/stitch/patterns/layout/_spacing.scss +++ b/stylesheets/stitch/patterns/layout/_spacing.scss @@ -38,6 +38,30 @@ margin: (-($base * $i)); } + .pad-vert-#{nth(unquote($list), $i)} { + padding: ($base * $i) 0; + } + + .pad-horz-#{nth(unquote($list), $i)} { + padding: 0 ($base * $i); + } + + .inset-vert-#{nth(unquote($list), $i)} { + margin: ($base * $i) 0; + } + + .inset-horz-#{nth(unquote($list), $i)} { + margin: 0 ($base * $i); + } + + .offset-vert-#{nth(unquote($list), $i)} { + margin: (-($base * $i)) 0; + } + + .offset-horz-#{nth(unquote($list), $i)} { + margin: 0 (-($base * $i)); + } + @for $j from 1 through length($list) { @if ($i != $j) { From b338fe45877f2f0ff9b11bcdeb77df0abf6698ec Mon Sep 17 00:00:00 2001 From: Chris Buttery Date: Thu, 26 Jul 2012 10:42:42 +1000 Subject: [PATCH 7/8] removed shorthand rules --- .../stitch/patterns/layout/_spacing.scss | 36 ++++++++++++------- 1 file changed, 24 insertions(+), 12 deletions(-) diff --git a/stylesheets/stitch/patterns/layout/_spacing.scss b/stylesheets/stitch/patterns/layout/_spacing.scss index 257fed3..65e20bc 100644 --- a/stylesheets/stitch/patterns/layout/_spacing.scss +++ b/stylesheets/stitch/patterns/layout/_spacing.scss @@ -39,27 +39,33 @@ } .pad-vert-#{nth(unquote($list), $i)} { - padding: ($base * $i) 0; + padding-top: ($base * $i); + padding-bottom: ($base * $i); } .pad-horz-#{nth(unquote($list), $i)} { - padding: 0 ($base * $i); + padding-right: ($base * $i); + padding-left: ($base * $i); } .inset-vert-#{nth(unquote($list), $i)} { - margin: ($base * $i) 0; + margin-top: ($base * $i); + margin-bottom: ($base * $i); } .inset-horz-#{nth(unquote($list), $i)} { - margin: 0 ($base * $i); + margin-right: ($base * $i); + margin-left: ($base * $i); } .offset-vert-#{nth(unquote($list), $i)} { - margin: (-($base * $i)) 0; + margin-top: (-($base * $i)); + margin-bottom: (-($base * $i)); } .offset-horz-#{nth(unquote($list), $i)} { - margin: 0 (-($base * $i)); + margin-right: (-($base * $i)); + margin-left: (-($base * $i)); } @for $j from 1 through length($list) { @@ -67,27 +73,33 @@ @if ($i != $j) { .pad-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { - padding: ($base * $i) 0 ($base * $j); + padding-top: ($base * $i); + padding-bottom: ($base * $j); } .pad-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { - padding: 0 ($base * $i) 0 ($base * $j); + padding-right: ($base * $i); + padding-left: ($base * $j); } .inset-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { - margin: ($base * $i) 0 ($base * $j); + margin-top: ($base * $i); + margin-bottom: ($base * $j); } .inset-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { - margin: 0 ($base * $i) 0 ($base * $j); + margin-right: ($base * $i); + margin-left: ($base * $j); } .offset-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { - margin: (-($base * $i)) 0 (-($base * $j)); + margin-top: (-($base * $i)); + margin-bottom: (-($base * $j)); } .offset-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { - margin: 0 (-($base * $i)) 0 (-($base * $j)); + margin-right: (-($base * $i)); + margin-left: (-($base * $j)); } } } From f5f5796b0623a9f2ec57270c288d11a65d9812f6 Mon Sep 17 00:00:00 2001 From: chrisbuttery Date: Thu, 26 Jul 2012 13:34:00 +1000 Subject: [PATCH 8/8] added single options like pad-left-large --- .../stitch/patterns/layout/_spacing.scss | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/stylesheets/stitch/patterns/layout/_spacing.scss b/stylesheets/stitch/patterns/layout/_spacing.scss index 65e20bc..2138f66 100644 --- a/stylesheets/stitch/patterns/layout/_spacing.scss +++ b/stylesheets/stitch/patterns/layout/_spacing.scss @@ -37,7 +37,63 @@ .offset-#{nth(unquote($list), $i)} { margin: (-($base * $i)); } + + .pad-top-#{nth(unquote($list), $i)} { + padding-top: ($base * $i); + } + + .pad-right-#{nth(unquote($list), $i)} { + padding-right: ($base * $i); + } + + .pad-bottom-#{nth(unquote($list), $i)} { + padding-bottom: ($base * $i); + } + + .pad-left-#{nth(unquote($list), $i)} { + padding-left: ($base * $i); + } + + .inset-top-#{nth(unquote($list), $i)} { + margin-top: ($base * $i); + } + + .inset-right-#{nth(unquote($list), $i)} { + margin-right: ($base * $i); + } + + .inset-bottom-#{nth(unquote($list), $i)} { + margin-bottom: ($base * $i); + } + + .inset-left-#{nth(unquote($list), $i)} { + margin-left: ($base * $i); + } + + .outset-top-#{nth(unquote($list), $i)} { + margin-top: (-($base * $i)); + } + + .outset-right-#{nth(unquote($list), $i)} { + margin-right: (-($base * $i)); + } + + .outset-bottom-#{nth(unquote($list), $i)} { + margin-bottom: (-($base * $i)); + } + .outset-left-#{nth(unquote($list), $i)} { + margin-left: (-($base * $i)); + } + + .inset-#{nth(unquote($list), $i)} { + margin: ($base * $i); + } + + .offset-#{nth(unquote($list), $i)} { + margin: (-($base * $i)); + } + .pad-vert-#{nth(unquote($list), $i)} { padding-top: ($base * $i); padding-bottom: ($base * $i);