Responsive CSS Framework
Literally Too orangey for crows!
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.
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.jsvar app = 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 *****//***** Define column number *****//***** Define gutter spacing *****//***** Calculate gutter spacing for breakpoints / can also be set manually *****/
Variables in detail
$grid-widthcontrols how wide the initial grid is.
$grid-width-smscreencontrols how wide the grid on small screens is. This value also contols the smallscreen breakpoint.
$grid-width-tabletcontrols how wide the grid on tablets is. This value also contols the tablet breakpoint.
$grid-columnscontrols how much columns there are.
$grid-guttercontrols how much space there is between columns.
$grid-gutter-smscreencalculates how much space there is between columns on small screens. Can also be set manually.
$grid-gutter-tabletcalculates how much space there is between columns on tablets. Can also be set manually.