Package Exports

seed-breakpoints

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (seed-breakpoints) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

seed-breakpoints

Breakpoints (media query) mixin pack for Seed!

Breakpoints was inspired by the mixins in Bootstrap V4. However, it has been enhanced and modified to fit Seed's needs and code organizational structure.

Dependencies

Seed Props

Install

npm install seed-breakpoints --save-dev

Basic Usage

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

var gulp = require('gulp');
var sass = require('gulp-sass');
var seedBreakpoints = require('seed-breakpoints');

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass({
      includePaths: [
        seedBreakpoints
      ]
    }))
    .pipe(gulp.dest('./css'));
});

Once that is setup, simply @import seed-breakpoints as needed in your .scss file:

// Packs
@import "pack/seed-breakpoints";

Options

The following variables can be found in _config.scss

// Breakpoints
$seed-breakpoints: (
  xs: 0,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

Examples

(Coming soon!)