Nature Preceded Machines

    seed-avatar

    0.1.2 • Public • Published

    seed-avatar Build Status npm version Dependency Status

    Avatar component pack for Seed!

    Install

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

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

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

    Usage

    <div class="c-avatar">
      <img src="awesome.jpg" class="c-avatar__image">
    </div>

    Options

    The following variables can be found in _config.scss

    // Namespaces 
    $seed-avatar-namespace: "c-avatar" !default;
    $seed-avatar-image-namespace: #{$seed-avatar-namespace}__image !default;
     
    // Borders 
    $seed-avatar-border-radius: 4px !default;
     
    // Colors 
    $seed-avatar-background: #f1f3f5 !default;
    $seed-avatar-shadow: 0 1px 0 0 #e3e8eb !default;
     
    // Sizes 
    // Default size 
    $seed-avatar-size: 50px !default;
    // Modifier sizes 
    $seed-avatar-modifier-sizes: (
      lg: $seed-avatar-size,
      md: 40px,
      sm: 32px,
      xs: 28px
    !default;

    Install

    npm i seed-avatar

    DownloadsWeekly Downloads

    166

    Version

    0.1.2

    License

    MIT

    Last publish

    Collaborators

    • itsjonq