diff --git a/Gemfile b/Gemfile index 26b269ac..9651ba8f 100644 --- a/Gemfile +++ b/Gemfile @@ -5,6 +5,5 @@ group :development, :test do gem 'jekyll-redirect-from', '~> 0.9.0' gem 'jekyll-seo-tag', '~> 0.1.3' gem 'jekyll-sitemap', '~> 0.9.0' - gem 'sass', '~> 3.4.19' gem 'scss_lint', '~> 0.43' end diff --git a/Gemfile.lock b/Gemfile.lock index eae4b0b8..36085e58 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -3,7 +3,7 @@ GEM specs: colorator (0.1) ffi (1.9.10) - jekyll (3.0.1) + jekyll (3.0.2) colorator (~> 0.1) jekyll-sass-converter (~> 1.0) jekyll-watch (~> 1.1) @@ -19,7 +19,7 @@ GEM jekyll-seo-tag (0.1.4) jekyll (>= 2.0) jekyll-sitemap (0.9.0) - jekyll-watch (1.3.0) + jekyll-watch (1.3.1) listen (~> 3.0) kramdown (1.9.0) liquid (3.0.6) @@ -27,15 +27,15 @@ GEM rb-fsevent (>= 0.9.3) rb-inotify (>= 0.9) mercenary (0.3.5) - rainbow (2.0.0) + rake (10.5.0) rb-fsevent (0.9.7) rb-inotify (0.9.5) ffi (>= 0.5.0) rouge (1.10.1) safe_yaml (1.0.4) sass (3.4.21) - scss_lint (0.43.2) - rainbow (~> 2.0) + scss_lint (0.44.0) + rake (~> 10.0) sass (~> 3.4.15) PLATFORMS @@ -46,5 +46,4 @@ DEPENDENCIES jekyll-redirect-from (~> 0.9.0) jekyll-seo-tag (~> 0.1.3) jekyll-sitemap (~> 0.9.0) - sass (~> 3.4.19) scss_lint (~> 0.43) diff --git a/Gruntfile.js b/Gruntfile.js index a0c578be..313f7b44 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -76,6 +76,26 @@ module.exports = function (grunt) { 'docs-dist-css': 'docs/dist/css' }, + sass: { + options: { + includePaths: ['scss', 'node_modules'], + precision: 6, + sourceComments: true, + sourceMap: true, + outputStyle: 'expanded' + }, + core: { + files: { + 'dist/css/<%= pkg.name %>.css': 'scss/<%= pkg.name %>.scss' + } + }, + docs: { + files: { + 'docs/dist/css/docs.css': 'docs/assets/scss/docs.scss' + } + } + }, + eslint: { options: { configFile: 'js/.eslintrc' @@ -482,13 +502,8 @@ module.exports = function (grunt) { }); - // These plugins provide necessary tasks. - require('load-grunt-tasks')(grunt, { - scope: 'devDependencies', - // Exclude Sass compilers. We choose the one to load later on. - pattern: ['grunt-*', '!grunt-sass', '!grunt-contrib-sass'] - }); + require('load-grunt-tasks')(grunt); require('time-grunt')(grunt); // Docs HTML validation task @@ -557,11 +572,6 @@ module.exports = function (grunt) { grunt.registerTask('test-scss', ['scsslint:core']); // CSS distribution task. - // Supported Compilers: sass (Ruby) and libsass. - (function (sassCompilerName) { - require('./grunt/bs-sass-compile/' + sassCompilerName + '.js')(grunt); - })(process.env.MDB_SASS || 'libsass'); - // grunt.registerTask('sass-compile', ['sass:core', 'sass:extras', 'sass:docs']); grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']); grunt.registerTask('dist-css', [ diff --git a/docs/_plugins/variables.rb b/docs/_plugins/variables.rb index f3a387bb..1bbb0f0d 100644 --- a/docs/_plugins/variables.rb +++ b/docs/_plugins/variables.rb @@ -18,10 +18,10 @@ module Variables site.data['minified'] = minified metadata_files = { - 'bower' => '../bower.json', 'package' => '../package.json', - 'bower_jquery' => '../bower_components/jquery/.bower.json', - 'bower_tether' => '../bower_components/tether/.bower.json' + 'npm_bootstrap' => '../node_modules/bootstrap/package.json', + 'npm_jquery' => '../node_modules/jquery/package.json', + 'npm_tether' => '../node_modules/tether/package.json' } metadata_files.each do |metadata, path| @@ -29,24 +29,24 @@ module Variables site.data[metadata] = contents end - # validate and provide some quick access to common variables (instead of diving into package and bower) + # validate and provide some quick access to common variables name = site.data['package']['name'] assert_not_nil :name, name version = site.data['package']['version'] assert_not_nil :version, version - bootstrap_version = site.data['bower']['dependencies']['bootstrap'] + bootstrap_version = site.data['npm_bootstrap']['version'] assert_not_nil :bootstrap_version, bootstrap_version if (bootstrap_version.include?('rosskevin')) bootstrap_version = 'v4-dev' # hack since we are using a rosskevin flex branch end - tether_version = site.data['bower_tether']['version'] + tether_version = site.data['npm_tether']['version'] assert_not_nil :tether_version, tether_version - jquery_version = site.data['bower_jquery']['version'] + jquery_version = site.data['npm_jquery']['version'] assert_not_nil :jquery_version, jquery_version site.data['name'] = name @@ -55,7 +55,6 @@ module Variables site.data['tether_version'] = tether_version site.data['jquery_version'] = jquery_version - # fabricate the archive and release links based on the site.repo and version repo = site.config['repo'] site.data['download'] = { diff --git a/docs/getting-started/build-tools.md b/docs/getting-started/build-tools.md index 3a60f08f..76db3c07 100644 --- a/docs/getting-started/build-tools.md +++ b/docs/getting-started/build-tools.md @@ -36,14 +36,6 @@ Our Gruntfile includes the following commands and tasks: | `grunt docs` | Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via `jekyll serve`. | | `grunt watch` | This is a convenience method for watching just Sass files and automatically building them whenever you save. | -## Switching Sass compilers - -Material Design for Bootstrap will be compiled with [libsass][libsass] by default, but you can opt into traditional Ruby Sass by setting the `MDB_SASS` environment variable. Two options are supported: - -* `libsass` (default) to use [libsass][libsass] via [grunt-sass][grunt-sass]. -* `sass` to use [Ruby Sass][ruby-sass] via [grunt-contrib-sass][grunt-contrib-sass]. - -For example, run `MDB_SASS=sass grunt` to test and build Material Design for Bootstrap with Ruby Sass. ## Autoprefixer @@ -71,7 +63,7 @@ Bootstrap checked out in parallel to this project, running three (3) different t 1. Performs an initial dependency setup/build - `bundle install && npm install && bower install && grunt dist` + `bundle install && npm install && grunt dist` 1. Start serving the documentation on @@ -81,7 +73,7 @@ Bootstrap checked out in parallel to this project, running three (3) different t 1. Performs an initial dependency setup/build - `bundle install && npm install && bower install && grunt dist` + `bundle install && npm install && grunt dist` 1. Watch both the core and docs sources for changes diff --git a/docs/getting-started/customization.md b/docs/getting-started/customization.md index 704a9beb..b6ab296a 100644 --- a/docs/getting-started/customization.md +++ b/docs/getting-started/customization.md @@ -18,27 +18,28 @@ Here are some ways to customize: ## 1. (Recommended) Include the source in your application -Installing via Bower, customizing MDB is a breeze. +Installing via npm (recommended) or bower, customizing MDB is a breeze. -1. Add `bootstrap-material-design` as a dependeny to your `bower.json` -1. `bower install` -1. In your application's Sass, redefine any customized variable _before_ `@import`ing bootstrap material design from your bower dependency directory. For example: +1. Add `bootstrap-material-design` as a dependency to your `package.json` or your `bower.json` +1. `npm install` or `bower install` depending on your tool of choice +1. Add either `node_modules` or `bower_components` in the `includePaths` for your grunt-sass, gulp-sass, or equivalent so you are able to import without specifying the full path of the resource. +1. In your application's SCSS, redefine any customized variable _before_ `@import`ing bootstrap material design. For example: ~~~~~~~~ $brand-primary: #3f51b5; // bootstrap variable $mdb-label-color-focus: #303f9f; // mdb variable -@import "../bower_components/bootstrap-material-design/scss/core"; // make sure to use _core.scss! +@import "bootstrap-material-design/scss/core"; // make sure to use _core.scss! ~~~~~~~~ -## 2. Download the source and change/compile +## 3. Download the source and change/compile {% callout warning %} This method is not recommended because it may be difficult to use source control **and** keep up to date with new releases. Please consider the recommended method above. {% endcallout %} -1. Download the source via bower or otherwise +1. Download the source via npm, bower or otherwise 2. Change any of the variables 3. Run `grunt dist` diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md index 7aef854d..a31dcda9 100644 --- a/docs/getting-started/download.md +++ b/docs/getting-started/download.md @@ -36,12 +36,6 @@ Pull in Material Design for Bootstrap's **source files** into nearly any project **Heads up!** Not all package managers have the v4 alpha published yet, but we should have them up shortly! {% endcallout %} -### Bower - -Install and manage Material Design for Bootstrap's Sass and JavaScript using [Bower](http://bower.io). - -{% highlight bash %}$ bower install bootstrap-material-design#v{{ site.data.version }}{% endhighlight %} - ### npm Install Material Design for Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.org/package/bootstrap): @@ -55,6 +49,12 @@ Material Design for Material Design for Bootstrap's `package.json` contains some - `sass` - path to Material Design for Bootstrap's main [Sass](http://sass-lang.com/) source file - `style` - path to Material Design for Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization) +### Bower + +Install and manage Material Design for Bootstrap's Sass and JavaScript using [Bower](http://bower.io). + +{% highlight bash %}$ bower install bootstrap-material-design#v{{ site.data.version }}{% endhighlight %} + ### Meteor {% highlight bash %} diff --git a/docs/getting-started/javascript.md b/docs/getting-started/javascript.md index 59956b33..7172a9e6 100644 --- a/docs/getting-started/javascript.md +++ b/docs/getting-started/javascript.md @@ -17,7 +17,7 @@ Plugins can be included individually (using Bootstrap's individual `*.js` files) ## Dependencies -Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included **before** the plugin files). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.data.version }}/bower.json) to see which versions of jQuery are supported. +Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included **before** the plugin files). [Consult our `package.json`]({{ site.repo }}/blob/v{{ site.data.version }}/package.json) to see which versions of jQuery are supported. ## Data attributes diff --git a/docs/getting-started/release-process.md b/docs/getting-started/release-process.md index d957b929..aafd3f5b 100644 --- a/docs/getting-started/release-process.md +++ b/docs/getting-started/release-process.md @@ -36,7 +36,7 @@ Use the following task template: Tag for bower - a valid tag starts with a `v` such as `v4.0.0` ### NPM -TODO: push to npm? +`npm publish` ### Meteor TODO: push to meteor? diff --git a/docs/migration.md b/docs/migration.md index 0bb47ca6..d06a8e8a 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -118,7 +118,7 @@ Our documentation received an upgrade across the board as well. Here's the low d - We're using Jekyll (seeded from Bootstrap's project itself) and we have custom plugins in the mix: - `example.rb` is a fork of the default `highlight.rb` plugin, allowing for easier example-code handling. - `callout.rb` is a similar fork of that, but designed for our special docs callouts. - - `variables.rb` which gathers the version (`package.json`), dependencies (`bower.json`) and makes them available to render text and links in the documentation `site.data`. No more SED to replace versions everywhere! + - `variables.rb` which gathers the version from (`package.json`), dependencies from `node_modules` (`package.json`) and makes them available to render text and links in the documentation `site.data`. No more SED to replace versions everywhere! - All docs content has been rewritten in Markdown (instead of HTML) for easier editing. - Pages have been reorganized for simpler content and a more approachable hierarchy. - We moved from regular CSS to SCSS to take full advantage of variables, mixins, and more. diff --git a/grunt/bs-sass-compile/libsass.js b/grunt/bs-sass-compile/libsass.js deleted file mode 100644 index 1d39a975..00000000 --- a/grunt/bs-sass-compile/libsass.js +++ /dev/null @@ -1,34 +0,0 @@ -// Compile Bootstrap with [libsass][1] using [grunt-sass][2] -// [1]: https://github.com/sass/libsass -// [2]: https://github.com/sindresorhus/grunt-sass -module.exports = function configureLibsass(grunt) { - grunt.config.merge({ - sass: { - options: { - includePaths: ['scss'], - precision: 6, - sourceComments: true, - sourceMap: true, - outputStyle: 'expanded' - }, - core: { - files: { - 'dist/css/<%= pkg.name %>.css': 'scss/<%= pkg.name %>.scss' - } - }, - extras: { - files: { - //'dist/css/<%= pkg.name %>-flex.css': 'scss/<%= pkg.name %>.scss', - //'dist/css/<%= pkg.name %>-grid.css': 'scss/<%= pkg.name %>-grid.scss', - //'dist/css/<%= pkg.name %>-reboot.css': 'scss/<%= pkg.name %>-reboot.scss' - } - }, - docs: { - files: { - 'docs/dist/css/docs.css': 'docs/assets/scss/docs.scss' - } - } - } - }); - grunt.loadNpmTasks('grunt-sass'); -}; diff --git a/grunt/bs-sass-compile/sass.js b/grunt/bs-sass-compile/sass.js deleted file mode 100644 index 2e4a39a4..00000000 --- a/grunt/bs-sass-compile/sass.js +++ /dev/null @@ -1,38 +0,0 @@ -// Compile Bootstrap with [Ruby Sass][1] using [grunt-contrib-sass][2] -// [1]: https://github.com/sass/sass -// [2]: https://github.com/gruntjs/grunt-contrib-sass -module.exports = function configureRubySass(grunt) { - var options = { - loadPath: ['scss'], - precision: 6, - sourcemap: 'auto', - style: 'expanded', - trace: true, - bundleExec: true - }; - grunt.config.merge({ - sass: { - core: { - options: options, - files: { - 'dist/css/<%= pkg.name %>.css': 'scss/<%= pkg.name %>.scss' - } - }, - extras: { - options: options, - files: { - //'dist/css/<%= pkg.name %>-flex.css': 'scss/<%= pkg.name %>-flex.scss', - //'dist/css/<%= pkg.name %>-grid.css': 'scss/<%= pkg.name %>-grid.scss', - //'dist/css/<%= pkg.name %>-reboot.css': 'scss/<%= pkg.name %>-reboot.scss' - } - }, - docs: { - options: options, - files: { - 'docs/dist/css/docs.css': 'docs/assets/scss/docs.scss' - } - } - } - }); - grunt.loadNpmTasks('grunt-contrib-sass'); -}; diff --git a/package.json b/package.json index 3c686a63..eb7b5d36 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,11 @@ "url": "https://github.com/FezVrasta/bootstrap-material-design/issues" }, "license": "MIT", + "dependencies": { + "bootstrap": "rosskevin/bootstrap#v4-tmp-flex-master", + "jquery": "^2.0", + "tether": "^1.1.1" + }, "devDependencies": { "autoprefixer": "^6.0.3", "babel-eslint": "^4.1.6", @@ -47,7 +52,6 @@ "grunt-contrib-copy": "~0.8.1", "grunt-contrib-cssmin": "~0.14.0", "grunt-contrib-qunit": "~0.7.0", - "grunt-contrib-sass": "^0.9.2", "grunt-contrib-uglify": "~0.11.0", "grunt-contrib-watch": "~0.6.1", "grunt-csscomb": "~3.1.0", diff --git a/scss/_bootstrap.scss b/scss/_bootstrap.scss index 10d49136..a1393edc 100644 --- a/scss/_bootstrap.scss +++ b/scss/_bootstrap.scss @@ -3,49 +3,49 @@ //@import "../../bootstrap/scss/ // Core variables and mixins -@import "../bower_components/bootstrap/scss/custom"; -@import "../bower_components/bootstrap/scss/variables"; -@import "../bower_components/bootstrap/scss/mixins"; +@import "bootstrap/scss/custom"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/mixins"; // Reset and dependencies -@import "../bower_components/bootstrap/scss/normalize"; -@import "../bower_components/bootstrap/scss/print"; +@import "bootstrap/scss/normalize"; +@import "bootstrap/scss/print"; // Core CSS -@import "../bower_components/bootstrap/scss/reboot"; -@import "../bower_components/bootstrap/scss/type"; -@import "../bower_components/bootstrap/scss/images"; -@import "../bower_components/bootstrap/scss/code"; -@import "../bower_components/bootstrap/scss/grid"; -@import "../bower_components/bootstrap/scss/tables"; -@import "../bower_components/bootstrap/scss/forms"; -@import "../bower_components/bootstrap/scss/buttons"; +@import "bootstrap/scss/reboot"; +@import "bootstrap/scss/type"; +@import "bootstrap/scss/images"; +@import "bootstrap/scss/code"; +@import "bootstrap/scss/grid"; +@import "bootstrap/scss/tables"; +@import "bootstrap/scss/forms"; +@import "bootstrap/scss/buttons"; // Components -@import "../bower_components/bootstrap/scss/animation"; -@import "../bower_components/bootstrap/scss/dropdown"; -@import "../bower_components/bootstrap/scss/button-group"; -@import "../bower_components/bootstrap/scss/input-group"; -@import "../bower_components/bootstrap/scss/custom-forms"; -@import "../bower_components/bootstrap/scss/nav"; -@import "../bower_components/bootstrap/scss/navbar"; -@import "../bower_components/bootstrap/scss/card"; -@import "../bower_components/bootstrap/scss/breadcrumb"; -@import "../bower_components/bootstrap/scss/pagination"; -@import "../bower_components/bootstrap/scss/labels"; -@import "../bower_components/bootstrap/scss/jumbotron"; -@import "../bower_components/bootstrap/scss/alert"; -@import "../bower_components/bootstrap/scss/progress"; -@import "../bower_components/bootstrap/scss/media"; -@import "../bower_components/bootstrap/scss/list-group"; -@import "../bower_components/bootstrap/scss/responsive-embed"; -@import "../bower_components/bootstrap/scss/close"; +@import "bootstrap/scss/animation"; +@import "bootstrap/scss/dropdown"; +@import "bootstrap/scss/button-group"; +@import "bootstrap/scss/input-group"; +@import "bootstrap/scss/custom-forms"; +@import "bootstrap/scss/nav"; +@import "bootstrap/scss/navbar"; +@import "bootstrap/scss/card"; +@import "bootstrap/scss/breadcrumb"; +@import "bootstrap/scss/pagination"; +@import "bootstrap/scss/labels"; +@import "bootstrap/scss/jumbotron"; +@import "bootstrap/scss/alert"; +@import "bootstrap/scss/progress"; +@import "bootstrap/scss/media"; +@import "bootstrap/scss/list-group"; +@import "bootstrap/scss/responsive-embed"; +@import "bootstrap/scss/close"; // Components w/ JavaScript -@import "../bower_components/bootstrap/scss/modal"; -@import "../bower_components/bootstrap/scss/tooltip"; -@import "../bower_components/bootstrap/scss/popover"; -@import "../bower_components/bootstrap/scss/carousel"; +@import "bootstrap/scss/modal"; +@import "bootstrap/scss/tooltip"; +@import "bootstrap/scss/popover"; +@import "bootstrap/scss/carousel"; // Utility classes -@import "../bower_components/bootstrap/scss/utilities"; +@import "bootstrap/scss/utilities"; diff --git a/scss/_variables.scss b/scss/_variables.scss index 0b12f299..5d14b47c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -16,7 +16,27 @@ $mdb-text-color-inverse-light: rgba($white, 0.54) !default; $mdb-label-color: $gray-light !default; $mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary -@import "variables/bootstrap"; +// Customized BS variables +@import "variables/bootstrap/components"; +@import "variables/bootstrap/spacing"; +@import "variables/bootstrap/body"; +@import "variables/bootstrap/brand"; +@import "variables/bootstrap/buttons"; +@import "variables/bootstrap/card"; +@import "variables/bootstrap/code"; +@import "variables/bootstrap/dropdown"; +@import "variables/bootstrap/forms"; +@import "variables/bootstrap/list-group"; +@import "variables/bootstrap/nav"; +@import "variables/bootstrap/state"; +@import "variables/bootstrap/type"; +@import "variables/bootstrap/modals"; + +// import their vars after customization for use below +$enable-flex: true; // fully adopt flexbox layouts +$enable-shadows: true; // enable shadows, set to false to turn off shadows +@import "bootstrap/scss/variables"; // from bootstrap node_module + // @import "variables/layout"; diff --git a/scss/variables/_bootstrap.scss b/scss/variables/_bootstrap.scss deleted file mode 100644 index b43d708e..00000000 --- a/scss/variables/_bootstrap.scss +++ /dev/null @@ -1,21 +0,0 @@ -// Customized BS variables -@import "bootstrap/components"; -@import "bootstrap/spacing"; - -@import "bootstrap/body"; -@import "bootstrap/brand"; -@import "bootstrap/buttons"; -@import "bootstrap/card"; -@import "bootstrap/code"; -@import "bootstrap/dropdown"; -@import "bootstrap/forms"; -@import "bootstrap/list-group"; -@import "bootstrap/nav"; -@import "bootstrap/state"; -@import "bootstrap/type"; -@import "bootstrap/modals"; - -// import their vars after customization for use below -$enable-flex: true; // fully adopt flexbox layouts -$enable-shadows: true; // enable shadows, set to false to turn off shadows -@import "../../bower_components/bootstrap/scss/variables";