This package has been deprecated

Author message:

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

@abcum/ember-visuals

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)