https://github.com/jamesplease/responsive-stylus-mixins
Responsive mixins for Stylus
https://github.com/jamesplease/responsive-stylus-mixins
Last synced: 4 months ago
JSON representation
Responsive mixins for Stylus
- Host: GitHub
- URL: https://github.com/jamesplease/responsive-stylus-mixins
- Owner: jamesplease
- License: mit
- Created: 2016-06-03T03:27:32.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-06-03T05:41:28.000Z (about 9 years ago)
- Last Synced: 2025-02-27T03:46:52.718Z (4 months ago)
- Language: CSS
- Size: 4.88 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# responsive-stylus-mixins
Responsive mixins for Stylus
### Installation
```
npm install responsive-stylus-mixins
```
Then, wherever you define mixins for your Stylus:
```styl
@import 'path/to/responsive-stylus-mixins'
```
From that point on, you can use these mixins in your Stylus.
### Motivation
I find the media query API to be a bit clunky. The query needs to wrap the thing
being styled, when I'd rather it be the other way around.
Responsive states, to me, are similar to any other states of an element, like
a hover state. And I'd like to define them similarly, too. Wouldn't it be
nice if you could do:
```styl
.my-thing
width 200px
+and-on-small-screens()
width 100%
```
These mixins provide you with a similar API to the above.
### Mixins
#### `+respond-below( $width )`
Specify styling below `$width`. Useful if you want to, say, hide something
just on a mobile device.
```styl
.my-thing
width 200px
+respond-below(600px)
width 100%
```
#### `+respond-above( $width )`
Specify styling above `$width`. Useful for targeting larger screens only.
```styl
.my-thing
width 100%
+respond-above(600px)
width 500px
```
#### `+respond-between( $minWidth, $maxWidth )`
Specifies styling that takes affect between the two provided widths.
```styl
.my-thing
width 200px
+respond-between(600px, 1000px)
display none
```
### Recommended Usage
I often set breakpoints the for my app as variables. For instance, I might have:
```styl
$md-screen = 768px
$lg-screen = 1080px
```
Then, I make it a habit to only use these specified breakpoints in the mixins.
This keeps the app's responsive aspects consistent and simple.