flexed

flexed - a flexbox based grid in scss and other utility mixins

Usage no npm install needed!

<script type="module">
  import flexed from 'https://cdn.skypack.dev/flexed';
</script>

README

flexed

Online Docs: https://ranjanaap.github.io/flexed/docs

Install

npm install flexed --save

Stylesheet usage

Use either method above or for your chosen task runner (gulp.js, Grunt, etc.), then in your stylesheet:

@import "flexed";

gulp.js Usage

Using the gulp-sass plugin.

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  gulp.src('path/to/input.scss')
    .pipe(sass({
      // includePaths: require('flexed').with('other/path', 'another/path')
      // - or -
      includePaths: require('flexed').includePaths
    }))
    .pipe(gulp.dest('path/to/output.css'));
});

Grunt Usage

Using grunt-sass

The grunt-sass task uses node-sass (LibSass) underneath, and is the recommended way to use Grunt with node-neat.

Example config:

grunt.initConfig({
  sass: {
    dist: {
      options: {
        // includePaths: require('flexed').with('other/path', 'another/path')
        // - or -
        includePaths: require('flexed').includePaths
      },
      files: {
        'path/to/output.css': 'path/to/input.scss'
      }
    }
  }
});