Material Design version of Foundation for Sites by Zurb
Supported Foundation Version: 6.2.3
Demo: http://eucalyptuss.github.io/material-foundation/
You'll need to have the following items installed before continuing.
- Node.js: Use the installer provided on the NodeJS website.
- Grunt: Run
[sudo] npm install -g grunt-cli
- Bower: Run
[sudo] npm install -g bower
git clone https://github.com/eucalyptuss/material-foundation.git
cd material-foundation
npm install && bower install
While you're working on your project, run:
grunt watch
to make grunt watch and compile all your CSS and javascript, or run:
grunt
to compile files manually
scss/
material-foundation.scss
: Main CSS filedemo.scss
: CSS for the preview purposes, don't mind itscss/_global.scss
: global settingsscss/_foundation.scss
: the rest of original Foundation's code is imported here
- Import
material-foundation.scss
to your stylesheet (the same way it is done in the demo file). - Set your primary and accent colors using the
$foundation-palette
variable and override any other variables if necessary. Include the variables before thematerial-foundation
stylesheet. - Include
material-foundation.js
before your closing</body>
tag.
And that's it!
To use Material Foundation with an existing Foundation project you can simply replace the Foundation with Material Foundation and everything should work as expected.
However, due to the differences between Foundation and Material Design Guidelines, some of the Material Foundation components are not based on the original Foundation's markup. To use them in your project you have to use the Material Foundation specific classes, e.g. floating-action-button
to use a Floating Action Button.
To view how the original Foundation components behave with the Material Foundation styles check the Kitchen Sink on the Material Foundation website.