waffleiron 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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: []
|