owlystuff/amazium

The responsive CSS web framework

Amazium

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;

Variables in detail

• $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.