more readme updates

This commit is contained in:
Kevin Ross 2015-11-18 16:53:08 -06:00
parent 21df89de84
commit 25373063fd

View File

@ -41,10 +41,12 @@ Is often asked how to change the primary color of this theme without edit the bo
You can do it by creating a less file in your project: You can do it by creating a less file in your project:
```css
@import "../bower_components/bootstrap-material-design/less/material.less"; @import "../bower_components/bootstrap-material-design/less/material.less";
// Override @primary color with one took from _colors.less // Override @primary color with one took from _colors.less
@primary: @deep-purple; @primary: @deep-purple;
```
Then, compiling this file, the entire theme will be compiled using the color chosen by you. Then, compiling this file, the entire theme will be compiled using the color chosen by you.
@ -89,7 +91,9 @@ They can be used by adding the class suffix `-material-color` to the desired ele
Example: Example:
```html
<button class="btn btn-material-deep-purple">Deep purple button</button> <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: These colors are taken from the Material Design color palette and are reported below:
@ -156,6 +160,7 @@ Upon focus, a hint can be displayed. Use any `p | span` with `.help-block`.
Be sure to inspect the source of the demos to find proper markup examples. Remember to use the proper HTML markup. Be sure to inspect the source of the demos to find proper markup examples. Remember to use the proper HTML markup.
Radio example: Radio example:
```html ```html
<div class="form-group"> <div class="form-group">
<label class="col-lg-2 control-label">Radios</label> <label class="col-lg-2 control-label">Radios</label>
@ -189,7 +194,9 @@ Variations are available for every icon, including the original Bootstrap icons.
The syntax to add a Material icon is: The syntax to add a Material icon is:
```html
<i class="icon icon-material-favorite"></i> <i class="icon icon-material-favorite"></i>
```
### Cards ### Cards
@ -225,6 +232,7 @@ Here is an example on how to use it:
Cards will adapt to column's width. The card below will have width equal to col-lg-6: Cards will adapt to column's width. The card below will have width equal to col-lg-6:
```html
<div class="row"> <div class="row">
<div class="col-lg-3"></div> <div class="col-lg-3"></div>
@ -236,7 +244,7 @@ Cards will adapt to column's width. The card below will have width equal to col-
<div class="col-lg-3"></div> <div class="col-lg-3"></div>
</div> </div>
```
## Material.js ## Material.js
@ -258,12 +266,14 @@ The functions that allows an optional selector are `$.material.ripples`, `$.mate
You can even override the default values using the `$.material.options` function. The default values are: You can even override the default values using the `$.material.options` function. The default values are:
```javascript
$.material.options = { $.material.options = {
"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple", "withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
"inputElements": "input.form-control, textarea.form-control, select.form-control", "inputElements": "input.form-control, textarea.form-control, select.form-control",
"checkboxElements": ".checkbox > label > input[type=checkbox]", "checkboxElements": ".checkbox > label > input[type=checkbox]",
"radioElements": ".radio > label > input[type=radio]" "radioElements": ".radio > label > input[type=radio]"
} }
```
### Arrive.js support ### Arrive.js support
@ -284,7 +294,9 @@ At the moment RipplesJS does not have its own repository but it will probably ha
You may want to set a custom color to the ripples of a specific element, to do so write: You may want to set a custom color to the ripples of a specific element, to do so write:
```html
<button class="btn btn-default" data-ripple-color="#F0F0F0">Custom ripple</button> <button class="btn btn-default" data-ripple-color="#F0F0F0">Custom ripple</button>
```
### noUiSlider ### noUiSlider