Responsive CSS Framework
Literally Too orangey for crows!
See Amazium.co.uk
###Ember-CLI application setup
It is not possible to directly import CSS assets into an ember-cli application at the moment and therefore the following configuration steps are required to get amazium working with an ember cli application.
####Install amazium
Run the following in your application root to install amazium:
npm install amazium --save-dev
####Install ember-cli addon to import css assets from node modules
Run the following in your application root:
ember install ember-cli-node-assets
####Import amazium compiled CSS in your application
Update the Ember CLI build file to include the amazium compiled CSS from the node package:
// ember-cli-build.js
var app = new EmberApp(defaults, {
...
nodeAssets: {
'amazium': {
srcDir: 'dist',
import: ['amazium.css']
}
}
});
###Creating an Amazium build with a custom grid
####Adjust the grid parameters
The default parameters for the amazium grid are adjustable. You can set your own values in the _variables.scss file. When the SASS is compiled the grid values are calculated according to the set values. With these variable it is now possible to build a 1440px grid with 16 columns or whatever you wish.
/***** Define grid width *****/
$grid-width: 1200px;
$grid-width-smscreen: 960px;
$grid-width-tablet: 768px;
/***** Define column number *****/
$grid-columns: 12;
/***** Define gutter spacing *****/
$grid-gutter: 20px;
/***** Calculate gutter spacing for breakpoints / can also be set manually *****/
$grid-gutter-smscreen: $grid-gutter / 1.25;
$grid-gutter-tablet: $grid-gutter-smscreen / 1.1;
$grid-width
controls how wide the initial grid is.$grid-width-smscreen
controls how wide the grid on small screens is. This value also contols the smallscreen breakpoint.$grid-width-tablet
controls how wide the grid on tablets is. This value also contols the tablet breakpoint.$grid-columns
controls how much columns there are.$grid-gutter
controls how much space there is between columns.$grid-gutter-smscreen
calculates how much space there is between columns on small screens. Can also be set manually.$grid-gutter-tablet
calculates how much space there is between columns on tablets. Can also be set manually.