mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +03:00
readme updates regarding color customization and recent 0.5 changes
This commit is contained in:
Kevin Ross
parent
1b7c962687
commit
d8d08c97c6
55
README.md
55
README.md
|
|
@ -1,7 +1,5 @@
|
|||
# bootstrap-material-design
|
||||
|
||||
WARNING: THESE DOCS RELATE TO 0.5.0, WHICH IS A SIGNIFICANT CHANGE FROM PREVIOUS VERSIONS.
|
||||
|
||||
[](https://travis-ci.org/FezVrasta/bootstrap-material-design)
|
||||
[](https://gratipay.com/FezVrasta)
|
||||
[](https://github.com/FezVrasta/bootstrap-material-design)
|
||||
|
|
@ -70,7 +68,7 @@ After cloning the repo, run `npm install` to ensure you have all dev dependencie
|
|||
|
||||
The bootstrap 3.x compatible version (master) is developed using LESS, with an automated conversion to SASS.
|
||||
|
||||
The upcoming 4.x version (no branch yet) will be developed using SASS.
|
||||
The upcoming 4.x compatible version is being actively developed using SASS on the `v4-dev` branch.
|
||||
|
||||
|
||||
## Documentation
|
||||
|
|
@ -81,28 +79,32 @@ styles for bootstrap based markup to comply with Material Design concepts.
|
|||
|
||||
### Customization
|
||||
|
||||
#### Themes
|
||||
|
||||
NOTE: (In active) development
|
||||
First, this is probably not what you think when a 'theme' is mentioned.
|
||||
|
||||
The [material design specification mentions `light` vs. `dark` themes](https://www.google.com/design/spec/style/color.html#)
|
||||
throughout. By default, the source is written assuming a light theme is being used, but as reviews/refactorings
|
||||
occur, the `.theme-dark` marker class is being used to denote differences.
|
||||
This could be used on the top level elements such as `body` or `.container`. Effort on
|
||||
this is just beginning, but search the codebase for `.theme-dark` to see variations. Help/PR's welcome.
|
||||
|
||||
#### Colors
|
||||
|
||||
There are 17 color variations (in addition to the classic 4 variations) described by the Material Design color palette:
|
||||
|
||||
|
||||
|
||||
##### TODO: Describe variable override via less/sass
|
||||
- describe variables, and the well defined material design colors in _colors.less
|
||||
##### Compile your customized distributable
|
||||
|
||||
##### TODO: Describe customization/compilation of static css
|
||||
If you are using the static css files, you may want to use your own color variation. To do so:
|
||||
|
||||
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`
|
||||
|
||||
```less
|
||||
@brand-primary: @teal;
|
||||
@brand-success: @green;
|
||||
@brand-danger: @red;
|
||||
@brand-warning: @deep-orange;
|
||||
@brand-info: @light-blue;
|
||||
```
|
||||
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`
|
||||
|
||||
##### Customize via less variables
|
||||
|
||||
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.
|
||||
|
||||
### Forms
|
||||
|
||||
|
|
@ -118,8 +120,7 @@ fewer side effects.
|
|||
|
||||
#### Buttons
|
||||
|
||||
Add `.btn-flat` to a button to make it flat, without shadows.
|
||||
Add `.btn-raised` to a button to add a permanent shadow to it.
|
||||
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)
|
||||
|
||||
#### Inputs
|
||||
|
||||
|
|
@ -191,17 +192,15 @@ Radio example:
|
|||
|
||||
### Icons
|
||||
|
||||
Material Design for Bootstrap includes 490 original Material Design icons!
|
||||
These icons are extracted from the original Google sources and are licensed under the BSD license.
|
||||
They are provided as an iconic and easy to use font.
|
||||
Bootstrap Material Design supports the full range of original Material Design icons!
|
||||
[See the full set of material design icons at the material icons library.](https://www.google.com/design/icons/)
|
||||
|
||||
Variations are available for every icon, including the original Bootstrap icons.
|
||||
|
||||
The syntax to add a Material icon is:
|
||||
|
||||
```html
|
||||
<i class="icon icon-material-favorite"></i>
|
||||
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):
|
||||
```
|
||||
<i class="material-icons">face</i> face
|
||||
```
|
||||
|
||||
Please be sure that the fonts are properly setup, see [Getting Started](#getting-started).
|
||||
|
||||
### Cards
|
||||
|
||||
|
|
|
|||
|
|
@ -841,18 +841,15 @@
|
|||
<h1 id="icon">Icons</h1>
|
||||
|
||||
<p>Bootstrap Material Design supports the full range of original Material Design icons!<br>
|
||||
These icons come directly from the
|
||||
<a href="https://www.google.com/design/icons/">See the full set of material design icons at the material icons library.</a>
|
||||
</p>
|
||||
|
||||
<p>Variations are available for every icon, included for the original Bootstrap icons.<br>
|
||||
|
||||
|
||||
<p>
|
||||
It’s easy to incorporate icons into your web page. Here’s a small example:
|
||||
<br>
|
||||
<code><i class="material-icons">face</i></code>
|
||||
<i class="material-icons">face</i>
|
||||
</p>
|
||||
<p>Please be sure that the fonts are properly setup, see <a href="https://github.com/FezVrasta/bootstrap-material-design#getting-started">Getting Started</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user