diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 530e7710..00000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,45 +0,0 @@ -# Changelog - -## v 0.3.1-dev - -- Fixed #504 (input-lg and input-sm classes now work) - -## v 0.3.0 - -- Implemented full color palette from Material Design specifications (thanks @korgan00) -- Reformat of `ripples.js` (thanks @grvcoelho) -- Autofill option of `material.js` is now set to false by default -- Deprecated `material-wfont.css`, now to include web fonts you should include roboto.css -- Now `material.css` supports only the primary shades of the material color palette (lightweight! about 200KB) -- `material-fullpalette.css` supports every shade of the material color palette (huge size! ~ 2MB) -- Adjusted padding on dialog(modal) to be more inline with standards (thanks @GradyD) -- Added jQuery 1.9.1 and Bootstrap 3.0 as dependencies (thanks @GradyD) -- fixed #468 (thanks @MatrixZ) -- Added :hover, :focus, :active and .active states on buttons -- Added color variations on toggles -- Improved shadows to better fit Material Design specs -- Improved hover state of buttons -- Material Checkboxes now are a single inline element `.checkbox-material`, this helps when you need to vertical align them -- Fixed Material Design icons (thanks @jmillspaysbills and @GradyD) -- Fixed behavior of floating labels and inputs -- Fixed several bugs -- Updated Meteor packages - -## v 0.2.1 - -- Fixed well sizes -- Fixed $.ripple that needed two clicks to effectively "click" an element -- Added $.ripple support to browsers that don't support CSS transitions (eg. IE9) -- Arrive.js integration is now complete, it inits correctly every Material Design element dynamically added -- Arrive.js is now faster, it run directly on the new element instead of scan the entire document -- $.material.autofill() is now configurable, you can set $.material.options.autofill = false to disable it -- Every $.material.init() options is now configurable, you can disable them setting false in the $.material.options.\ - -## v 0.2.0 - -- The master branch is now the development branch, if you want to use a "stable" release use the releases provided by GitHub. -- New demo page -- Primary color is now a subtle teal to follow the Material Design specifications. -- Ripples.js is now completely rewritten with jQuery. -- Fixed thousands of bugs. - diff --git a/Gruntfile.js b/Gruntfile.js index cb50e92e..1c35c47c 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -88,7 +88,7 @@ module.exports = function (grunt) { files: [{ expand: true, cwd: "less", - src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less", "!_mixins-shared.less", "!_import-bs*"], + src: ["**/*.less", "!_mixins.less", "!_import-bs*"], ext: ".scss", dest: "sass" }], @@ -116,6 +116,13 @@ module.exports = function (grunt) { order: 2 }, + // convert conditional when + { // https://regex101.com/r/dL1lI8/2 + pattern: /& when /gi, + replacement: "@if ", + order: 2 + }, + // convert all shadow mixins { // https://regex101.com/r/sJ2lH4/1 pattern: /.shadow-z-(\d+)((?:-hover)?) {/gi, @@ -144,58 +151,65 @@ module.exports = function (grunt) { }, // button variations mixin replacement(s) - { // Multi-line replacement - https://regex101.com/r/qD9qB8/2 - pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)contrast[\s\S]+?(?!\r|\n)(\d+)[\s\S]+?(?!\r|\n)}\);$\n/mg, - replacement: "@include button-variations(unquote($1), $2, $3%);\n", - order: 20 - }, + //{ // Multi-line replacement - https://regex101.com/r/qD9qB8/2 + // pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)contrast[\s\S]+?(?!\r|\n)(\d+)[\s\S]+?(?!\r|\n)}\);$\n/mg, + // replacement: "@include button-variations(unquote($1), $2, $3%);\n", + // order: 20 + //}, - // background-color generic-variations - { // Multi-line replacement - https://regex101.com/r/cW6pH8/2 - pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)background-color[\s\S]+?(?!\r|\n)(\(\d+\/\d+\))[\s\S]+?(?!\r|\n)}\);$\n/mg, - replacement: "@include bg-color-variations(unquote($1), $2, $3);\n", - order: 21 - }, + //// background-color generic-variations + //{ // Multi-line replacement - https://regex101.com/r/cW6pH8/2 + // pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)background-color[\s\S]+?(?!\r|\n)(\(\d+\/\d+\))[\s\S]+?(?!\r|\n)}\);$\n/mg, + // replacement: "@include bg-color-variations(unquote($1), $2, $3);\n", + // order: 21 + //}, - // bg-box-shadow generic-variations - { // Multi-line replacement - https://regex101.com/r/jW8kR1/1 - pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)box-shadow[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg, - replacement: "@include bg-box-shadow-variations(unquote($1), $2);\n", - order: 22 - }, + //// bg-box-shadow generic-variations + //{ // Multi-line replacement - https://regex101.com/r/jW8kR1/1 + // pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)box-shadow[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg, + // replacement: "@include bg-box-shadow-variations(unquote($1), $2);\n", + // order: 22 + //}, - // bg-img generic-variations - { // Multi-line replacement - https://regex101.com/r/aP2hH2/1 - pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)background-image[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg, - replacement: "@include bg-img-variations(unquote($1), $2);\n", - order: 23 - }, + //// bg-img generic-variations + //{ // Multi-line replacement - https://regex101.com/r/aP2hH2/1 + // pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)background-image[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg, + // replacement: "@include bg-img-variations(unquote($1), $2);\n", + // order: 23 + //}, - // navbar generic-variations - { // Multi-line replacement - https://regex101.com/r/lX1hH1/1 - pattern: /.generic-variations\(unquote\((".navbar")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg, - replacement: "@include navbar-variations(unquote($1), $2);\n", - order: 24 - }, - - // material-placehorder + // material-placeholder { // Multi-line replacement - https://regex101.com/r/eS2vQ3/2 pattern: /.material-placeholder\({$\n([\s\S]+?)}\);$\n/mg, replacement: "@include material-placeholder {\n$1\n}\n", order: 24 }, + // navbar generic-variations + { // Multi-line replacement - https://regex101.com/r/lX1hH1/4 + pattern: /.generic-variations\(unquote\((".navbar"), ~("([^"]+)?")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$/mg, + replacement: "@include navbar-variations(unquote($1), unquote($2), $4);\n", + order: 25 + }, + // fix calc references { // https://regex101.com/r/aZ8iI5/1 pattern: /calc\(unquote\("([^"]+)"\)\)/gi, replacement: "calc($1)", - order: 24 + order: 100 + }, + + // fix unquote("", ~"") + { // https://regex101.com/r/vX4nO9/6 + pattern: /\(unquote\(("([^"]+)?"), ~("([^"]+)?")\),/gi, + replacement: "(unquote($1), unquote($3),", + order: 101 }, // alert generic-variations (convert this one last - very broad search) - { // Multi-line replacement - https://regex101.com/r/jB1uL1/1 - pattern: /.generic-variations\(unquote\(("([^"]+)?")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+}\);$\n/mg, - replacement: "@include alert-variations(unquote($1), $3);\n", + { // Multi-line replacement - https://regex101.com/r/jB1uL1/2 + pattern: /.generic-variations\(unquote\(("([^"]+)?")\), unquote\(("([^"]+)?")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+}\);$\n/mg, + replacement: "@include alert-variations(unquote($1), unquote($3), $5);\n", order: 250 // very broad search, do this last }, @@ -217,8 +231,7 @@ module.exports = function (grunt) { files: [{ expand: true, cwd: "sass", - //src: ['material.scss', 'material-fullpalette.scss', 'ripples.scss', 'roboto.scss'], - src: ["material.scss", "material-fullpalette.scss", "roboto.scss", "ripples.scss"], + src: ["bootstrap-material-design.scss", "ripples.scss"], dest: "dist/sassc", // added to gitignore, only used for local testing ext: ".css" }] @@ -234,37 +247,11 @@ module.exports = function (grunt) { paths: ["less"], sourceMap: true, sourceMapRootpath: "/", - sourceMapFilename: "dist/css/material.css.map", - sourceMapURL: "material.css.map" + sourceMapFilename: "dist/css/bootstrap-material-design.css.map", + sourceMapURL: "bootstrap-material-design.css.map" }, files: { - "dist/css/material.css": "less/material.less", - } - }, - materialfullpalette: { - options: { - paths: ["less"], - sourceMap: true, - sourceMapRootpath: "/", - sourceMapFilename: "dist/css/material-fullpalette.css.map", - sourceMapURL: "material-fullpalette.css.map", - outputSourceFiles: true - }, - files: { - "dist/css/material-fullpalette.css": "less/material-fullpalette.less", - } - }, - roboto: { - options: { - paths: ["less"], - sourceMap: true, - sourceMapRootpath: "/", - sourceMapFilename: "dist/css/roboto.css.map", - sourceMapURL: "roboto.css.map", - outputSourceFiles: true - }, - files: { - "dist/css/roboto.css": "less/roboto.less", + "dist/css/bootstrap-material-design.css": "less/bootstrap-material-design.less", } }, ripples: { @@ -303,17 +290,7 @@ module.exports = function (grunt) { }, material: { files: { - "dist/css/material.css": "dist/css/material.css" - } - }, - materialfullpalette: { - files: { - "dist/css/material-fullpalette.css": "dist/css/material-fullpalette.css" - } - }, - roboto: { - files: { - "dist/css/roboto.css": "dist/css/roboto.css" + "dist/css/bootstrap-material-design.css": "dist/css/bootstrap-material-design.css" } }, ripples: { @@ -337,8 +314,12 @@ module.exports = function (grunt) { csslintrc: 'less/.csslintrc' }, dist: [ - 'dist/css/material.css', - 'dist/css/material-fullpalette.css' + 'dist/css/bootstrap-material-design.css', + 'dist/css/ripples.css', + ], + distmin: [ + 'dist/css/bootstrap-material-design.min.css', + 'dist/css/ripples.min.css', ], examples: [ 'docs/examples/**/*.css' @@ -363,16 +344,8 @@ module.exports = function (grunt) { advanced: false }, material: { - src: "dist/css/material.css", - dest: "dist/css/material.min.css" - }, - materialfullpalette: { - src: "dist/css/material-fullpalette.css", - dest: "dist/css/material-fullpalette.min.css" - }, - roboto: { - src: "dist/css/roboto.css", - dest: "dist/css/roboto.min.css" + src: "dist/css/bootstrap-material-design.css", + dest: "dist/css/bootstrap-material-design.min.css" }, ripples: { src: "dist/css/ripples.css", @@ -624,8 +597,6 @@ module.exports = function (grunt) { grunt.registerTask('less-compile', [ "less:material", - "less:materialfullpalette", - "less:roboto", "less:ripples" ]); @@ -633,14 +604,11 @@ module.exports = function (grunt) { "less-compile", "autoprefixer:material", - "autoprefixer:materialfullpalette", - "autoprefixer:roboto", "autoprefixer:ripples", - + "csslint:dist", "cssmin:material", - "cssmin:materialfullpalette", - "cssmin:roboto", - "cssmin:ripples" + "cssmin:ripples", + "csslint:distmin" ]); grunt.registerTask("dist-js", [ diff --git a/LICENSE.md b/LICENSE.md index 6cb0a77e..b96e2b7a 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -25,3 +25,6 @@ Acknowledgements: # Some original Bootstrap code and documentation http://getbootstrap.com Copyright (c) 2011-2015 Twitter, Inc + +# Some original MDL code http://www.getmdl.io/ +Copyright 2015 Google Inc. All Rights Reserved. diff --git a/README.md b/README.md index 8d8a7c68..ba11efb9 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,20 @@ 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. +Add the necessary links to your ` of your HTML document. +```html + + + -### 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 +79,31 @@ 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: +#### Themes -```html - -``` +NOTE: (In active) development +First, this is probably not what you think when a 'theme' is mentioned. -These colors are taken from the Material Design color palette and are reported below: +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. -![palette](demo/imgs/palette.jpg) +#### Colors + +There are 17 color variations (in addition to the classic 4 variations) described by the Material Design color palette: + +![palette](docs/assets/img/material-design-color-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 @@ -326,4 +330,4 @@ Currently, Material Design for Bootstrap supports Google Chrome (tested v37+), M ## License -[MIT License](LICENSE) +[MIT License](LICENSE.md) diff --git a/bootstrap-elements.html b/bootstrap-elements.html index 423cc195..be6dee7b 100644 --- a/bootstrap-elements.html +++ b/bootstrap-elements.html @@ -5,11 +5,21 @@ + Bootstrap Material + + + + + + - - + + + + +