waffleiron 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- data/app/assets/stylesheets/_waffleiron.scss +95 -0
- metadata +4 -4
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
// public api:
|
|
2
|
+
// @include col(1,0);
|
|
3
|
+
// @include row();
|
|
4
|
+
|
|
5
|
+
// override these before you import this file if you don't want to use the defaults.
|
|
6
|
+
$wi-width: 940px !default;
|
|
7
|
+
$wi-cols: 12 !default;
|
|
8
|
+
$wi-gutter: 20px !default; // must be divisible by 2 for accratue spacing.
|
|
9
|
+
$wi-stacked-width: 90% !default;
|
|
10
|
+
$wi-stacked-breakpoint: 499px !default;
|
|
11
|
+
|
|
12
|
+
$wi-ie7: false !default;
|
|
13
|
+
|
|
14
|
+
$wi-fluid-start: #{$wi-width - 1};
|
|
15
|
+
$wi-fluid-end: #{$wi-stacked-breakpoint + 1};
|
|
16
|
+
$wi-responsive-margin: (100-$wi-stacked-width)/2;
|
|
17
|
+
|
|
18
|
+
// the maths for cal width and responsive stuff.
|
|
19
|
+
$wi-col-width: $wi-width / $wi-cols;
|
|
20
|
+
|
|
21
|
+
@mixin responsive-row() {
|
|
22
|
+
@media only screen and (max-width: $wi-fluid-start){
|
|
23
|
+
width: 100%;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
@mixin responsive-col($col, $offset, $append) {
|
|
27
|
+
// small screens?
|
|
28
|
+
@media only screen and (max-width: $wi-stacked-breakpoint ) {
|
|
29
|
+
width: $wi-stacked-width;
|
|
30
|
+
margin-left: $wi-responsive-margin;
|
|
31
|
+
margin-right: $wi-responsive-margin;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@media only screen and (max-width: $wi-fluid-start) and (min-width: $wi-fluid-end) {
|
|
35
|
+
$large-width: ($col/$wi-cols) * 100%;
|
|
36
|
+
// this is gross!
|
|
37
|
+
@if $offset > 0 or $append > 0 {
|
|
38
|
+
@if $offset > 0 {
|
|
39
|
+
$offset-width: ($offset/$wi-cols) * 100%;
|
|
40
|
+
margin-left: $offset-width;
|
|
41
|
+
}
|
|
42
|
+
@if $append > 0 {
|
|
43
|
+
$append-width: ($append/$wi-cols) * 100%;
|
|
44
|
+
margin-right: $append-width;
|
|
45
|
+
}
|
|
46
|
+
} @else {
|
|
47
|
+
$large-width: $large-width - 2;
|
|
48
|
+
margin-left: 1%;
|
|
49
|
+
margin-right: 1%;
|
|
50
|
+
}
|
|
51
|
+
width: $large-width;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
// prepend and append do the same math but they are dependent on a number being passed in.
|
|
55
|
+
@mixin prepend($n: 1) {
|
|
56
|
+
margin-left: ($wi-col-width * $n) + ($wi-gutter/2);
|
|
57
|
+
}
|
|
58
|
+
@mixin append($n: 1) {
|
|
59
|
+
margin-right: ($wi-col-width * $n) + ($wi-gutter/2);
|
|
60
|
+
}
|
|
61
|
+
@mixin width($n: 1) {
|
|
62
|
+
width: ($n * $wi-col-width) - $wi-gutter;
|
|
63
|
+
}
|
|
64
|
+
@mixin row() {
|
|
65
|
+
width: $wi-width;
|
|
66
|
+
margin-left: auto;
|
|
67
|
+
margin-right: auto;
|
|
68
|
+
@include responsive-row();
|
|
69
|
+
}
|
|
70
|
+
@mixin col($col: 1, $offset: 0, $append: 0 ) {
|
|
71
|
+
// $col = width in cols
|
|
72
|
+
// $offset = offset in cols
|
|
73
|
+
display: inline-block;
|
|
74
|
+
vertical-align: top;
|
|
75
|
+
@if $wi-ie7 {
|
|
76
|
+
.ie7 & {
|
|
77
|
+
zoom: 1;
|
|
78
|
+
display: inline;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
@include width($col);
|
|
82
|
+
@if $offset > 0 {
|
|
83
|
+
@include prepend($offset);
|
|
84
|
+
}
|
|
85
|
+
@else {
|
|
86
|
+
margin-left: $wi-gutter/2;
|
|
87
|
+
}
|
|
88
|
+
@if $append > 0 {
|
|
89
|
+
@include append($append);
|
|
90
|
+
}
|
|
91
|
+
@else {
|
|
92
|
+
margin-right: $wi-gutter/2;
|
|
93
|
+
}
|
|
94
|
+
@include responsive-col($col, $offset, $append);
|
|
95
|
+
}
|
metadata
CHANGED
|
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
|
|
|
5
5
|
segments:
|
|
6
6
|
- 0
|
|
7
7
|
- 1
|
|
8
|
-
-
|
|
9
|
-
version: 0.1.
|
|
8
|
+
- 2
|
|
9
|
+
version: 0.1.2
|
|
10
10
|
platform: ruby
|
|
11
11
|
authors:
|
|
12
12
|
- Andrew Jaswa
|
|
@@ -66,8 +66,8 @@ extensions: []
|
|
|
66
66
|
|
|
67
67
|
extra_rdoc_files: []
|
|
68
68
|
|
|
69
|
-
files:
|
|
70
|
-
|
|
69
|
+
files:
|
|
70
|
+
- app/assets/stylesheets/_waffleiron.scss
|
|
71
71
|
has_rdoc: true
|
|
72
72
|
homepage: ""
|
|
73
73
|
licenses: []
|