seed-card

0.1.0 • Public • Published

seed-card Build Status npm version Dependency Status

Card component pack for Seed!

Minified Gzipped
574 B 279 B

Install

npm install seed-card --save

Documentation

Check out our styleguide for documentation of this pack.

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-card');
 
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass({
      includePaths: pack
    }))
    .pipe(gulp.dest('./css'));
});

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

// Packs 
@import "pack/seed-card/_index";

Usage

<div class="c-card">
  ...
</div>

Options

The following variables can be found in _config.scss

// Dependencies 
@import "pack/seed-border/config";
 
// Namespaces 
$seed-card-namespace: c-card !default;
$seed-card-block-namespace: #{$seed-card-namespace}__block !default;
 
// Config: Card 
$seed-card-background-color: #fff !default;
$seed-card-border: $seed-border !default;
$seed-card-border-radius: 4px !default;
// Config: Card block 
$seed-card-block-sizes: (
  md: 20px 20px,
  sm: 12px 20px,
  xs: 8px 20px,
!default;

Package Sidebar

Install

npm i seed-card

Weekly Downloads

628

Version

0.1.0

License

MIT

Last publish

Collaborators

  • itsjonq