mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-26 11:34:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

#740 address references to fullpalette in docs etc. Added TODOs where necessary

Browse Source
This commit is contained in:
Kevin Ross 2015-11-22 10:44:56 -06:00
parent e6911960be
commit 1aa0e3c96f
5 changed files with 16 additions and 415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
README.md
View File

@ -1,5 +1,7 @@
# bootstrap-material-design # bootstrap-material-design
WARNING: THESE DOCS RELATE TO 0.5.0, WHICH IS A SIGNIFICANT CHANGE FROM PREVIOUS VERSIONS.
[![build status](https://travis-ci.org/FezVrasta/bootstrap-material-design.svg?branch=master)](https://travis-ci.org/FezVrasta/bootstrap-material-design) [![build status](https://travis-ci.org/FezVrasta/bootstrap-material-design.svg?branch=master)](https://travis-ci.org/FezVrasta/bootstrap-material-design)
[![gratipay](https://img.shields.io/gratipay/FezVrasta.svg)](https://gratipay.com/FezVrasta) [![gratipay](https://img.shields.io/gratipay/FezVrasta.svg)](https://gratipay.com/FezVrasta)
[![Bower version](https://badge.fury.io/bo/bootstrap-material-design.svg)](https://github.com/FezVrasta/bootstrap-material-design) [![Bower version](https://badge.fury.io/bo/bootstrap-material-design.svg)](https://github.com/FezVrasta/bootstrap-material-design)
@ -28,27 +30,10 @@ If you prefer, you can include this framework in your project using our official
## Getting started ## Getting started
Navigate to the `dist/` folder in this repository, and you will see the `test.html` file, which has the CSS include statements, in the `head` section and the JS includes just before `body` section closes. TODO: link for font
You need to copy the `dist/` folder to the root of your project, ensuring that all the files in your project can access the files through the relative URL, supplied in the CSS and the JS includes. TODO: link for icon font
TODO: link for bmd
### material-fullpalette.css or material.css?
The only difference is that `material-fullpalette.css` has the full colors palette available (large file), the other one has just the primary colors (small file).
### Use custom color as primary
Is often asked how to change the primary color of this theme without edit the bower package directly.
You can do it by creating a less file in your project:
```css
@import "../bower_components/bootstrap-material-design/less/material.less";
// Override @primary color with one took from _colors.less
@primary: @deep-purple;
```
Then, compiling this file, the entire theme will be compiled using the color chosen by you.
## Support ## Support
@ -84,22 +69,20 @@ The upcoming 4.x version (no branch yet) will be developed using SASS.
Material Design ([spec](http://www.google.com/design/spec/material-design/introduction.html)) for Bootstrap provides Material Design ([spec](http://www.google.com/design/spec/material-design/introduction.html)) for Bootstrap provides
styles for bootstrap based markup to comply with Material Design concepts. styles for bootstrap based markup to comply with Material Design concepts.
### Color Variations
There are 17 additional color variations (in addition to the classic 4 variations) for buttons, inputs, checkboxes, radios, alerts, navbars, tabs, labels, paginations, progress bars and more. ### Customization
They can be used by adding the class suffix `-material-color` to the desired element and replacing `color` with the desired one.
Example: #### Colors
```html There are 17 color variations (in addition to the classic 4 variations) described by the Material Design color palette:
<button class="btn btn-material-deep-purple">Deep purple button</button>
```
These colors are taken from the Material Design color palette and are reported below: ![palette](docs/assets/img/material-design-color-palette.jpg)
![palette](demo/imgs/palette.jpg) ##### TODO: Describe variable override via less/sass
- describe variables, and the well defined material design colors in _colors.less
##### TODO: Describe customization/compilation of static css
To take advantage of all the shades please use `material-fullpalette.css`, but please be aware of its huge size.
### Forms ### Forms

2
bootstrap-elements.html
View File

@ -8,7 +8,7 @@
<title>Bootstrap Material</title> <title>Bootstrap Material</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/roboto.min.css" rel="stylesheet"> <link href="dist/css/roboto.min.css" rel="stylesheet">
<link href="dist/css/material-fullpalette.css" rel="stylesheet"> <link href="dist/css/bootstrap-material-design.css" rel="stylesheet">
<link href="dist/css/ripples.min.css" rel="stylesheet"> <link href="dist/css/ripples.min.css" rel="stylesheet">
<link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet"> <link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">

0
demo/imgs/palette.jpg → docs/assets/img/material-design-color-palette.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

384
index.html
View File

@ -14,7 +14,7 @@
<!-- Material Design for Bootstrap --> <!-- Material Design for Bootstrap -->
<link href="dist/css/roboto.min.css" rel="stylesheet"> <link href="dist/css/roboto.min.css" rel="stylesheet">
<link href="dist/css/material-fullpalette.css" rel="stylesheet"> <link href="dist/css/bootstrap-material-design.css" rel="stylesheet">
<link href="dist/css/ripples.min.css" rel="stylesheet"> <link href="dist/css/ripples.min.css" rel="stylesheet">
<!-- Dropdown.js --> <!-- Dropdown.js -->
@ -870,388 +870,6 @@
<p>Sliders are powered by <a href="http://refreshless.com/nouislider/" target="_blank">noUiSlider</a></p> <p>Sliders are powered by <a href="http://refreshless.com/nouislider/" target="_blank">noUiSlider</a></p>
</div> </div>
<div class="well page" id="material-colors">
<h1 class="header">Material Color Samples</h1>
<p>This is the list of all the supported color variations. Each color can be applied to every element that supports variations.</p>
<pre>.btn-material-{{color}}<br>.navbar-material-{{color}}<br>.well-material-{{color}}<br>etc...</pre>
<p>
<b>material.css</b> includes only the primary color shades (red, pink, purple, deep-purple, etc...), if you want the entire palette please use
<b>material-fullpalette.css</b></p>
<div class="sampleOthers">
<button type="button" class="btn btn-black btn-lg">Black</button>
<button type="button" class="btn btn-white btn-lg">White</button>
</div>
<div class="sampleRed">
<h2>
<button type="button" class="btn btn-material-red btn-lg">Red</button>
</h2>
<button type="button" class="btn btn-material-red-50">050</button>
<button type="button" class="btn btn-material-red-100">100</button>
<button type="button" class="btn btn-material-red-200">200</button>
<button type="button" class="btn btn-material-red-300">300</button>
<button type="button" class="btn btn-material-red-400">400</button>
<button type="button" class="btn btn-material-red-500">500</button>
<button type="button" class="btn btn-material-red-600">600</button>
<button type="button" class="btn btn-material-red-700">700</button>
<button type="button" class="btn btn-material-red-800">800</button>
<button type="button" class="btn btn-material-red-900">900</button>
<br>
<button type="button" class="btn btn-material-red-A100">A100</button>
<button type="button" class="btn btn-material-red-A200">A200</button>
<button type="button" class="btn btn-material-red-A400">A400</button>
<button type="button" class="btn btn-material-red-A700">A700</button>
</div>
<div class="samplePink">
<h2>
<button type="button" class="btn btn-material-pink btn-lg">Pink</button>
</h2>
<button type="button" class="btn btn-material-pink-50">050</button>
<button type="button" class="btn btn-material-pink-100">100</button>
<button type="button" class="btn btn-material-pink-200">200</button>
<button type="button" class="btn btn-material-pink-300">300</button>
<button type="button" class="btn btn-material-pink-400">400</button>
<button type="button" class="btn btn-material-pink-500">500</button>
<button type="button" class="btn btn-material-pink-600">600</button>
<button type="button" class="btn btn-material-pink-700">700</button>
<button type="button" class="btn btn-material-pink-800">800</button>
<button type="button" class="btn btn-material-pink-900">900</button>
<br>
<button type="button" class="btn btn-material-pink-A100">A100</button>
<button type="button" class="btn btn-material-pink-A200">A200</button>
<button type="button" class="btn btn-material-pink-A400">A400</button>
<button type="button" class="btn btn-material-pink-A700">A700</button>
</div>
<div class="samplePurple">
<h2>
<button type="button" class="btn btn-material-purple btn-lg">Purple</button>
</h2>
<button type="button" class="btn btn-material-purple-50">050</button>
<button type="button" class="btn btn-material-purple-100">100</button>
<button type="button" class="btn btn-material-purple-200">200</button>
<button type="button" class="btn btn-material-purple-300">300</button>
<button type="button" class="btn btn-material-purple-400">400</button>
<button type="button" class="btn btn-material-purple-500">500</button>
<button type="button" class="btn btn-material-purple-600">600</button>
<button type="button" class="btn btn-material-purple-700">700</button>
<button type="button" class="btn btn-material-purple-800">800</button>
<button type="button" class="btn btn-material-purple-900">900</button>
<br>
<button type="button" class="btn btn-material-purple-A100">A100</button>
<button type="button" class="btn btn-material-purple-A200">A200</button>
<button type="button" class="btn btn-material-purple-A400">A400</button>
<button type="button" class="btn btn-material-purple-A700">A700</button>
</div>
<div class="sampleDeepPurple">
<h2>
<button type="button" class="btn btn-material-deep-purple btn-lg">Deep Purple</button>
</h2>
<button type="button" class="btn btn-material-deep-purple-50">050</button>
<button type="button" class="btn btn-material-deep-purple-100">100</button>
<button type="button" class="btn btn-material-deep-purple-200">200</button>
<button type="button" class="btn btn-material-deep-purple-300">300</button>
<button type="button" class="btn btn-material-deep-purple-400">400</button>
<button type="button" class="btn btn-material-deep-purple-500">500</button>
<button type="button" class="btn btn-material-deep-purple-600">600</button>
<button type="button" class="btn btn-material-deep-purple-700">700</button>
<button type="button" class="btn btn-material-deep-purple-800">800</button>
<button type="button" class="btn btn-material-deep-purple-900">900</button>
<br>
<button type="button" class="btn btn-material-deep-purple-A100">A100</button>
<button type="button" class="btn btn-material-deep-purple-A200">A200</button>
<button type="button" class="btn btn-material-deep-purple-A400">A400</button>
<button type="button" class="btn btn-material-deep-purple-A700">A700</button>
</div>
<div class="sampleIndigo">
<h2>
<button type="button" class="btn btn-material-indigo btn-lg">Indigo</button>
</h2>
<button type="button" class="btn btn-material-indigo-50">050</button>
<button type="button" class="btn btn-material-indigo-100">100</button>
<button type="button" class="btn btn-material-indigo-200">200</button>
<button type="button" class="btn btn-material-indigo-300">300</button>
<button type="button" class="btn btn-material-indigo-400">400</button>
<button type="button" class="btn btn-material-indigo-500">500</button>
<button type="button" class="btn btn-material-indigo-600">600</button>
<button type="button" class="btn btn-material-indigo-700">700</button>
<button type="button" class="btn btn-material-indigo-800">800</button>
<button type="button" class="btn btn-material-indigo-900">900</button>
<br>
<button type="button" class="btn btn-material-indigo-A100">A100</button>
<button type="button" class="btn btn-material-indigo-A200">A200</button>
<button type="button" class="btn btn-material-indigo-A400">A400</button>
<button type="button" class="btn btn-material-indigo-A700">A700</button>
</div>
<div class="sampleBlue">
<h2>
<button type="button" class="btn btn-material-blue btn-lg">Blue</button>
</h2>
<button type="button" class="btn btn-material-blue-50">050</button>
<button type="button" class="btn btn-material-blue-100">100</button>
<button type="button" class="btn btn-material-blue-200">200</button>
<button type="button" class="btn btn-material-blue-300">300</button>
<button type="button" class="btn btn-material-blue-400">400</button>
<button type="button" class="btn btn-material-blue-500">500</button>
<button type="button" class="btn btn-material-blue-600">600</button>
<button type="button" class="btn btn-material-blue-700">700</button>
<button type="button" class="btn btn-material-blue-800">800</button>
<button type="button" class="btn btn-material-blue-900">900</button>
<br>
<button type="button" class="btn btn-material-blue-A100">A100</button>
<button type="button" class="btn btn-material-blue-A200">A200</button>
<button type="button" class="btn btn-material-blue-A400">A400</button>
<button type="button" class="btn btn-material-blue-A700">A700</button>
</div>
<div class="sampleLightBlue">
<h2>
<button type="button" class="btn btn-material-light-blue btn-lg">Light Blue</button>
</h2>
<button type="button" class="btn btn-material-light-blue-50">050</button>
<button type="button" class="btn btn-material-light-blue-100">100</button>
<button type="button" class="btn btn-material-light-blue-200">200</button>
<button type="button" class="btn btn-material-light-blue-300">300</button>
<button type="button" class="btn btn-material-light-blue-400">400</button>
<button type="button" class="btn btn-material-light-blue-500">500</button>
<button type="button" class="btn btn-material-light-blue-600">600</button>
<button type="button" class="btn btn-material-light-blue-700">700</button>
<button type="button" class="btn btn-material-light-blue-800">800</button>
<button type="button" class="btn btn-material-light-blue-900">900</button>
<br>
<button type="button" class="btn btn-material-light-blue-A100">A100</button>
<button type="button" class="btn btn-material-light-blue-A200">A200</button>
<button type="button" class="btn btn-material-light-blue-A400">A400</button>
<button type="button" class="btn btn-material-light-blue-A700">A700</button>
</div>
<div class="sampleCyan">
<h2>
<button type="button" class="btn btn-material-cyan btn-lg">Cyan</button>
</h2>
<button type="button" class="btn btn-material-cyan-50">050</button>
<button type="button" class="btn btn-material-cyan-100">100</button>
<button type="button" class="btn btn-material-cyan-200">200</button>
<button type="button" class="btn btn-material-cyan-300">300</button>
<button type="button" class="btn btn-material-cyan-400">400</button>
<button type="button" class="btn btn-material-cyan-500">500</button>
<button type="button" class="btn btn-material-cyan-600">600</button>
<button type="button" class="btn btn-material-cyan-700">700</button>
<button type="button" class="btn btn-material-cyan-800">800</button>
<button type="button" class="btn btn-material-cyan-900">900</button>
<br>
<button type="button" class="btn btn-material-cyan-A100">A100</button>
<button type="button" class="btn btn-material-cyan-A200">A200</button>
<button type="button" class="btn btn-material-cyan-A400">A400</button>
<button type="button" class="btn btn-material-cyan-A700">A700</button>
</div>
<div class="sampleTeal">
<h2>
<button type="button" class="btn btn-material-teal btn-lg">Teal</button>
</h2>
<button type="button" class="btn btn-material-teal-50">050</button>
<button type="button" class="btn btn-material-teal-100">100</button>
<button type="button" class="btn btn-material-teal-200">200</button>
<button type="button" class="btn btn-material-teal-300">300</button>
<button type="button" class="btn btn-material-teal-400">400</button>
<button type="button" class="btn btn-material-teal-500">500</button>
<button type="button" class="btn btn-material-teal-600">600</button>
<button type="button" class="btn btn-material-teal-700">700</button>
<button type="button" class="btn btn-material-teal-800">800</button>
<button type="button" class="btn btn-material-teal-900">900</button>
<br>
<button type="button" class="btn btn-material-teal-A100">A100</button>
<button type="button" class="btn btn-material-teal-A200">A200</button>
<button type="button" class="btn btn-material-teal-A400">A400</button>
<button type="button" class="btn btn-material-teal-A700">A700</button>
</div>
<div class="sampleGreen">
<h2>
<button type="button" class="btn btn-material-green btn-lg">Green</button>
</h2>
<button type="button" class="btn btn-material-green-50">050</button>
<button type="button" class="btn btn-material-green-100">100</button>
<button type="button" class="btn btn-material-green-200">200</button>
<button type="button" class="btn btn-material-green-300">300</button>
<button type="button" class="btn btn-material-green-400">400</button>
<button type="button" class="btn btn-material-green-500">500</button>
<button type="button" class="btn btn-material-green-600">600</button>
<button type="button" class="btn btn-material-green-700">700</button>
<button type="button" class="btn btn-material-green-800">800</button>
<button type="button" class="btn btn-material-green-900">900</button>
<br>
<button type="button" class="btn btn-material-green-A100">A100</button>
<button type="button" class="btn btn-material-green-A200">A200</button>
<button type="button" class="btn btn-material-green-A400">A400</button>
<button type="button" class="btn btn-material-green-A700">A700</button>
</div>
<div class="sampleLightGreen">
<h2>
<button type="button" class="btn btn-material-light-green btn-lg">LightGreen</button>
</h2>
<button type="button" class="btn btn-material-light-green-50">050</button>
<button type="button" class="btn btn-material-light-green-100">100</button>
<button type="button" class="btn btn-material-light-green-200">200</button>
<button type="button" class="btn btn-material-light-green-300">300</button>
<button type="button" class="btn btn-material-light-green-400">400</button>
<button type="button" class="btn btn-material-light-green-500">500</button>
<button type="button" class="btn btn-material-light-green-600">600</button>
<button type="button" class="btn btn-material-light-green-700">700</button>
<button type="button" class="btn btn-material-light-green-800">800</button>
<button type="button" class="btn btn-material-light-green-900">900</button>
<br>
<button type="button" class="btn btn-material-light-green-A100">A100</button>
<button type="button" class="btn btn-material-light-green-A200">A200</button>
<button type="button" class="btn btn-material-light-green-A400">A400</button>
<button type="button" class="btn btn-material-light-green-A700">A700</button>
</div>
<div class="sampleLime">
<h2>
<button type="button" class="btn btn-material-lime btn-lg">Lime</button>
</h2>
<button type="button" class="btn btn-material-lime-50">050</button>
<button type="button" class="btn btn-material-lime-100">100</button>
<button type="button" class="btn btn-material-lime-200">200</button>
<button type="button" class="btn btn-material-lime-300">300</button>
<button type="button" class="btn btn-material-lime-400">400</button>
<button type="button" class="btn btn-material-lime-500">500</button>
<button type="button" class="btn btn-material-lime-600">600</button>
<button type="button" class="btn btn-material-lime-700">700</button>
<button type="button" class="btn btn-material-lime-800">800</button>
<button type="button" class="btn btn-material-lime-900">900</button>
<br>
<button type="button" class="btn btn-material-lime-A100">A100</button>
<button type="button" class="btn btn-material-lime-A200">A200</button>
<button type="button" class="btn btn-material-lime-A400">A400</button>
<button type="button" class="btn btn-material-lime-A700">A700</button>
</div>
<div class="sampleYellow">
<h2>
<button type="button" class="btn btn-material-yellow btn-lg">Yellow</button>
</h2>
<button type="button" class="btn btn-material-yellow-50">050</button>
<button type="button" class="btn btn-material-yellow-100">100</button>
<button type="button" class="btn btn-material-yellow-200">200</button>
<button type="button" class="btn btn-material-yellow-300">300</button>
<button type="button" class="btn btn-material-yellow-400">400</button>
<button type="button" class="btn btn-material-yellow-500">500</button>
<button type="button" class="btn btn-material-yellow-600">600</button>
<button type="button" class="btn btn-material-yellow-700">700</button>
<button type="button" class="btn btn-material-yellow-800">800</button>
<button type="button" class="btn btn-material-yellow-900">900</button>
<br>
<button type="button" class="btn btn-material-yellow-A100">A100</button>
<button type="button" class="btn btn-material-yellow-A200">A200</button>
<button type="button" class="btn btn-material-yellow-A400">A400</button>
<button type="button" class="btn btn-material-yellow-A700">A700</button>
</div>
<div class="sampleAmber">
<h2>
<button type="button" class="btn btn-material-amber btn-lg">Amber</button>
</h2>
<button type="button" class="btn btn-material-amber-50">050</button>
<button type="button" class="btn btn-material-amber-100">100</button>
<button type="button" class="btn btn-material-amber-200">200</button>
<button type="button" class="btn btn-material-amber-300">300</button>
<button type="button" class="btn btn-material-amber-400">400</button>
<button type="button" class="btn btn-material-amber-500">500</button>
<button type="button" class="btn btn-material-amber-600">600</button>
<button type="button" class="btn btn-material-amber-700">700</button>
<button type="button" class="btn btn-material-amber-800">800</button>
<button type="button" class="btn btn-material-amber-900">900</button>
<br>
<button type="button" class="btn btn-material-amber-A100">A100</button>
<button type="button" class="btn btn-material-amber-A200">A200</button>
<button type="button" class="btn btn-material-amber-A400">A400</button>
<button type="button" class="btn btn-material-amber-A700">A700</button>
</div>
<div class="sampleOrange">
<h2>
<button type="button" class="btn btn-material-orange btn-lg">Orange</button>
</h2>
<button type="button" class="btn btn-material-orange-50">050</button>
<button type="button" class="btn btn-material-orange-100">100</button>
<button type="button" class="btn btn-material-orange-200">200</button>
<button type="button" class="btn btn-material-orange-300">300</button>
<button type="button" class="btn btn-material-orange-400">400</button>
<button type="button" class="btn btn-material-orange-500">500</button>
<button type="button" class="btn btn-material-orange-600">600</button>
<button type="button" class="btn btn-material-orange-700">700</button>
<button type="button" class="btn btn-material-orange-800">800</button>
<button type="button" class="btn btn-material-orange-900">900</button>
<br>
<button type="button" class="btn btn-material-orange-A100">A100</button>
<button type="button" class="btn btn-material-orange-A200">A200</button>
<button type="button" class="btn btn-material-orange-A400">A400</button>
<button type="button" class="btn btn-material-orange-A700">A700</button>
</div>
<div class="sampleDeepOrange">
<h2>
<button type="button" class="btn btn-material-deep-orange btn-lg">Deep Orange</button>
</h2>
<button type="button" class="btn btn-material-deep-orange-50">050</button>
<button type="button" class="btn btn-material-deep-orange-100">100</button>
<button type="button" class="btn btn-material-deep-orange-200">200</button>
<button type="button" class="btn btn-material-deep-orange-300">300</button>
<button type="button" class="btn btn-material-deep-orange-400">400</button>
<button type="button" class="btn btn-material-deep-orange-500">500</button>
<button type="button" class="btn btn-material-deep-orange-600">600</button>
<button type="button" class="btn btn-material-deep-orange-700">700</button>
<button type="button" class="btn btn-material-deep-orange-800">800</button>
<button type="button" class="btn btn-material-deep-orange-900">900</button>
<br>
<button type="button" class="btn btn-material-deep-orange-A100">A100</button>
<button type="button" class="btn btn-material-deep-orange-A200">A200</button>
<button type="button" class="btn btn-material-deep-orange-A400">A400</button>
<button type="button" class="btn btn-material-deep-orange-A700">A700</button>
<br><br>
</div>
<div class="sampleBrown">
<h2>
<button type="button" class="btn btn-material-brown btn-lg">Brown</button>
</h2>
<button type="button" class="btn btn-material-brown-50">050</button>
<button type="button" class="btn btn-material-brown-100">100</button>
<button type="button" class="btn btn-material-brown-200">200</button>
<button type="button" class="btn btn-material-brown-300">300</button>
<button type="button" class="btn btn-material-brown-400">400</button>
<button type="button" class="btn btn-material-brown-500">500</button>
<button type="button" class="btn btn-material-brown-600">600</button>
<button type="button" class="btn btn-material-brown-700">700</button>
<button type="button" class="btn btn-material-brown-800">800</button>
<button type="button" class="btn btn-material-brown-900">900</button>
</div>
<div class="sampleGrey">
<h2>
<button type="button" class="btn btn-material-grey btn-lg">Grey</button>
</h2>
<button type="button" class="btn btn-material-grey-50">050</button>
<button type="button" class="btn btn-material-grey-100">100</button>
<button type="button" class="btn btn-material-grey-200">200</button>
<button type="button" class="btn btn-material-grey-300">300</button>
<button type="button" class="btn btn-material-grey-400">400</button>
<button type="button" class="btn btn-material-grey-500">500</button>
<button type="button" class="btn btn-material-grey-600">600</button>
<button type="button" class="btn btn-material-grey-700">700</button>
<button type="button" class="btn btn-material-grey-800">800</button>
<button type="button" class="btn btn-material-grey-900">900</button>
</div>
<div class="sampleBlueGrey">
<h2>
<button type="button" class="btn btn-material-blue-grey btn-lg">Blue Grey</button>
</h2>
<button type="button" class="btn btn-material-blue-grey-50">050</button>
<button type="button" class="btn btn-material-blue-grey-100">100</button>
<button type="button" class="btn btn-material-blue-grey-200">200</button>
<button type="button" class="btn btn-material-blue-grey-300">300</button>
<button type="button" class="btn btn-material-blue-grey-400">400</button>
<button type="button" class="btn btn-material-blue-grey-500">500</button>
<button type="button" class="btn btn-material-blue-grey-600">600</button>
<button type="button" class="btn btn-material-blue-grey-700">700</button>
<button type="button" class="btn btn-material-blue-grey-800">800</button>
<button type="button" class="btn btn-material-blue-grey-900">900</button>
</div>
</div>
<div class="well page" id="button"> <div class="well page" id="button">
<h1 class="header">Button</h1> <h1 class="header">Button</h1>

2
meteor/package-fullpalette.js
View File

@ -23,7 +23,7 @@ Package.onUse(function (api) {
'dist/fonts/Material-Design-Icons.svg', // SVG fallback for iOS < 5 - http://caniuse.com/#feat=svg-fonts, http://stackoverflow.com/a/11002874/126903 'dist/fonts/Material-Design-Icons.svg', // SVG fallback for iOS < 5 - http://caniuse.com/#feat=svg-fonts, http://stackoverflow.com/a/11002874/126903
'dist/fonts/Material-Design-Icons.ttf', // Android Browers 4.1, 4.3 - http://caniuse.com/#feat=ttf 'dist/fonts/Material-Design-Icons.ttf', // Android Browers 4.1, 4.3 - http://caniuse.com/#feat=ttf
'dist/fonts/Material-Design-Icons.woff', // Supported by all modern browsers 'dist/fonts/Material-Design-Icons.woff', // Supported by all modern browsers
'dist/css/material-fullpalette.css', 'dist/css/bootstrap-material-design.css',
'dist/css/ripples.css', 'dist/css/ripples.css',
'dist/js/material.js', 'dist/js/material.js',
'dist/js/ripples.js', 'dist/js/ripples.js',