seed-grid-lite

Grid system object pack for Seed! The lite version!

File size

Install

npm install seed-grid-lite --save

Basic Usage

SCSS

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 pack = require('seed-grid-lite');

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

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

// Packs
@import "pack/seed-grid-lite/_index";

Options

The following variables can be found in _config.scss

// Namespace
$seed-grid-lite-container-namespace: o-container !default;
$seed-grid-lite-col-namespace: o-col !default;
$seed-grid-lite-col-block-namespace: o-col-block !default;
$seed-grid-lite-order-namespace: o-col-or !default;
$seed-grid-lite-row-namespace: o-row !default;

// Container
$seed-grid-lite-container-widths: (
  sm: 576px,
  md: 720px,
  lg: 940px,
  xl: 1140px
) !default;

// Columns
$seed-grid-lite-columns: (
  20: percentage(1/5),
  25: percentage(1/4),
  33: percentage(1/3),
  50: percentage(1/2),
  66: percentage(4/6),
  75: percentage(3/4),
  80: percentage(4/5),
  100: 100%,
) !default;

// Gutter
$seed-grid-lite-gutter: (
  default: 15px,
  sm: 10px,
  xs: 5px,
  0: 0px,
) !default;

// Order
$seed-grid-lite-order: (
  1: 1,
  2: 2,
) !default;