responsive-filenames

    1.2.2 • Public • Published

    responsive-filenames

    📚📲 "Easy CSS Breakpoints"

    Build Status Code Climate

    This module allows you to easily delineate media query breakpoints by file name. For example, say we have five files:

    all.css
    print.css
    0-600.css
    600-1024.css
    1024+.css
    

    With responsive-filenames, you can write css in these files without worrying about cascading across media queries. The print stylesheet will be wrapped in @media print, and the various viewport stylesheets get wrapped in media queries based on their file name (hence responsive-filenames). A stylesheet called 0-600.css will look like:

    @media screen and (min-width: 0px) and (max-width: 599.99px) {
      /* styles */
    }

    You can specify any viewport size, and even have overlapping viewports. For example, you can have a combined mobile and tablet stylesheet, and some separate tablet fixes:

    0-1024.css
    600-1024.css
    

    Install

    npm install --save responsive-filenames
    

    If you want to use it in your terminal, you can also install it globally.

    Usage

    Command line

    responsive-filenames input1.css [input2.css ...] [options]

    You can pass multiple files or glob patterns into responsive-filenames. These are all valid:

    responsive-filenames path/to/file1.css
    responsive-filenames css/*.css
    responsive-filenames css/*.css otherstyles/**

    By default the compiled css will output to stdout. You can also pass -o filename (or --output filename) to write it to a file.

    In Node

    var rfn = require('responsive-filenames');
     
    rfn('css/*.css', function (err, css) {
      if (!err) {
        // do something with the compiled css!
      }
    });

    Flexible file arguments

    responsive-filenames is very flexible about the arguments you pass in. You can give it a glob or an array of globs, or even multiple file arguments. These are all valid:

    var callback = function (err, css) {
      if (!err) {
        // do something with the compiled css!
      }
    };
     
    rfn('path/to/file1.css', callback);
    rfn(['path/to/file1.css', 'path/to/file2.css'], callback);
    rfn('css/*.css', callback);
    rfn('css/*.css', 'otherstyles/**', callback);

    NOTE: The order of the files/globs you pass in is preserved, but globs themselves (usually) rely on filename order. Read more about globbing.

    But what about promises?

    This module's async function follows node best practices, so you can easily promisify it with a library like bluebird

    var Promise = require('bluebird'),
      rfn = Promise.promisify(require('responsive-filenames'));
     
    rfn('css/*.css')
      .then(function (css) {
        // do something with the compiled css!
      })
      .catch(function (e) {
        // oh noes!
      });

    In Gulp (and other build tools)

    If you pass a stream into responsive-filenames, it'll compile each file individually and output them as another stream.

    var rfn = require('responsive-filenames');
     
    gulp.src('**/*.css')
      .pipe(rfn())
      .pipe(concat())
      .pipe(cssmin())
      .pipe(gulp.dest('compiled.css'));

    Keywords

    none

    Install

    npm i responsive-filenames

    DownloadsWeekly Downloads

    8

    Version

    1.2.2

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar