AsperJS - Easy Media Query Generator

Formerly EasyQueryJS

Installation

npm install asperjs --save-dev

or

git clone https://github.com/Aetiranos/AsperJS.git

Usage

AsperJS can be instantiated and used in a variety of ways. In it's non- parameterized form, it simply uses default values to generate your media query stylesheets. However, the other instantiation methods allow for more control over what is generated.

Default Values

{
    lang: 'scss',
    framework: 'bootstrap3',
    breakpoints: null // Loaded from 'bootstrap3' framework,
    buildCSS: true
}

Developers can be creative when it comes to how and where they use frame- works like this; however, it's intended use is with build pipelines such as Gulp or Grunt. See below for an example of usage with Gulp.

Non-Parameterized Use

require('asperjs')();

Framework Instantiation

When instantiating AsperJS, you may choose to pass the name of a supported framework as a parameter. If you do, it will autoload the prespecified media query breakpoints from that framework. See below for a list of supported frameworks.

require('asperjs')('foundation5')

Breakpoint Instantiation

To generate your own breakpoints without having to rely on a third-party framework's definitions, simply pass an array of breakpoints. These breakpoints can be numbers or strings. If you pass numbers, they will be treated as REM units by default; however, if you pass strings, they must be properly formatted as pixel, point, EM, or REM sizes with the unit of measurement included.

require('asperjs')([20, 40, 75])

or

require('asperjs')(['768px', '972px', '1200px']);

Object Parameter Instantiation

require('asperjs')({
    lang: 'scss',
    breakpoints: [20, 40, 75],
    buildCSS: true
})

###Breakpoint Variables

When passing your own custom array of breakpoints, the breakpoint variable names will depend on how many elements are in the array. The following table describes each media query variable you can you use in your SCSS code.

| 1 Breakpoint | 2 | 3 | 4 | 5 | |:---:|:---:|:---:|:---:|:---:| | $sm-only | $sm-only | $xs-only | $xs-only | $xs-only | | $lg-only | $md-only | $sm-only | $sm-only | $sm-only | | | $lg-only | $md-only | $md-only | $md-only | | | $md-up | $lg-only | $lg-only | $lg-only | | | $md-down | $sm-up | $xl-only | $xl-only | | | | $sm-down | $sm-up | $xx-only | | | | $md-up | $sm-down | $sm-up | | | | $md-down | $md-up | $sm-down | | | | | $md-down | $md-up | | | | | $lg-up | $md-down | | | | | $lg-down | $lg-up | | | | | | $lg-down | | | | | | $xl-up | | | | | | $xl-down |

An Example Use of AsperJS with Gulp

require('asperjs')({lang: 'scss'});
 var gulp = require('gulp'),
     sass = require('gulp-sass');
 
 gulp.task('default', function() {
     gulp.src([ './app.scss' ])
     .pipe(sass())
     .pipe(gulp.dest('./'));
 });

Supported Frameworks

• Bootstrap2 (as 'bootstrap2')
• Bootstrap3 (as 'bootstrap3')
• Bootstrap4 (as 'bootstrap4')
• Foundation5 (as 'foundation5')
• Foundation6 for Sites (as 'foundation6forsites')
• Foundation6 for Apps (as 'foundation6forapps')
• Foundation6 for Email (as 'foundation6foremail')
• Skeleton2 (as 'skeleton2')
• OpenFramework (as 'openframework')

Supported Languages

• LessCSS (as 'less')
• SASS (as 'sass')
• SCSS (as 'scss')

###Breakpoint Classes As of 1.1.5, EasyQuery also produces a set of classes that mock your breakpoint variables so as to easily manipulate display or hide DOM elements with them without being forced to hardcode anything in SCSS. The generally work the same as Bootstrap's built-in grid variables (.hidden-xs, .visible-xs) just a lot less verbose.

<div class="sm-down">
    This will only appear on resolutions within the range of $sm-range and smaller.
    It will be hidden on all resolutions of $md-up.
</div>

It is the exact same as writing the below class definition in your SCSS file manually. It is what is generated for you automatically for use with these classes.

.sm-down {
    @media #{$md-up} {
        display: none;
    }
}

###Contributing

Anyone who is interested in contributing and building this project up, you're encouraged to do so! Collaboration is welcome!

If you find any bugs or issues with the source code, be sure to submit an issue or submit a pull request with a fix.

If you have a feature request, submit an issue ticket (particularly if this is a major request).

For smaller requests, feel free to submit a pull request with the requested feature code.