seed-thumbnail

    0.0.9 • Public • Published

    seed-thumbnail Build Status npm version

    Thumbnail component pack for Seed!

    Install

    npm install seed-thumbnail --save
    

    Documentation

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

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

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

    Options

    The following variables can be found in _config.scss

    // Namespaces 
    $seed-thumbnail-namespace: "c-thumbnail" !default;
    $seed-thumbnail-image-namespace: "#{$seed-thumbnail-namespace}__image" !default;
     
    // Config 
    // Borders 
    $seed-thumbnail-border-radius: 0 !default;
    $seed-thumbnail-border-radius-rounded: 4px !default;
     
    // Colors 
    $seed-thumbnail-background-color: #eee !default;
     
    // Alignment 
    $seed-thumbnail-alignments: (
      top: (
        top: 0,
        bottominherit
      ),
      center: (
        top-100%,
        bottom-100%,
      ),
      bottom: (
        topinherit,
        bottom: 0
      )
    !default;
     
    // Sizes 
    // Pass in ratios for w:h 
    $seed-thumbnail-sizes: (
      wide: (
        width: 16,
        height: 9
      ),
      sd: (
        width: 4,
        height: 3
      ),
      square: (
        width: 1,
        height: 1
      )
    !default;

    Install

    npm i seed-thumbnail

    DownloadsWeekly Downloads

    47

    Version

    0.0.9

    License

    MIT

    Last publish

    Collaborators

    • itsjonq