Have ideas to improve npm?Join in the discussion! ¬Ľ

    This package has been deprecated

    Author message:

    Package no longer supported. Use github.com/abcum/ascua instead.

    @abcum/ember-visuals

    1.1.4¬†‚Äʬ†Public¬†‚Äʬ†Published

    ember-visuals

    A utility for working with css and sass styles in an Ember.js app.

    Usage

    Installation

    ember install @abcum/ember-visuals

    Introduction

    The ember-visuals addon adds functionality for working with css and sass styling, enabling quick scaffolding and efficient responsive layouts, with simple media query support, easy grid and flex building, simple css animations, and multi-browser prefix support built-in.

    Examples

    Import the library into your app stylesheet.

    @import "ember-visuals";

    Add a css animation to an element.

    @import "ember-visuals/animations/alerts/bounce";
     
    .simple-bouncer {
        @include animation(bounce 3s linear 2s infinite);
    }
    .special-bouncer {
        @include animation(bounce 3s $ease-in-out-circ 2s infinite);
    }

    Build a flexible css table.

    sheet {
        background-color:#000000;
        @include table(100%, 1px); // Table is 100% wide with 1px borders 
    }
     
    sheet-row {
        @include table-row;
        background-color:#ffffff;
    }
     
    sheet-col {
        padding:10px;
        @include table-col(6 of 12 for 1st); // The 1st column is 50% wide 
        @include table-col(3 of 12 for 2nd); // The 2nd column is 25% wide 
        @include table-col(3 of 12 for 3rd); // The 3rd column is 25% wide 
    }

    Build a flexible css grid layout with manual row breaks.

    grid-line {
        padding:30px;
        @include grid-line;
    }
     
    grid-item {
        height:100px;
        padding:30px;
        border:1px solid #00bfff;
        background-color:#ff0000;
        @include grid-item(1 of 4);
    }

    Build a flexible css grid layout with automatic row breaks.

    grid-item {
        height:100px;
        padding:30px;
        border:1px solid #00bfff;
        background-color:#ff0000;
        @include grid-item(1 of 5 break every 5);
    }

    Implement a simple responsive layout based on the user device.

    grid-item {
        
        height:100px;
        padding:30px;
        border:1px solid #00bfff;
        background-color:#ff0000;
        
        @include grid-item(1 of 5 break every 5);
        
        @include media(ipad landscape) {
            @include grid-item(1 of 4 break every 4);
        }
     
        @include media(iphone4, iphone5) {
            @include grid-item(1 of 2 break every 2);
        }
     
        @include media(iphone6, iphone7, ipad portrait) {
            @include grid-item(1 of 3 break every 3);
        }
     
    }

    Development

    • make install (install bower and ember-cli dependencies)
    • make upgrade (upgrade ember-cli to the specified version)
    • make tests (run all tests defined in the package)

    Keywords

    Install

    npm i @abcum/ember-visuals

    DownloadsWeekly Downloads

    2

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    78.3 kB

    Total Files

    157

    Last publish

    Collaborators

    • avatar