Simple media queries for stylus.
.test
color: red
+below(700px)
color: bluenpm install rupture
The first version of this library is very simple, just providing smooth abbreviations for common breakpoints. All of the functions provided by rupture are block mixins, which means that they must be called with a + prefix and a block of stylus should be nested inside them.
Before getting started, I would recommend reading this to better understand the concept that we're trying to hit.
A few variables are exposed that can be customized, each of them are listed below. All of these variables are scoped under rupture so that there are no conflicts with css keywords or other libraries.
Pixel value where the mobile mixin kicks in, also the lower bound of the tablet mixin.
Pixel value where the desktop mixin kicks in, also the upper bound of the tablet mixin.
A list of values that you can reference by index in most of the mixins listed below. This works exactly like breakpoint-slicer. Default looks like this:
rupture.scale = 0 400px 600px 800px 1050pxSo there are two "categories" of mixins that are a part of rupture. The first is a very basic set designed to simply shorten and sweeten standard media queries, and the second is a very close port of the fantastic breakpoint-slicer library, which can be used almost as a grid. We'll go through these in order.
When the screen size is above the provided measure, the styles in the block will take effect.
Alias of above. Styles take effect from the provided measure and above.
When the screen size is below the provided measure, the styles in the block will take effect.
Alias of below. Styles take effect from zero up to the provided measure.
When the screen size is between the two provided measure, the styles in the block will take effect.
Intended for use with scale measures, when the screen size is between the provided scale measure and the one below it, the styles in the block will take effect. For example, if your scale was something like rupture.scale = 0 400px 600px, and you used the mixin like +at(2), it would kick in between 400 and 600px (remember, scale is zero indexed, so 2 is the third value, and one less is the second). If you use this with a value, it will not have much effect, as it will be at one specific pixel value rather than a range like you want.
When the screen size is 400px (defined by rupture.mobile-cutoff) or less, the styles in the block will take effect.
When the screen size is between 1050px (defined by rupture.desktop-cutoff) and 400px (defined by mobile-cutoff), the styles in the block will take effect.
When the screen size is 1050px (defined by rupture.desktop-cutoff) or more, the styles in the block will take effect.
When the device has a pixel density of over 1.5 (retina), the styles in the block will take effect.
It is a popular opinion that using em units for media queries is a good practice, and for good reason.
Rupture allows you to automatically convert all your breakpoint units from px to em.
All you need to do to enable this behavior is to define an optional rupture.base-font-size (unless already defined) and set rupture.enable-em-breakpoints to true.
rupture.base-font-size defaults to 16px.
Example:
// base-font-size = 18px (commented out because it's optional and we want 16px)
rupture.enable-em-breakpoints = true
.some-ui-element
width: 50%
float: left
+below(500px)
width: 100%
float: none
/**
* compiles to:
*
* .some-ui-element {
* width: 50%;
* float: left;
* }
* @media screen and (max-width: 31.25em) {
* .some-ui-element {
* width: 100%;
* float: none;
* }
* }
*/
When I say "measure" in any of the docs above, this could mean either pixels (like 500px), ems (like 20em), or an index on the scale (like 2). Scale indices will be converted from the index to whatever the value is at that index in the scale variable. The scale starts at a zero-index.
You can use this library in a couple different ways - I'll try to cover the most common here. First, if you are building your own stylus pipeline:
var stylus = require('stylus'),
rupture = require('rupture');
stylus(fs.readFileSync('./example.styl', 'utf8'))
.use(rupture())
.render(function(err, css){
if (err) return console.error(err);
console.log(css);
});Second, you can use it when compiling stylus from the command line, if you install with npm install rupture -g. Not recommended, but some people like it this way.
$ stylus -u rupture -c example.styl
Finally, you might want to use it with express:
var express = require('express'),
stylus = require('stylus'),
rupture = require('rupture');
... etc ...
app.configure(function () {
app.use(stylus.middleware({
src: __dirname + '/views',
dest: __dirname + '/public',
compile: function (str, path, fn) {
stylus(str)
.set('filename', path)
.use(rupture())
.render(fn);
}
}));
});
... etc ...This plugin is also be compatible with roots, the most awesome static compiler on the market (totally unbiased), although right now we are between releases, so I'll document it here once the next release is in beta at least.
Also, rupture automatically loads its mixins into all stylus files by default. If you'd like to prevent this and load it yourself with @import 'rupture' where you need it, you can pass {implict: false} to the main function when you execute it. It would look something like this:
.use(rupture({ implicit: false }))Rupture is only compatible with stylus version 0.41.0 and up. If things are totally broken, check your stylus version and make sure you are up to date! This is especially true if you are experiencing errors with display: block - this is due to a bug in older versions of Stylus, and the only fix that isn't an ugly hack is to update to the latest version of Stylus.
Licensed under MIT, see license »
See the contributing guide »
