From 1aa0e3c96f5a1f493fa906ce9b6e2d2e64b98060 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Sun, 22 Nov 2015 10:44:56 -0600 Subject: [PATCH] #740 address references to fullpalette in docs etc. Added TODOs where necessary --- README.md | 43 +- bootstrap-elements.html | 2 +- .../img/material-design-color-palette.jpg | Bin index.html | 384 +----------------- meteor/package-fullpalette.js | 2 +- 5 files changed, 16 insertions(+), 415 deletions(-) rename demo/imgs/palette.jpg => docs/assets/img/material-design-color-palette.jpg (100%) diff --git a/README.md b/README.md index 8d8a7c68..26abc12a 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # 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) [![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) @@ -28,27 +30,10 @@ If you prefer, you can include this framework in your project using our official ## 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. -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 font +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 @@ -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 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. -They can be used by adding the class suffix `-material-color` to the desired element and replacing `color` with the desired one. +### Customization -Example: +#### Colors -```html - -``` +There are 17 color variations (in addition to the classic 4 variations) described by the Material Design color palette: -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 diff --git a/bootstrap-elements.html b/bootstrap-elements.html index 423cc195..749ca60a 100644 --- a/bootstrap-elements.html +++ b/bootstrap-elements.html @@ -8,7 +8,7 @@ Bootstrap Material - + diff --git a/demo/imgs/palette.jpg b/docs/assets/img/material-design-color-palette.jpg similarity index 100% rename from demo/imgs/palette.jpg rename to docs/assets/img/material-design-color-palette.jpg diff --git a/index.html b/index.html index 62574c16..6968086b 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ - + @@ -870,388 +870,6 @@

Sliders are powered by noUiSlider

-
-

Material Color Samples

- -

This is the list of all the supported color variations. Each color can be applied to every element that supports variations.

- - 
.btn-material-{{color}}
.navbar-material-{{color}}
.well-material-{{color}}
etc...
- -

- material.css includes only the primary color shades (red, pink, purple, deep-purple, etc...), if you want the entire palette please use - material-fullpalette.css

- -
- - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -
-
-

- -

- - - - - - - - - - -
- - - - -

-
-
-

- -

- - - - - - - - - - -
-
-

- -

- - - - - - - - - - -
-
-

- -

- - - - - - - - - - -
-

Button

diff --git a/meteor/package-fullpalette.js b/meteor/package-fullpalette.js index dd3d98ce..0cd65533 100644 --- a/meteor/package-fullpalette.js +++ b/meteor/package-fullpalette.js @@ -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.ttf', // Android Browers 4.1, 4.3 - http://caniuse.com/#feat=ttf '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/js/material.js', 'dist/js/ripples.js',