Material Design for Bootstrap is a Bootstrap V3 compaitble theme; it is an easy way to use the new [Material Design guidelines by Google](http://www.google.com/design/spec/material-design/introduction.html) in your Bootstrap 3 based application.
Just include the theme, after the Bootstrap CSS and include the JavaScript at the end of your document (just before the `</body>` tag), and everything will be converted to Material Design (Paper) style.
**NOTE**: This V3 compatible theme is still in development, it could be used on production websites but I can't guarantee compatibility with previous versions.
The next major Bootstrap V4 compatible release of bootstrap-material-design is [in development](https://github.com/FezVrasta/bootstrap-material-design/tree/v4-dev). Check out the [documentation](http://rosskevin.github.io/bootstrap-material-design/migration/) (temporary site url) for migration, getting started, development, and examples. It has some requested implementations and more to come over V3. There are a lot of great changes in V4, but be warned, both Bootstrap V4 and our own implementation is changing daily. If you want to get involved, please do so by submitting pull requests. Before undertaking any major PR effort, please check the [milestone](https://github.com/FezVrasta/bootstrap-material-design/milestones/V4) for an existing issue. If there isn't one, please file a new issue and `cc: @rosskevin` so we can discuss and assign the work so effort is not duplicated. Thank you!
Please prefix any issue or pull request title with `V4`.
Major differences:
- Customized bootstrap build with variables instead of being an addon theme
- ES6 Javascript classes
- SCSS
- New scalable documentation framework that mirrors Bootstrap's own
- Documentation includes Bootstrap reference pages to display default rendering
- New build/documentation process (also mimics Bootstrap's project setup)
You may install this theme using Bower or [Meteor (package requires community help to be updated #769)](https://github.com/FezVrasta/bootstrap-material-design/issues/769):
Many use bower including compiling source for this project. Here are a couple of things to know:
1. When using SASS, `@import` directives cannot be interpolated. Given the variety of configurations, the typical `bower_components` directory is occasionally in a different location. Given the options, a `loadPath` was [added to the SASS compiler](https://github.com/FezVrasta/bootstrap-material-design/pull/762/files)
so that bootstrap files could be loaded without specifying the path to the `bower_components` directory. You may similarly need to add a load path to your compiler. It is still debatable if this is for the greater good, but seems like the only
way to accomodate multiple configurations.
2. This project will install both `bootstrap` and `bootstrap-sass` in `bower_components`. Each is used for the LESS and SASS version compilation respectively. If you are only using one, feel free to [ignore the other bower dependency](http://stackoverflow.com/a/27791606/2363935).
## Support and Contributions
All issues filed should be reduced to a [CodePen](http://codepen.io/rosskevin/pen/VvRgrN) test case where possible. Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file.
If you like this project you may support it by donating via Gittip, starring this repository or reporting issues.
1. Download the source or obtain the source with bower
2. Edit the `less/_variables.less` file and alter the color variables. You are most likely interested in altering `@brand-primary`. For a list of material design color palette variables, refer to `less/_colors.less`
3. Compile and test your distributable css by running `grunt serve`, this will launch your browser to the test site. Peruse and verify your color choices
4. From your application, you may now reference the compiled css files in `dist/css`
If you are referencing source from your own application's less file, you may simply customize the colors by redefining the color variables _after_ including bootstrap-material-design. See above for a description of variables.
Buttons are flat by default, without shadows. Add `.btn-raised` to a button to add a permanent shadow to it. See the [button examples](http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html#buttons)
It’s easy to incorporate icons into your web page. [Here’s an example](http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html#icon):
`material.js` is a jQuery plugin that adds some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc.
*`$.material.init()` - shortcut to run all the following commands:
*`$.material.ripples()` will apply ripples.js to the default elements.
*`$.material.input()` will enable the MD style to the text inputs, and other kind of inputs (number, email, file etc).
*`$.material.checkbox():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the [Inputs section](#inputs).
*`$.material.radio():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs section.
If you need to dynamically add elements to your DOM then you may need to include `Arrive.js` before `Material.js`. This will automatically apply `material.js` to every new element added via JavaScript.
Create snackbars and toasts with the [SnackbarJS plugin](https://github.com/FezVrasta/snackbarjs). The default toast style is the squared one (snackbar style). If you like to use the rounded style (toast style), please add the `toast` class to the `style` option of SnackbarJS.
This is part of the Material Design for Bootstrap project and is a plain JavaScript script which creates the ripple effect when clicking on the specified elements.
Transform select and multi-select inputs into advanced text inputs. Material Design for BS provides a full replacement of the plugin's CSS, so don't include it.
Read more about [selectize.js](http://brianreavis.github.io/selectize.js/).
Currently, Material Design for Bootstrap supports Google Chrome (tested v37+), Mozilla Firefox (tested 30+), and Internet Explorer (tested 11+). Mobile browsers are not currently tested but they may work.
