https://github.com/eddiesigner/simple-media-queries

[PostCSS] Simple and mobile first media queries made easy.
https://github.com/eddiesigner/simple-media-queries

css css3 gulp javascript media-queries nodejs npm postcss

Last synced: 3 months ago
JSON representation

[PostCSS] Simple and mobile first media queries made easy.

• Host: GitHub
• URL: https://github.com/eddiesigner/simple-media-queries
• Owner: eddiesigner
• License: other
• Created: 2016-04-22T17:48:49.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-08-16T18:16:00.000Z (over 7 years ago)
• Last Synced: 2024-04-25T16:20:17.784Z (9 months ago)
• Topics: css, css3, gulp, javascript, media-queries, nodejs, npm, postcss
• Language: JavaScript
• Homepage:
• Size: 4.88 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Simple Media Queries

> [PostCSS](https://github.com/postcss/postcss) plugin for make simple (and **mobile first**) media queries.

## Install

```sh

npm install --save-dev postcss-simple-media-queries

```

## Input / Output

```css

/* 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](https://github.com/postcss/postcss-nested) plugin.

### PostCSS

```js

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

```js

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:

```js

{

  '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:

```js

...

var processors = [

  simple_media_queries({

    'mobile': '32em',

    'tablet': '45em',

    'desktop': '64em',

    'extra-large': '80em',

    'super-large': '96em'

    }),

  postcss_nested

];

...

```