compass-respond 0.1.0 → 0.2.0
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/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
|