Natively Pronounced Mandarin
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    amaziumpublic

    Amazium Build Status

    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.

    Keywords

    none

    install

    npm i amazium

    Downloadsweekly downloads

    22

    version

    5.0.0

    license

    MIT

    homepage

    github.com

    last publish

    collaborators

    • avatar