JSPM

#EasyQuery

EasyQuery is a porting of Foundation media queries to be usable with any web project, providing users with easy to use methods of shorthand writing customizable media queries. The package by default includes various SCSS files with settings set to the breakpoints of popular, existing frameworks such as Bootstrap 3 and Foundation 5. It is a compliment to the frameworks, enhancing but not replacing them. If you would rather just use the media queries without any framework, that works too!

###Getting Started

Install via NPM: npm install easy-query

Install via Bower: bower install easy-query

Clone via Git: git clone https://github.com/Aetiranos/easy-query.git

###How to Use EasyQuery

EasyQuery is a mobile-first responsive media query collection. With it, you have two ways of going about implementing it into your project.

Method #1 is to simply copy the files you need directly into your project from the src folder.

Method #2 is to require it in your Gulp file, passing the desired framework as a parameter as depicted below and @import-ing the scss file in your CI process.

For instructions on how to work with an automation pipeline, visit the GulpJS Repo or GruntJS Repo.

If you do not specify a parameter when requiring the package, it will default to Bootstrap 3.

NOTE: The ability to simply copy/paste framework SCSS files from EasyQuery to your project will be deprecated in a future release. Method #2 above is the recommended way.

var gulp = require('gulp'),
    easyquery = require('easy-query')('bootstrap4'),
    sass = require('gulp-sass');

At the top of your parent SCSS file, import the easy-query file first this way the media queries will be available throughout your project. It will be automatically generated in the same directory as your gulpfile.

@import 'path/to/gulpfile/dir/easy-query';
@import 'core/variables';
@import 'core/layout';
@import 'core/theme';

Then just compile your sass like you normally would, including the easy-query scss file.

gulp.task('build', function() {
    gulp.src('/path/to/your/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('/path/to/dest');
}

Once you've gotten the above all set up, you can use it in your code like this:

.block-object {
    display: block;
    width: auto;
    
    @media #{$md-up} {
        display: inline-block;
    }
    
    @media #{$lg-only} {
        width: 100%;
    }
}

You don't have to be restricted to using popular frameworks' breakpoints. You can easily define your own as an array of rem units and pass it as the parameter when requiring EasyQuery.

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    easyquery = require('easy-query')([30, 45, 62, 75]);

###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.

###Provided Framework Definitions

• Bootstrap 2
• Bootstrap 3
• Bootstrap 4
• Foundation 5
• Foundation 6 for Sites
• Foundation 6 for Apps
• Foundation 6 for Emails
• Open Framework
• Skeleton 2

For more in-depth SCSS info, visit the SASS Guide.

###Contributing

Anyone who is interested in contributing and building this project up, is encouraged to do so! The more, the merrier!

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.