npm

npm’s 2019 JavaScript ecosystem survey analysis is now available! Get your copy here »

seed-breakpoints

0.4.1 • Public • Published

seed-breakpoints Build Status npm version Dependencies

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.

Install

npm install seed-breakpoints --save

Documentation

Check out our documentation of this pack.

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/_index";

Options

The following variables can be found in _config.scss

// Namespaces
$seed-breakpoints-at-namespace: \@ !default;
 
// Breakpoints
$seed-breakpoints: (
  xs: 0,
  sm: 544px,
  md: 768px,
  lg: 992px
) !default;
 

Important updates

July 17, 2016

Updates breakpoint namespace to @ symbol

This change was made to better follow the ITCSS naming conventions for responsive classes.

The compiled stylesheet (.css) will show the classes like: .class\@sm { ... }

However, your markup can just be: <div class="class@sm">...</div>

From this version forward, scss code utilizing the breakpoint mixins will now have altered (default) compiled responsive classes. If you prefer using the older --at-size convention (or establish your own personal conventions), you can modify the new $seed-breakpoints-at-namespace variable.

install

npm i seed-breakpoints

Downloadsweekly downloads

591

version

0.4.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability