From 9274466f0584a685066752e83da2cf7c128763b1 Mon Sep 17 00:00:00 2001 From: Federico Zivolo Date: Thu, 21 Aug 2014 09:48:39 +0200 Subject: [PATCH] Replaced Toastr with SnackbarJS. --- README.md | 77 +++++++++++++++++++++++++++++++++ screenshots/toastr-preview.jpg | Bin 11427 -> 0 bytes 2 files changed, 77 insertions(+) create mode 100644 README.md delete mode 100644 screenshots/toastr-preview.jpg diff --git a/README.md b/README.md new file mode 100644 index 00000000..0623329e --- /dev/null +++ b/README.md @@ -0,0 +1,77 @@ +Material Design for Bootstrap +========================= + +This Bootstrap theme is an easy way to use the new Material Design guide-lines by Google in your Bootstrap 3 based application. +Just include the theme right after the Bootstrap CSS and include the javascript at the end of your document, everything will be converted to Material Design (paper) style. + +This theme is in early developement and is not ready for production. + +Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material-design/). + + +Currently supported elements: + +- Input fields (text, numeric, email, etc) +- Textarea +- Buttons (ripple effect working) +- Select +- Navbar +- Button groups +- Input groups +- Checkbox +- Radio +- Alerts +- Progress bars +- Jumbotron +- Wells +- Dialogs + + +# Documentation + +Material Design for Bootstrap provides some additional stuff to get the best from Material Design. + +### Variations: + +There are 17 additional color variations (in addition to the classic 4 variations) for buttons, inputs, checkboxes, radios, alerts, navbars, tabs, labels, paginations, progess bars and more. +They can be used adding to the desired element the class suffix `-material-color` replacing `color` with the desired one. + +Example: + + + +These colors are took from the Material Design color palette and are reported below: + +![palette](screenshots/palette.jpg) + +### 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. + +### Inputs: + +Add `.floating-label` to an input field with a `placeholder` to transform the placeholder in a floating label. + +Remember to use the proper HTML markup to get radio and checkboxes styled correctly (choose between *radio* or *checkbox*): + +
+ +
+ +# Plugins + +Material Design for Bootstrap comes with styling support for various Bootstrap plugins, at the moment only one plugin is supported but others will come: + +### SnackbarJS + +Create snackbars and toasts with [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. + + +# Compatibility + +Currently Material Design for Bootstrap supports Google Chrome (tested v37+), Mozilla Firefox (tested 30+), Internet Explorer (tested 11+). Mobile browsers are not currently tested but may works. + diff --git a/screenshots/toastr-preview.jpg b/screenshots/toastr-preview.jpg deleted file mode 100644 index 366b8173f290b0d68567b52405fb9db8809cd165..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 11427 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