seed-thumbnail
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:
@import "pack/seed-thumbnail/_index";
Options
The following variables can be found in _config.scss
$seed-thumbnail-namespace: "c-thumbnail" !default;
$seed-thumbnail-image-namespace: "#{$seed-thumbnail-namespace}__image" !default;
$seed-thumbnail-border-radius: 0 !default;
$seed-thumbnail-border-radius-rounded: 4px !default;
$seed-thumbnail-background-color: #eee !default;
$seed-thumbnail-alignments: (
top: (
top: 0,
bottom: inherit
),
center: (
top: -100%,
bottom: -100%,
),
bottom: (
top: inherit,
bottom: 0
)
) !default;
$seed-thumbnail-sizes: (
wide: (
width: 16,
height: 9
),
sd: (
width: 4,
height: 3
),
square: (
width: 1,
height: 1
)
) !default;