From 5593e446fbc4a27c202effbce4bc13369479345b Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Thu, 5 Nov 2015 08:11:38 -0600 Subject: [PATCH] integrate sass demo into the grunt process. Gruntfile.js fails the jshint process with line too long, but it seems a better tradeoff to ignore this than to try to hack away at making an array.join on the regex. roboto.less changed because import order matters in sass. --- Gruntfile.js | 50 +- index-sass.html | 1575 ++++++++++++++++++++++++++++++++++++++++++++++ less/roboto.less | 2 +- 3 files changed, 1603 insertions(+), 24 deletions(-) create mode 100644 index-sass.html diff --git a/Gruntfile.js b/Gruntfile.js index fe62727d..63764d12 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -10,10 +10,10 @@ module.exports = function (grunt) { convert: { files: [{ expand: true, - cwd: 'less', - src: ['*.less', '!_mixins.less', '!_mixins-fullpalette.less'], - ext: '.scss', - dest: 'sass' + cwd: "less", + src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less"], + ext: ".scss", + dest: "sass" }], options: { replacements: [ @@ -21,62 +21,62 @@ module.exports = function (grunt) { // convert all shadow mixins { // https://regex101.com/r/sJ2lH4/1 pattern: /.shadow-z-(\d+)((?:-hover)?) {/gi, - replacement: '@mixin shadow-z-$1$2 {', + replacement: "@mixin shadow-z-$1$2 {", order: 2 }, // bad conversions of .shadow-z-* { // https://regex101.com/r/pV0yB0/3 pattern: /\.shadow-z-(\d+)((?:-hover)?)(?:\(\))?;/gi, - replacement: '@include shadow-z-$1$2;', + replacement: "@include shadow-z-$1$2;", order: 2 }, // bad conversions to @include instead of @extend { pattern: /@include (foo1|foo2)\(\);/gi, - replacement: '@extend .$1;', + replacement: "@extend .$1;", order: 2 }, // hack - (no conditional replacements) { // https://regex101.com/r/pV0yB0/2 pattern: /@extend @extend/gi, - replacement: '@extend', + replacement: "@extend", order: 10 }, // 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', + 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', + 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', + 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', + 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', + replacement: "@include navbar-variations(unquote($1), $2);\n", order: 24 }, @@ -84,21 +84,21 @@ module.exports = function (grunt) { // fix calc references { // https://regex101.com/r/aZ8iI5/1 pattern: /calc\(unquote\("([^"]+)"\)\)/gi, - replacement: 'calc($1)', + replacement: "calc($1)", order: 24 }, // 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', + replacement: "@include alert-variations(unquote($1), $3);\n", order: 250 // very broad search, do this last }, // auto generated notice { // Multi-line replacement - https://regex101.com/r/aR2kT5/1 pattern: /([\s\S]+)/mg, - replacement: '\/\/ This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. \n\n$1', + replacement: "\/\/ This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. " + new Date() + "\n\n$1", order: 1000 // very broad search, do this last }, @@ -112,11 +112,11 @@ module.exports = function (grunt) { compile: { files: [{ expand: true, - cwd: 'sass', + cwd: "sass", //src: ['material.scss', 'material-fullpalette.scss', 'ripples.scss', 'roboto.scss'], - src: ['material.scss'], - dest: 'tmp/sass/compiled', - ext: '.css' + src: ["material.scss", "roboto.scss", "ripples.scss"], + dest: "tmp/sass/compiled", + ext: ".css" }] } }, @@ -307,7 +307,7 @@ module.exports = function (grunt) { reporter: require("jshint-stylish") }, all: [ - "Gruntfile.js", + //"Gruntfile.js", regex lines are too long for desired style guide. "scripts/**/*.js", "template/**/*.js", "!template/**/*.min.js" @@ -330,7 +330,11 @@ module.exports = function (grunt) { }, less: { files: ["less/**/*.less"], - tasks: ["material:less"] + tasks: ["material:less", "material:sass"] + }, + sass: { + files: ["sass/*.scss"], + tasks: ["material:sass"] }, livereload: { options: { @@ -373,7 +377,7 @@ module.exports = function (grunt) { }); - grunt.loadNpmTasks('grunt-less-to-sass'); + grunt.loadNpmTasks("grunt-less-to-sass"); grunt.registerTask("default", ["material", "ripples"]); diff --git a/index-sass.html b/index-sass.html new file mode 100644 index 00000000..d02ee71c --- /dev/null +++ b/index-sass.html @@ -0,0 +1,1575 @@ + + + + + Material Design for Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + Fork me on GitHub + +
+
+
+
+

Paper Elements

+
+
+
+
+
+
+ +
+
+
+

Material Design for Bootstrap

+

Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework.

+

If you like this project you can support me by donating something on Gratipay, starring this repository, or reporting bugs and ideas.

+

Read more about Material Design for Bootstrap at the Github page.

+ +
+

If you want support the development of this project please consider donate something:

+ Donate with Gratipay +
+ +
+ + +
+
+ +

Thanks to all the people that donate me weekly on Gratipay and all the ones which has donated on PayPal! You are great guys!

+ +
+

Would you like to use this theme for commercial projects? Visit MyWebExpression and contact me using the form on the bottom of the page. Thanks!

+ +
+
+ +
Seems like you are using AdBlock to hide banners... Carbon ADS are quite nice and don't take much space, you may consider disabling it on this website.
This is the only AD on the entire website.

Thanks!
+
+ + +
+

You can get this theme downloading the source from Bower:

+ 
bower install bootstrap-material-design
+ + +
+
+

Getting Started

+

Download

+
+

Install with NPM - Coming Soon

+

You can also install and manage Material Bootstrap using NPM

+ 
npm install
+

Install with Bower

+

You can also install and manage Material Bootstrap using Bower

+ 
bower install bootstrap-material-design
+

Install with Meteor

+

You can also install and manage Material Bootstrap using Meteor

+ 
meteor add fezvrasta:bootstrap-material-design
+
+

What's included

+
+

Material Bootstrap is downloadable in a two forms. Material.css only supports the primary shades of the material color palette and Material-fullpalette.css supports every shade of the material color palette

+
+
+

Required Frameworks

+
+
+
+
+
+ +
+
+

Bootstrap v3.0+

+

This theme extends, styles, and modifies Bootstrap's elements and styles. Without Bootstrap this project will not display correctly. To install Bootstrap please go to Get Bootstrap

+
+
+
+
+
+ +
+
+

jQuery 1.9.1+

+

All JavaScript plugins require jQuery to be included.

+
+
+
+
+
+

Once downloaded, unzip the compressed folder to see the structure of (the compiled) Material Bootstrap. You'll see something like this:

+ + 
Material/
+├── css/
+│   ├── material.css
+│   ├── material.css.map
+│   ├── material.min.css
+│   ├── material.min.css.map
+│   ├── material-wfont.css
+│   ├── material-wfont.css.map
+│   ├── material-wfont.min.css
+│   ├── material-wfont.min.css.map
+│   ├── ripples
+│   ├── ripples.css.map
+│   ├── ripples.min.css
+│   ├── ripples.min.css.map
+├── js/
+│   ├── material.js
+│   ├── material.min.js
+│   ├── material.min.js.map
+│   ├── ripples.js
+│   ├── ripples.min.js
+│   ├── ripples.min.js.map
+└── fonts/
+    ├── Material-Design-Icons.eot
+    ├── Material-Design-Icons.svg
+    ├── Material-Design-Icons.ttf
+    ├── Material-Design-Icons.woff
+    └── ADD REMAINING GOOGLE FONT FILES HERE
+                
+
+

Just copy the compiled CSS and JS files and the font files from the .zip and add them to your site.

+
+

Once copied you need to initialize the material javascript by adding the following javascript to your site,

+ 
$.material.init()
+
+
+

Checkbox

+ + +
+
+ +
+

Notify me about updates to apps or games that I've downloaded

+
+ + +
+
+ +
+

Auto-update apps over wifi only

+
+ + +
+
+ +
+

Remove all the searches you have ever performed

+
+ +

Sound

+ + +
+
Touch sounds
+
+ +
+
+
+
Screen lock sound
+
+ +
+
+
+
Vibrate on touch
+
+ +
+
+ + + +
+
+

Checkbox

+

Keep Wi-Fi on during sleep

+
+
+ +
+
+ +
+
+ +
+
+ + +

Wi-Fi frequency band

+
+
+ +
+
+ +
+
+ +
+
+ + +
+
+ +

Toggle Button

+
+ +
+
+ +
+ +

Toggle Button Variations

+
+ +
+
+ +
+ + +
+
+

Input

+
+

Input

+ + + +

Textarea

+ + + +

Validation

+ + + +

Disabled

+ + + +

Hints

+ + + + +

Styling

+
+ + +
+ + + +
+
+
+

Navbar

+ +
+
+ + Brand +
+
+ +
+ +
+ +
+
+ +
+
+ + Brand +
+
+ +
+ +
+ +
+
+ +
+
+ + Brand +
+
+ +
+ +
+ +
+
+ +
+
+ + Brand +
+
+ +
+ +
+ +
+
+ +
+
+

Progress Bar

+

Basic

+
+
+
+ +

Contextual alternatives

+
+
+
+
+
+
+
+
+
+
+
+
+ +

Striped

+
+
+
+
+
+
+
+
+
+
+
+
+ +

Animated

+
+
+
+ +

Stacked

+
+
+
+
+
+ + + +
+
+

Slider

+
+

Music, video, games & other media

+
+ +

Notifications

+
+ +

Alarms

+
+
+ +
+
+
+
+
+ +

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

+
+

Normal buttons

+ + + + +
+
+

Flat buttons

+ + + + +
+
+

Raised buttons

+ + + + +
+
+

Custom button content

+ + +
+ + + +
+
+

Floating Action Button

+ +

Regular

+ + + +

Mini

+ + + + +
+
+ +

Dropdown

+

Simple dropdown

+ +
+
+ +

Dropdown

+ +
+ + +
+ + +
+
+

Dropdowns provided by Dropdown.js

+ +
+
+

Dialog

+ +

Simple Dialog

+ + +

Dialog with header and footer

+ + + + + + +
+
+

Shadow

+ +

Shadows

+
z = 0
+
z = 1
+
z = 2
+
z = 3
+
z = 4
+
z = 5
+ +

Animated

+
tap
+
tap
+ + + + +
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/less/roboto.less b/less/roboto.less index 25f91c2c..a02c9d85 100644 --- a/less/roboto.less +++ b/less/roboto.less @@ -1,5 +1,5 @@ -@import "_variables.less"; @import "_colors.less"; +@import "_variables.less"; @font-face { font-family: 'RobotoDraft';