compass-respond 0.1.0 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +13 -5
- data/VERSION.yml +1 -1
- data/lib/stylesheets/_respond-above.sass +10 -5
- data/lib/stylesheets/_respond-below.sass +9 -5
- metadata +2 -2
data/README.md
CHANGED
|
@@ -60,6 +60,7 @@ Options:
|
|
|
60
60
|
* m
|
|
61
61
|
* l
|
|
62
62
|
* xl
|
|
63
|
+
* xxl
|
|
63
64
|
|
|
64
65
|
SASS:
|
|
65
66
|
|
|
@@ -76,6 +77,8 @@ SASS:
|
|
|
76
77
|
column-count: 5
|
|
77
78
|
+respond-above(xl)
|
|
78
79
|
column-count: 6
|
|
80
|
+
+respond-above(xxl)
|
|
81
|
+
column-count: 7
|
|
79
82
|
|
|
80
83
|
CSS:
|
|
81
84
|
|
|
@@ -85,6 +88,7 @@ CSS:
|
|
|
85
88
|
@media only screen and (min-width: 768px) { .charts { column-count: 4; } }
|
|
86
89
|
@media only screen and (min-width: 992px) { .charts { column-count: 5; } }
|
|
87
90
|
@media only screen and (min-width: 1382px) { .charts { column-count: 6; } }
|
|
91
|
+
@media only screen and (min-width: 1824px) { .charts { column-count: 7; } }
|
|
88
92
|
|
|
89
93
|
+respond-below
|
|
90
94
|
--------------
|
|
@@ -96,12 +100,15 @@ Options:
|
|
|
96
100
|
* m
|
|
97
101
|
* l
|
|
98
102
|
* xl
|
|
103
|
+
* xxl
|
|
99
104
|
|
|
100
105
|
SASS:
|
|
101
106
|
|
|
102
107
|
@import "respond-below"
|
|
103
108
|
.charts
|
|
104
|
-
column-count:
|
|
109
|
+
column-count: 7
|
|
110
|
+
+respond-below(xxl)
|
|
111
|
+
column-count: 6
|
|
105
112
|
+respond-below(xl)
|
|
106
113
|
column-count: 5
|
|
107
114
|
+respond-below(l)
|
|
@@ -115,7 +122,8 @@ SASS:
|
|
|
115
122
|
|
|
116
123
|
CSS:
|
|
117
124
|
|
|
118
|
-
.charts { column-count:
|
|
125
|
+
.charts { column-count: 7; }
|
|
126
|
+
@media only screen and (max-width: 1824px) { .charts { column-count: 6; } }
|
|
119
127
|
@media only screen and (max-width: 1382px) { .charts { column-count: 5; } }
|
|
120
128
|
@media only screen and (min-width: 992px) { .charts { column-count: 4; } }
|
|
121
129
|
@media only screen and (min-width: 768px) { .charts { column-count: 3; } }
|
|
@@ -142,8 +150,8 @@ Then you can import the mixin you want into your .sass file:
|
|
|
142
150
|
Contributors
|
|
143
151
|
------------
|
|
144
152
|
|
|
145
|
-
|
|
146
|
-
|
|
153
|
+
* [mikesten](https://github.com/mikesten)
|
|
154
|
+
* [mavilein](https://github.com/mavilein)
|
|
147
155
|
|
|
148
156
|
Credit
|
|
149
157
|
------
|
|
@@ -156,4 +164,4 @@ respond-below() is the work of [mavilein](https://github.com/mavilein).
|
|
|
156
164
|
|
|
157
165
|
I'm fully expecting Compass to add something like this in the near future.
|
|
158
166
|
|
|
159
|
-
Many thanks to Brandon Mathis and his [Fancy Buttons](https://github.com/imathis/fancy-buttons), which I used as a template for this gem.
|
|
167
|
+
Many thanks to Brandon Mathis and his [Fancy Buttons](https://github.com/imathis/fancy-buttons), which I used as a template for this gem.
|
data/VERSION.yml
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
// https://github.com/malarkey/320andup/
|
|
2
|
+
// and http://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints
|
|
2
3
|
|
|
3
|
-
$respond-above-xs:
|
|
4
|
-
$respond-above-s:
|
|
5
|
-
$respond-above-m:
|
|
6
|
-
$respond-above-l:
|
|
7
|
-
$respond-above-xl:
|
|
4
|
+
$respond-above-xs: 480px !default
|
|
5
|
+
$respond-above-s: 600px !default
|
|
6
|
+
$respond-above-m: 768px !default
|
|
7
|
+
$respond-above-l: 992px !default
|
|
8
|
+
$respond-above-xl: 1382px !default
|
|
9
|
+
$respond-above-xxl: 1824px !default
|
|
8
10
|
|
|
9
11
|
=respond-above($screen-size)
|
|
10
12
|
@if $screen-size == xs
|
|
@@ -22,4 +24,7 @@ $respond-above-xl: 1382px !default
|
|
|
22
24
|
@else if $screen-size == xl
|
|
23
25
|
@media only screen and (min-width: $respond-above-xl)
|
|
24
26
|
@content
|
|
27
|
+
@else if $screen-size == xxl
|
|
28
|
+
@media only screen and (min-width: $respond-above-xxl)
|
|
29
|
+
@content
|
|
25
30
|
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
$respond-below-xs:
|
|
2
|
-
$respond-below-s:
|
|
3
|
-
$respond-below-m:
|
|
4
|
-
$respond-below-l:
|
|
5
|
-
$respond-below-xl:
|
|
1
|
+
$respond-below-xs: 480px !default
|
|
2
|
+
$respond-below-s: 600px !default
|
|
3
|
+
$respond-below-m: 768px !default
|
|
4
|
+
$respond-below-l: 992px !default
|
|
5
|
+
$respond-below-xl: 1382px !default
|
|
6
|
+
$respond-below-xxl: 1824px !default
|
|
6
7
|
|
|
7
8
|
=respond-below($screen-size)
|
|
8
9
|
@if $screen-size == xs
|
|
@@ -19,4 +20,7 @@ $respond-below-xl: 1382px !default
|
|
|
19
20
|
@content
|
|
20
21
|
@else if $screen-size == xl
|
|
21
22
|
@media only screen and (max-width: $respond-below-xl)
|
|
23
|
+
@content
|
|
24
|
+
@else if $screen-size == xxl
|
|
25
|
+
@media only screen and (max-width: $respond-below-xxl)
|
|
22
26
|
@content
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: compass-respond
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.2.0
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date:
|
|
12
|
+
date: 2014-07-24 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: sass
|