README.md in compass-respond-0.0.4 vs README.md in compass-respond-0.1.0
- old
+ new
@@ -1,16 +1,16 @@
sass-respond
===============
-There are two parts to this...
+There are three parts to this...
+ +respond-to($device)
-
+ +respond-above($screen-size)
+ + +respond-below($screen-size)
-+respond-to example
--------------------
++respond-to
+-----------
Options:
* handhelds
* high-handhelds
@@ -48,12 +48,12 @@
@media only screen and (max-width: 479px) { .content .content-title { display: none; } }
@media only screen and (min-width: 480px) and (max-width: 767px) { .content { width: 90%; } }
@media only screen and (min-width: 768px) and (max-width: 959px) { .content { width: 80%; } }
@media only screen and (min-width: 960px) { .content { width: 70%; max-width: 1150px; } }
-+respond-above example
-----------------------
++respond-above
+--------------
Options:
* xs
* s
@@ -84,13 +84,48 @@
@media only screen and (min-width: 600px) { .charts { column-count: 3; } }
@media only screen and (min-width: 768px) { .charts { column-count: 4; } }
@media only screen and (min-width: 992px) { .charts { column-count: 5; } }
@media only screen and (min-width: 1382px) { .charts { column-count: 6; } }
++respond-below
+--------------
+Options:
+
+ * xs
+ * s
+ * m
+ * l
+ * xl
+
+SASS:
+
+ @import "respond-below"
+ .charts
+ column-count: 6
+ +respond-below(xl)
+ column-count: 5
+ +respond-below(l)
+ column-count: 4
+ +respond-below(m)
+ column-count: 3
+ +respond-below(s)
+ column-count: 2
+ +respond-below(xs)
+ column-count: 1
+
+CSS:
+
+ .charts { column-count: 6; }
+ @media only screen and (max-width: 1382px) { .charts { column-count: 5; } }
+ @media only screen and (min-width: 992px) { .charts { column-count: 4; } }
+ @media only screen and (min-width: 768px) { .charts { column-count: 3; } }
+ @media only screen and (min-width: 600px) { .charts { column-count: 2; } }
+ @media only screen and (min-width: 480px) { .charts { column-count: 1; } }
+
Usage
-------
+-----
First add compass-respond to your Gemfile:
gem "compass-respond"
@@ -100,16 +135,25 @@
Then you can import the mixin you want into your .sass file:
@import "respond-to"
@import "respond-above"
+ @import "respond-below"
+Contributors
+------------
+
+@mikesten
+@mavilein
+
Credit
------
respond-to() is a convenience plugin for [Chris Eppstein's Gist](https://gist.github.com/1215856#file_7_media_queries.sass) demonstrating Sass 3.2's block passing to mixins.
respond-above() is a simple mixin based on Malarkey's [320andup](https://github.com/malarkey/320andup/) responsive steps.
+
+respond-below() is the work of [mavilein](https://github.com/mavilein).
I'm fully expecting Compass to add something like this in the near future.
Many thanks to Brandon Mathis and his [Fancy Buttons](https://github.com/imathis/fancy-buttons), which I used as a template for this gem.
\ No newline at end of file