Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
Simple Media Queries
PostCSS plugin for make simple (and mobile first) media queries.
Install
npm install --save-dev postcss-simple-media-queriesInput / Output
/* Input */
p {
margin: 0;
@media (mq('medium')) {
margin: 25px 0;
}
}
/* Output */
p {
margin: 0;
}
@media only screen and ( min-width: 42em ) {
p {
margin: 25px 0;
}
}Usage
This plugin needs to be executed before the postcss-nested plugin.
PostCSS
var fs = require('fs');
var postcss = require('postcss');
var postcss_nested = require('postcss-nested');
var simple_media_queries = require('postcss-simple-media-queries');
var css = fs.readFileSync('input.css', 'utf8');
var output = postcss([simple_media_queries, postcss_nested])
.process(css)
.css;Gulp
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var postcss_nested = require('postcss-nested');
var simple_media_queries = require('postcss-simple-media-queries');
gulp.task('css', function () {
var processors = [
simple_media_queries,
postcss_nested
];
return gulp.src('./src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});Options
This is the default configuration:
{
'initialize': '1px',
'small': '35.5em', // >= 568px @ 16px
'medium': '48em', // >= 768px @ 16px
'large': '64em', // >= 1024px @ 16px
'extra-large': '80em' // >= 1280px @ 16px
}You can override or extend this configuration object according to your needs, for example:
...
var processors = [
simple_media_queries({
'mobile': '32em',
'tablet': '45em',
'desktop': '64em',
'extra-large': '80em',
'super-large': '96em'
}),
postcss_nested
];
...