Skip to content
The responsive CSS web framework
CSS JavaScript
Branch: master
Clone or download
This branch is 142 commits behind OwlyStuff:master.

Latest commit

MikeBallan Merge pull request OwlyStuff#86 from MikeBallan/transition_fix
[icon & btn] removes the transition from the icon class to stop timing conflict
Latest commit e1e33ab Jun 16, 2016

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
font Moving everything around and deleting old files ready for scss May 10, 2016
scss Updates transition timing and code formatting Jun 16, 2016
.gitignore Adds gitignore for node modules and dist folders May 13, 2016
.npmignore Add empty npmignore so that gitignore is not used during npm release May 13, 2016
.travis.yml travis npm skip_cleanup May 13, 2016
LICENSE Create LICENSE May 1, 2013
README.md
gulpfile.js
package.json 4.0.0-beta.10 May 26, 2016

README.md

#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.
You can’t perform that action at this time.