Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Spacing #24

Merged
merged 10 commits into from

2 participants

@chrisbuttery
Collaborator

Can you pull this? (thats what he said)

@chrisbuttery
Collaborator

Closed the other pull request. This one is the real deal.

@chrisbuttery
Collaborator

Pull it maaan.

I might rejig this later into chunks, but right now its good to go

@chrisbuttery
Collaborator

Why do you hate me?

@anthonyshort anthonyshort merged commit 4dd38a9 into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jul 23, 2012
  1. added default value so you could just use spacing-classes() to get th…

    chrisbuttery authored
    …e defaults
Commits on Jul 25, 2012
  1. Merge branch 'feature/spacing-mixin' into develop

    chrisbuttery authored
  2. updated for loop var names to be in order

    chrisbuttery authored
  3. clean comments

    chrisbuttery authored
  4. Left put declarations like padd-vert-small...derp

    chrisbuttery authored
  5. merge

    chrisbuttery authored
Commits on Jul 26, 2012
  1. removed shorthand rules

    Chris Buttery authored
  2. added single options like pad-left-large

    chrisbuttery authored
This page is out of date. Refresh to see the latest.
Showing with 145 additions and 12 deletions.
  1. +145 −12 stylesheets/stitch/patterns/layout/_spacing.scss
View
157 stylesheets/stitch/patterns/layout/_spacing.scss
@@ -1,35 +1,168 @@
+// Generate inline class names for your elements
+//
+// <div class="actions inset-vert-small-large">
+// <button type="submit">Totes click me!</button>
+// </div>
+//
+// 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)} {
+
+ .pad-#{nth(unquote($list), $i)} {
padding: ($base * $i);
}
+
+ .inset-#{nth(unquote($list), $i)} {
+ margin: ($base * $i);
+ }
+
+ .offset-#{nth(unquote($list), $i)} {
+ margin: (-($base * $i));
+ }
- .padding-vertical-#{nth(unquote($list), $i)} {
+ .pad-top-#{nth(unquote($list), $i)} {
padding-top: ($base * $i);
- padding-bottom: ($base * $i);
}
-
- .padding-horizontal-#{nth(unquote($list), $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);
}
- .margin-#{nth(unquote($list), $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));
+ }
- .margin-vertical-#{nth(unquote($list), $i)} {
+ .pad-vert-#{nth(unquote($list), $i)} {
+ padding-top: ($base * $i);
+ padding-bottom: ($base * $i);
+ }
+
+ .pad-horz-#{nth(unquote($list), $i)} {
+ padding-right: ($base * $i);
+ padding-left: ($base * $i);
+ }
+
+ .inset-vert-#{nth(unquote($list), $i)} {
margin-top: ($base * $i);
margin-bottom: ($base * $i);
}
-
- .margin-horizontal-#{nth(unquote($list), $i)} {
+
+ .inset-horz-#{nth(unquote($list), $i)} {
margin-right: ($base * $i);
margin-left: ($base * $i);
}
+
+ .offset-vert-#{nth(unquote($list), $i)} {
+ margin-top: (-($base * $i));
+ margin-bottom: (-($base * $i));
+ }
+
+ .offset-horz-#{nth(unquote($list), $i)} {
+ margin-right: (-($base * $i));
+ margin-left: (-($base * $i));
+ }
+
+ @for $j from 1 through length($list) {
+
+ @if ($i != $j) {
+
+ .pad-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
+ padding-top: ($base * $i);
+ padding-bottom: ($base * $j);
+ }
+
+ .pad-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
+ padding-right: ($base * $i);
+ padding-left: ($base * $j);
+ }
+
+ .inset-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
+ margin-top: ($base * $i);
+ margin-bottom: ($base * $j);
+ }
+
+ .inset-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
+ margin-right: ($base * $i);
+ margin-left: ($base * $j);
+ }
+
+ .offset-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
+ margin-top: (-($base * $i));
+ margin-bottom: (-($base * $j));
+ }
+
+ .offset-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
+ margin-right: (-($base * $i));
+ margin-left: (-($base * $j));
+ }
+ }
+ }
}
}
-//@include spacing-classes(20px, $list: "big" "bigger" "biggerer" "biggest" );
+// @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);
Something went wrong with that request. Please try again.