diff --git a/.babelrc.js b/.babelrc.js new file mode 100644 index 000000000..eb9c740ff --- /dev/null +++ b/.babelrc.js @@ -0,0 +1,16 @@ +module.exports = { + presets: [ + [ + '@babel/env', + { + exclude: ['transform-typeof-symbol'], + loose: true, + modules: false + } + ] + ], + plugins: [ + process.env.PLUGINS && 'transform-es2015-modules-strip', + '@babel/proposal-object-rest-spread' + ].filter(Boolean) +}; diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 000000000..71c3258a8 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +**/*.min.js +**/addons/* +js/* diff --git a/Gemfile b/Gemfile index 788658a48..b80761f88 100644 --- a/Gemfile +++ b/Gemfile @@ -1,8 +1,8 @@ source 'https://rubygems.org' group :development, :test do - gem 'jekyll', '~> 3.5.1' - gem 'jekyll-redirect-from', '~> 0.12.1' + gem 'jekyll', '~> 3.7.0' + gem 'jekyll-redirect-from', '~> 0.13.0' gem 'jekyll-sitemap', '~> 1.1.1' - gem 'jekyll-toc', '~> 0.3.0.pre1' + gem 'jekyll-toc', '~> 0.5.1' end diff --git a/Gemfile.lock b/Gemfile.lock index 53b52fdf0..28b223ea2 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,50 +1,62 @@ GEM remote: https://rubygems.org/ specs: - addressable (2.5.1) - public_suffix (~> 2.0, >= 2.0.2) + addressable (2.5.2) + public_suffix (>= 2.0.2, < 4.0) colorator (1.1.0) + concurrent-ruby (1.0.5) + em-websocket (0.5.1) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0.6.0) + eventmachine (1.2.5) ffi (1.9.18) forwardable-extended (2.6.0) - jekyll (3.5.2) + http_parser.rb (0.6.0) + i18n (0.9.1) + concurrent-ruby (~> 1.0) + jekyll (3.7.0) addressable (~> 2.4) colorator (~> 1.0) + em-websocket (~> 0.5) + i18n (~> 0.7) jekyll-sass-converter (~> 1.0) - jekyll-watch (~> 1.1) - kramdown (~> 1.3) + jekyll-watch (~> 2.0) + kramdown (~> 1.14) liquid (~> 4.0) mercenary (~> 0.3.3) pathutil (~> 0.9) - rouge (~> 1.7) + rouge (>= 1.7, < 4) safe_yaml (~> 1.0) - jekyll-redirect-from (0.12.1) + jekyll-redirect-from (0.13.0) jekyll (~> 3.3) - jekyll-sass-converter (1.5.0) + jekyll-sass-converter (1.5.1) sass (~> 3.4) jekyll-sitemap (1.1.1) jekyll (~> 3.3) - jekyll-toc (0.3.0) + jekyll-toc (0.5.1) nokogiri (~> 1.6) - jekyll-watch (1.5.0) - listen (~> 3.0, < 3.1) - kramdown (1.14.0) + jekyll-watch (2.0.0) + listen (~> 3.0) + kramdown (1.16.2) liquid (4.0.0) - listen (3.0.8) + listen (3.1.5) rb-fsevent (~> 0.9, >= 0.9.4) rb-inotify (~> 0.9, >= 0.9.7) + ruby_dep (~> 1.2) mercenary (0.3.6) - mini_portile2 (2.2.0) - nokogiri (1.8.0) - mini_portile2 (~> 2.2.0) - pathutil (0.14.0) + mini_portile2 (2.3.0) + nokogiri (1.8.1) + mini_portile2 (~> 2.3.0) + pathutil (0.16.1) forwardable-extended (~> 2.6) - public_suffix (2.0.5) + public_suffix (3.0.1) rb-fsevent (0.10.2) rb-inotify (0.9.10) ffi (>= 0.5.0, < 2) - rouge (1.11.1) + rouge (3.1.0) + ruby_dep (1.5.0) safe_yaml (1.0.4) - sass (3.5.1) + sass (3.5.5) sass-listen (~> 4.0.0) sass-listen (4.0.0) rb-fsevent (~> 0.9, >= 0.9.4) @@ -54,10 +66,10 @@ PLATFORMS ruby DEPENDENCIES - jekyll (~> 3.5.1) - jekyll-redirect-from (~> 0.12.1) + jekyll (~> 3.7.0) + jekyll-redirect-from (~> 0.13.0) jekyll-sitemap (~> 1.1.1) - jekyll-toc (~> 0.3.0.pre1) + jekyll-toc (~> 0.5.1) BUNDLED WITH - 1.15.4 + 1.16.0 diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index 2d445f5c6..000000000 --- a/Gruntfile.js +++ /dev/null @@ -1,336 +0,0 @@ -module.exports = function(grunt) { - 'use strict' - - require('load-grunt-tasks')(grunt) - require('time-grunt')(grunt) - - // project configuration - grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), - - banner: '/*!\n' + - ' * Material v<%= pkg.version %> (<%= pkg.homepage %>)\n' + - ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' + - ' * Licensed under MIT (https://github.com/Daemonite/material/blob/master/LICENSE)\n' + - ' */\n\n' + - 'if (typeof jQuery === \'undefined\') {\n' + - ' throw new Error(\'Material\\\'s JavaScript requires jQuery\')\n' + - '}\n\n' + - '+function ($) {\n' + - ' var version = $.fn.jquery.split(\' \')[0].split(\'.\')\n' + - ' if (version[0] < 3 || version[0] >= 4) {\n' + - ' throw new Error(\'Material\\\'s JavaScript requires at least jQuery v3.0.0 but less than v4.0.0\')\n' + - ' }\n' + - '}(jQuery);\n', - - babel: { - material: { - options: { - 'babelrc': false, - 'plugins': [ - 'transform-es2015-modules-strip' - ], - 'presets': [ - [ - 'es2015', - { - 'loose': true, - 'modules': false - } - ] - ] - }, - dest: '<%= concat.init.dest %>', - src: '<%= concat.init.dest %>' - } - }, - - concat: { - init: { - options: { - banner: '+function () {\n', - footer: '\n}();', - process: function (src) { - return src.replace(/^(export|import).*/gm, '') - } - }, - dest: 'assets/js/src.js', - src: 'assets/js/src/**/*.js' - }, - material: { - options: { - banner: '<%= banner %>\n', - process: function (src) { - return src.replace('"function"==typeof define&&define.amd?define("picker",["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):', '').replace('"function"==typeof define&&define.amd?define(["picker","jquery"],a):"object"==typeof exports?module.exports=a(require("./picker.js"),require("jquery")):', '') - }, - stripBanners: { - block: false, - line: true - } - }, - dest: 'js/material.js', - src: [ - 'assets/js/addons/picker.js', - 'assets/js/addons/picker.date.js', - 'assets/js/addons/textarea-autosize.js', - 'assets/js/addons/waves.js', - 'assets/js/addons-materialise/picker.js', - 'assets/js/addons-materialise/textarea-autosize.js', - 'assets/js/addons-materialise/waves.js', - '<%= babel.material.dest %>', - ] - }, - project: { - dest: 'js/project.js', - src: 'assets/js-project/**/*.js' - } - }, - - connect: { - live: { - options: { - base: 'gh-pages/', - keepalive: true, - hostname: '0.0.0.0', - port: '9999' - } - }, - once: { - options: { - base: 'gh-pages/', - keepalive: false, - hostname: '0.0.0.0', - port: '9999' - } - } - }, - - copy: { - doc: { - files: [ - { - dest: 'gh-pages/material/', // workaround for our GitHub Pages hosting - expand: true, - src: [ - 'bs/**', - 'css/**', - 'js/**' - ] - } - ] - } - }, - - cssmin: { - options: { - rebaseTo: 'css', - report: 'gzip', - sourceMap: true - }, - material: { - dest: 'css/material.min.css', - src: '<%= postcss.material.dest %>' - }, - project: { - dest: 'css/project.min.css', - src: '<%= postcss.project.dest %>' - } - }, - - jekyll: { - options: { - bundleExec: true, - config: '_config.yml', - incremental: false - }, - doc: {} - }, - - postcss: { - options: { - map: { - annotation: true, - inline: false, - sourcesContent: true - }, - processors: [ - require('autoprefixer')({ - browsers: [ - 'Android >= 4.4', - 'Chrome >= 45', - 'Edge >= 12', - 'Explorer >= 10', - 'Firefox ESR', - 'iOS >= 9', - 'Opera >= 30', - 'Safari >= 9' - ] - }) - ] - }, - material: { - dest: 'css/material.css', - src: '<%= sass.material.dest %>' - }, - project: { - dest: 'css/project.css', - src: '<%= sass.project.dest %>' - } - }, - - prettify: { - options: { - indent_inner_html: false - }, - doc: { - cwd: 'gh-pages/', - dest: 'gh-pages/', - expand: true, - ext: '.html', - src: ['**/*.html'] - } - }, - - qunit: { - options: { - inject: 'assets/js/tests/unit/phantom.js' - }, - files: 'assets/js/tests/index.html' - }, - - sass: { - options: { - precision: 6, - style: 'expanded' - }, - material: { - dest: 'css/material.css', - src: 'assets/sass/material.scss' - }, - project: { - dest: 'css/project.css', - src: 'assets/sass-project/project.scss' - } - }, - - scsslint: { - options: { - config: 'assets/sass/.scss-lint.yml' - }, - material: ['assets/sass/**/*.scss'], - project: ['assets/sass-project/**/*.scss'] - }, - - uglify: { - material: { - dest: 'js/material.min.js', - src: '<%= concat.material.dest %>' - }, - project: { - dest: 'js/project.min.js', - src: '<%= concat.project.dest %>' - } - }, - - watch: { - default: { - files: [ - 'assets/**/*.js', - 'assets/**/*.scss' - ], - tasks: [ - 'default' - ] - }, - material: { - files: [ - 'assets/js/**/*.js', - 'assets/sass/**/*.scss' - ], - tasks: [ - 'material' - ] - }, - project: { - files: [ - 'assets/js-project/**/*.js', - 'assets/sass-project/**/*.scss' - ], - tasks: [ - 'project' - ] - } - } - }) - - // task registration - grunt.registerTask( - 'default', - [ - 'material', - 'project' - ] - ) - - grunt.registerTask( - 'doc', - [ - 'default', - 'jekyll:doc', - 'prettify:doc', - 'connect:live' - ] - ) - - grunt.registerTask( - 'material', - [ - 'material-css', - 'material-js' - ] - ) - - grunt.registerTask( - 'material-css', - [ - 'sass:material', - 'postcss:material', - 'cssmin:material' - ] - ) - - grunt.registerTask( - 'material-js', - [ - 'concat:init', - 'babel:material', - 'concat:material', - 'uglify:material' - ] - ) - - grunt.registerTask( - 'project', - [ - 'project-css', - 'project-js' - ] - ) - - grunt.registerTask( - 'project-css', - [ - 'sass:project', - 'postcss:project', - 'cssmin:project' - ] - ) - - grunt.registerTask( - 'project-js', - [ - 'concat:project', - 'uglify:project' - ] - ) -} diff --git a/README.md b/README.md index cfd507ab4..09fc3387c 100644 --- a/README.md +++ b/README.md @@ -1,86 +1,99 @@ # Material -Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on __Google Material Design__. This lightweight framework is built using __Bootstrap 4__. The basic idea behind this project is to combine the visual language of Google Material Design with the front-end technology of the popular Bootstrap framework. +Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4. + +The basic idea behind this project is to combine the front-end technology of the popular Bootstrap framework with the visual language of Google Material Design. > A visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. > http://www.google.com/design/spec/material-design/introduction.html -Detailed [documentation site](http://daemonite.github.io/material/) is work in progress. Let us know what you think at the [Daemon Labs](http://labs.daemon.com.au) forum. +Feel free to check out our [documentation site](http://daemonite.github.io/material/) or let us know what you think at the [Daemon Labs](http://labs.daemon.com.au) forum. -## Goals +The primary goal of this project is to give all Bootstrap components and elements a Google Material Design look, so it allows web developers to continue using the exact same Bootstrap HTML markup they are familiar with, but presents them a final outcome that is in line with the principles and specifics of Google Material Design. -### Primary +A secondary goal of this project is to add support for some unique Google Material Design components such as floating buttons, pickers, and steppers, to name a few, which cannot be achieved by transforming existing Bootstrap components. -The primary goal of this project is to give all Bootstrap components and elements a Google Material Design look, so it allows web developers to continue using the exact same Bootstrap HTML markup they are familiar with, but presents them a final outcome that is in line with the principles and specifics of Google Material Design. +Because these components will require additional markup (some may require additional JavaScript), they will be documented separately in Material's documentation. + +## Table of contents + +- [Content](#content) +- [Documentation](#documentation) +- [Quick start](#quick-start) +- [Roadmap](#roadmap) + +## Content + +Within the download you will find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this: + +``` +daemonite-material/ +├── css/ +│ ├── material.css +│ ├── material.css.map +│ ├── material.min.css +│ └── material.min.css.map +└── js/ + ├── material.js + ├── material.js.map + ├── material.min.js + └── material.min.js.map +``` + +We provide compiled CSS and JavaScript (`material.*`), as well as compiled and minified CSS and JavaScript (`material.min.*`). CSS and JavaScript source maps (`material.*.map`) are available for use with certain browsers' developer tools. + +The Material source code download includes the precompiled CSS and JavaScript, along with documentation and source assets. More specifically, it includes the following and more: + +``` +daemonite-material/ +├── assets/ +│ ├── js/ +│ └── scss/ +├── css/ +│ ├── material.css +│ ├── material.css.map +│ ├── material.min.css +│ └── material.min.css.map +├── docs/ +│ └── 4.0/ +└── js/ + ├── material.js + ├── material.js.map + ├── material.min.js + └── material.min.js.map +``` + +## Documentation + +Material's documentation, included in this repo in the root directory, is built with [Jekyll](https://jekyllrb.com/) and publicly hosted on GitHub Pages at . The docs may also be run locally. + +### Running documentation locally + +1. Run through the [tooling setup](http://daemonite.github.io/material/docs/4.0/getting-started/tooling/#getting-started) to install Jekyll and other Ruby dependencies with `bundle install`. +2. Run `npm install` to install Node.js dependencies. +3. Run `npm run dist` and `npm run docs` to rebuild distributed CSS and JavaScript files, as well as docs assets. +4. From the root `/daemonite-material` directory, run `npm run docs-serve` in the command line. +5. Open `http://localhost:9999/material` in your browser, and voilà. + +## Quick start + +Several quick start options are available: + +- Clone the repo: `git clone https://github.com/Daemonite/material.git` +- Download the [latest release](https://github.com/Daemonite/material/releases) +- Install with [bower](https://bower.io/): `bower install daemonite-material` +- Install with [npm](https://www.npmjs.com/): `npm install daemonite-material` + +## Roadmap + +### Near-term + +Bug fixes and updates alongside Bootstrap 4's continuous releases. + +### Mid-term + +Add missing support for some Google Material Design components (e.g. snackbars). + +### Long-term -### Secondary - -A secondary goal of this project is to add support for some unique Google Material Design components such as floating buttons and labels, pickers, and steppers, to name a few, which cannot be achieved by transforming existing Bootstrap components. - -Because these components will require additional markup (some may require additional JavaScript), they will be documented separately in Material's documentation (work-in-progress). - -## Supported Bootstrap 4 Components - -Currently based on __Bootstrap v4.0.0-beta__. - -| Bootstrap 4 Components | Equivalent Google Material Design Components | -| --- | --- | -| Alerts | _None, but supported with our own interpretation_ | -| Badge | _None, but supported with our own interpretation_ | -| Breadcrumb | _None, but supported with our own interpretation_ | -| Buttons | [Buttons](https://material.google.com/components/buttons.html) | -| Button group | [Toggle buttons](https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons) | -| Card | [Cards](https://material.google.com/components/cards.html) | -| Carousel | _None, but supported with our own interpretation_ | -| Collapse | _None, but supported with our own interpretation_ | -| Dropdowns | [Menus](https://material.google.com/components/menus.html) | -| Forms | [Text fields](https://material.google.com/components/text-fields.html) | -| Input group | [Text fields](https://material.google.com/components/text-fields.html) | -| Jumbotron | _None, but supported with our own interpretation_ | -| List group | [Expansion panels](https://material.google.com/components/expansion-panels.html) | -| Modal | [Dialogs](https://material.google.com/components/dialogs.html) | -| Navs | _None, but supported with our own interpretation_ | -| Navbar | [Toolbars](https://material.google.com/components/toolbars.html) | -| Pagination | _None, but supported with our own interpretation_ | -| Popovers | _None, but supported with our own interpretation_ | -| Progress | [Progress & activity](https://material.google.com/components/progress-activity.html) | -| Scrollspy | _None, but supported with our own interpretation_ | -| Tooltips | [Tooltips](https://material.google.com/components/tooltips.html) | - -### Additional Supported Bootstrap 4 Elements -* Bootstrap 4's grid system is supported, but breakpoints have been changed according to Google Material Design's [Responsive UI Guidlines](https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints). -* Bootstrap 4's layout components such as `.media` are all supported. -* Bootstrap 4's typography classes and other content related elements (such as code, figures and images) are all supported. -* Bootstrap 4's utility classes are all supported. - -## Supported Material Components - -| Material Components | Equivalent Bootstrap 4 Components | Additional Information | -| --- | --- | --- | -| Bottom navigation | _None_ | Todo: currently not supported. | -| Bottom sheets | _None_ | Todo: currently not supported. | -| Buttons | [Buttons](https://getbootstrap.com/docs/4.0/components/buttons/) | `.btn` for raised buttons, `.btn-outline` for flat buttons. | -| Buttons: Floating Action Button | _None_ | Add `.btn-float` on top of a `.btn` for floating action buttons. | -| Cards | [Cards](https://getbootstrap.com/docs/4.0/components/card/) | Additional `.card-actions` added to style supplemental action area. | -| Chips | _None_ | `.chip` (Material) works slightly different to `.badge` (Bootstrap) and has more functionalities. | -| Data tables | [Tables](https://getbootstrap.com/docs/4.0/content/tables/) | _None_ | -| Dialogs | [Modal](https://getbootstrap.com/docs/4.0/components/modal/) | Additional `.modal-footer-stacked` added to style stacked full-width buttons. | -| Dividers | _None_ | Generally, use `
` with margin utility classes to create dividers. Some specific components have dividers built in. | -| Expansion panels | [List group](https://getbootstrap.com/docs/4.0/components/list-group/) | Additional `.expansion-*` classes added to extend default `.list-group-item`. | -| Grid lists | _None_ | Use Bootstrap 4's grid system with padding utility classes to create grid lists. | -| Lists | [Media object](https://getbootstrap.com/docs/4.0/layout/media-object/) | Margin, padding, and vertical-alignment utility classes may be required. | -| Lists: Controls | [Media object](https://getbootstrap.com/docs/4.0/layout/media-object/) | Margin, padding, and vertical-alignment utility classes may be required. | -| Menus | [Dropdowns](https://getbootstrap.com/docs/4.0/components/dropdowns/) | Both `.dropdown-menu` (Bootstrap) and `.menu` (Material) work the same apart from their opening positions. `.dropdown-menu-sm` and `.menu-cascading` are added for a cascading menu variation defined in Google Material Design. | -| Navigation drawer | _None_ | A default navigation drawer always opens above all other content with a tranparent black backdrop. Permanent (including its different variations), persistent, and temporary navigation drawers are supported, but the mini variant is currently not supported. | -| Pickers | _None_ | Only date picker is currently supported. Todo: landscape picker. | -| Progress & activity | [Progress](https://getbootstrap.com/docs/4.0/components/progress/) | Circular and indeterminate linear progress are added on top of default linear progress. | -| Selection controls | [Forms](https://getbootstrap.com/docs/4.0/components/forms/#custom-forms) | The slide toggle defined in Google Material Design is supported with `.custom-switch`. | -| Sliders | _None_ | Todo: currently not supported. | -| Snackbars & toasts | _None_ | Todo: add snackbars & toasts support back. | -| Steppers | _None_ | Only non-clickable stepper is currently supported. | -| Subheaders | _None_ | Use colour and typography utility classes to create subheaders. | -| Tabs | [Navs](https://getbootstrap.com/docs/4.0/components/navs/#tabs) | `.nav-tabs-scrollable` is added for scrollable tab bars. | -| Text fields | [Forms](https://getbootstrap.com/docs/4.0/components/forms/) | `.floating-label`, `.textarea-autosize` and `.textfield-box` are added. | -| Toolbars | [Navbar](https://getbootstrap.com/docs/4.0/components/navbar/) | `.toolbar-waterfall` requires some custom JavaScript to add/remove `.waterfall` class on `scroll` since Bootstrap 4 removes the affix plugin. | -| Tooltips | [Tooltips](https://getbootstrap.com/docs/4.0/components/tooltips/) | _None_ | -| Widgets | _None_ | This component is not relevant to web development, so we will not actively look into this. | +Rewrite all JavaScript plugins in ES6 to take advantage of the newest JavaScript enhancements. diff --git a/_config.yml b/_config.yml index 0392ed9e0..7fa1dbead 100644 --- a/_config.yml +++ b/_config.yml @@ -7,29 +7,35 @@ # permalinks permalink: pretty +# plugins + plugins: + - jekyll-redirect-from + - jekyll-sitemap + - jekyll-toc + # server baseurl: "/material" # workaround for our GitHub Pages hosting destination: "gh-pages/material" # workaround for our GitHub Pages hosting encoding: "UTF-8" exclude: + - .babelrc.js + - .eslintignore - .git - .gitignore - - .sass-cache + - .sass-cache/ - assets/ - bower.json + - build/ + - docs-assets/ - Gemfile - Gemfile.lock - gh-pages/ - - Gruntfile.js - lint-vars.sh - node_modules/ - - npm-shrinkwrap.json - package.json + - package-lock.json + - README.md host: 0.0.0.0 - plugins: - - jekyll-redirect-from - - jekyll-sitemap - - jekyll-toc port: 9999 source: "." url: "http://daemonite.github.io/material" @@ -41,18 +47,22 @@ # vars cdn: + bs_css: "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" + bs_css_docs: "https://getbootstrap.com/assets/css/docs.min.css" + bs_js: "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" + bs_js_docs: "https://getbootstrap.com/assets/js/docs.min.js" jquery: "https://code.jquery.com/jquery-3.2.1.slim.min.js" jquery_hash: "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" md_font: "https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" md_icon: "https://fonts.googleapis.com/icon?family=Material+Icons" - popper: "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" - popper_hash: "sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" - current_version: "4.0.0-beta" + popper: "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" + popper_hash: "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" + current_version: "4.0.0" docs_version: "4.0" download: - source: "https://github.com/Daemonite/material/archive/v4.0.0-beta.zip" - dist: "https://github.com/Daemonite/material/releases/download/v4.0.0-beta/material-4.0.0-beta-dist.zip" + source: "https://github.com/Daemonite/material/archive/v4.0.0.zip" + dist: "https://github.com/Daemonite/material/releases/download/v4.0.0/material-4.0.0-dist.zip" id: - navbar: "doc_navbar" - navdrawer: "doc_navdrawer" + navbar: "doc-navbar" + navdrawer: "doc-navdrawer" repo: "https://github.com/Daemonite/material" diff --git a/_data/colors.yml b/_data/colors.yml new file mode 100644 index 000000000..96b5cb718 --- /dev/null +++ b/_data/colors.yml @@ -0,0 +1,818 @@ +- name: amber + levels: + - name: 50 + hex: "#fff8e1" + text: "#212121" + - name: 100 + hex: "#ffecb3" + text: "#212121" + - name: 200 + hex: "#ffe082" + text: "#212121" + - name: 300 + hex: "#ffd54f" + text: "#212121" + - name: 400 + hex: "#ffca28" + text: "#212121" + - name: 500 + hex: "#ffc107" + text: "#212121" + - name: 600 + hex: "#ffb300" + text: "#212121" + - name: 700 + hex: "#ffa000" + text: "#212121" + - name: 800 + hex: "#ff8f00" + text: "#212121" + - name: 900 + hex: "#ff6f00" + text: "#212121" + - name: a100 + hex: "#ffe57f" + text: "#212121" + - name: a200 + hex: "#ffd740" + text: "#212121" + - name: a400 + hex: "#ffc400" + text: "#212121" + - name: a700 + hex: "#ffab00" + text: "#212121" + +- name: blue + levels: + - name: 50 + hex: "#e3f2fd" + text: "#212121" + - name: 100 + hex: "#bbdefb" + text: "#212121" + - name: 200 + hex: "#90caf9" + text: "#212121" + - name: 300 + hex: "#64b5f6" + text: "#212121" + - name: 400 + hex: "#42a5f5" + text: "#212121" + - name: 500 + hex: "#2196f3" + text: "#212121" + - name: 600 + hex: "#1e88e5" + text: "#ffffff" + - name: 700 + hex: "#1976d2" + text: "#ffffff" + - name: 800 + hex: "#1565c0" + text: "#ffffff" + - name: 900 + hex: "#0d47a1" + text: "#ffffff" + - name: a100 + hex: "#82b1ff" + text: "#212121" + - name: a200 + hex: "#448aff" + text: "#ffffff" + - name: a400 + hex: "#2979ff" + text: "#ffffff" + - name: a700 + hex: "#2962ff" + text: "#ffffff" + +- name: blue grey + levels: + - name: 50 + hex: "#eceff1" + text: "#212121" + - name: 100 + hex: "#cfd8dc" + text: "#212121" + - name: 200 + hex: "#b0bec5" + text: "#212121" + - name: 300 + hex: "#90a4ae" + text: "#212121" + - name: 400 + hex: "#78909c" + text: "#ffffff" + - name: 500 + hex: "#607d8b" + text: "#ffffff" + - name: 600 + hex: "#546e7a" + text: "#ffffff" + - name: 700 + hex: "#455a64" + text: "#ffffff" + - name: 800 + hex: "#37474f" + text: "#ffffff" + - name: 900 + hex: "#263238" + text: "#ffffff" + +- name: brown + levels: + - name: 50 + hex: "#efebe9" + text: "#212121" + - name: 100 + hex: "#d7ccc8" + text: "#212121" + - name: 200 + hex: "#bcaaa4" + text: "#212121" + - name: 300 + hex: "#a1887f" + text: "#ffffff" + - name: 400 + hex: "#8d6e63" + text: "#ffffff" + - name: 500 + hex: "#795548" + text: "#ffffff" + - name: 600 + hex: "#6d4c41" + text: "#ffffff" + - name: 700 + hex: "#5d4037" + text: "#ffffff" + - name: 800 + hex: "#4e342e" + text: "#ffffff" + - name: 900 + hex: "#3e2723" + text: "#ffffff" + +- name: cyan + levels: + - name: 50 + hex: "#e0f7fa" + text: "#212121" + - name: 100 + hex: "#b2ebf2" + text: "#212121" + - name: 200 + hex: "#80deea" + text: "#212121" + - name: 300 + hex: "#4dd0e1" + text: "#212121" + - name: 400 + hex: "#26c6da" + text: "#212121" + - name: 500 + hex: "#00bcd4" + text: "#212121" + - name: 600 + hex: "#00acc1" + text: "#212121" + - name: 700 + hex: "#0097a7" + text: "#ffffff" + - name: 800 + hex: "#00838f" + text: "#ffffff" + - name: 900 + hex: "#006064" + text: "#ffffff" + - name: a100 + hex: "#84ffff" + text: "#212121" + - name: a200 + hex: "#18ffff" + text: "#212121" + - name: a400 + hex: "#00e5ff" + text: "#212121" + - name: a700 + hex: "#00b8d4" + text: "#212121" + +- name: deep orange + levels: + - name: 50 + hex: "#fbe9e7" + text: "#212121" + - name: 100 + hex: "#ffccbc" + text: "#212121" + - name: 200 + hex: "#ffab91" + text: "#212121" + - name: 300 + hex: "#ff8a65" + text: "#212121" + - name: 400 + hex: "#ff7043" + text: "#212121" + - name: 500 + hex: "#ff5722" + text: "#212121" + - name: 600 + hex: "#f4511e" + text: "#ffffff" + - name: 700 + hex: "#e64a19" + text: "#ffffff" + - name: 800 + hex: "#d84315" + text: "#ffffff" + - name: 900 + hex: "#bf360c" + text: "#ffffff" + - name: a100 + hex: "#ff9e80" + text: "#212121" + - name: a200 + hex: "#ff6e40" + text: "#212121" + - name: a400 + hex: "#ff3d00" + text: "#ffffff" + - name: a700 + hex: "#dd2c00" + text: "#ffffff" + +- name: deep purple + levels: + - name: 50 + hex: "#ede7f6" + text: "#212121" + - name: 100 + hex: "#d1c4e9" + text: "#212121" + - name: 200 + hex: "#b39ddb" + text: "#212121" + - name: 300 + hex: "#9575cd" + text: "#ffffff" + - name: 400 + hex: "#7e57c2" + text: "#ffffff" + - name: 500 + hex: "#673ab7" + text: "#ffffff" + - name: 600 + hex: "#5e35b1" + text: "#ffffff" + - name: 700 + hex: "#512da8" + text: "#ffffff" + - name: 800 + hex: "#4527a0" + text: "#ffffff" + - name: 900 + hex: "#311b92" + text: "#ffffff" + - name: a100 + hex: "#b388ff" + text: "#212121" + - name: a200 + hex: "#7c4dff" + text: "#ffffff" + - name: a400 + hex: "#651fff" + text: "#ffffff" + - name: a700 + hex: "#6200ea" + text: "#ffffff" + +- name: green + levels: + - name: 50 + hex: "#e8f5e9" + text: "#212121" + - name: 100 + hex: "#c8e6c9" + text: "#212121" + - name: 200 + hex: "#a5d6a7" + text: "#212121" + - name: 300 + hex: "#81c784" + text: "#212121" + - name: 400 + hex: "#66bb6a" + text: "#212121" + - name: 500 + hex: "#4caf50" + text: "#212121" + - name: 600 + hex: "#43a047" + text: "#ffffff" + - name: 700 + hex: "#388e3c" + text: "#ffffff" + - name: 800 + hex: "#2e7d32" + text: "#ffffff" + - name: 900 + hex: "#1b5e20" + text: "#ffffff" + - name: a100 + hex: "#b9f6ca" + text: "#212121" + - name: a200 + hex: "#69f0ae" + text: "#212121" + - name: a400 + hex: "#00e676" + text: "#212121" + - name: a700 + hex: "#00c853" + text: "#212121" + +- name: grey + levels: + - name: 50 + hex: "#fafafa" + text: "#212121" + - name: 100 + hex: "#f5f5f5" + text: "#212121" + - name: 200 + hex: "#eeeeee" + text: "#212121" + - name: 300 + hex: "#e0e0e0" + text: "#212121" + - name: 400 + hex: "#bdbdbd" + text: "#212121" + - name: 500 + hex: "#9e9e9e" + text: "#212121" + - name: 600 + hex: "#757575" + text: "#ffffff" + - name: 700 + hex: "#616161" + text: "#ffffff" + - name: 800 + hex: "#424242" + text: "#ffffff" + - name: 900 + hex: "#212121" + text: "#ffffff" + +- name: indigo + levels: + - name: 50 + hex: "#e8eaf6" + text: "#212121" + - name: 100 + hex: "#c5cae9" + text: "#212121" + - name: 200 + hex: "#9fa8da" + text: "#212121" + - name: 300 + hex: "#7986cb" + text: "#ffffff" + - name: 400 + hex: "#5c6bc0" + text: "#ffffff" + - name: 500 + hex: "#3f51b5" + text: "#ffffff" + - name: 600 + hex: "#3949ab" + text: "#ffffff" + - name: 700 + hex: "#303f9f" + text: "#ffffff" + - name: 800 + hex: "#283593" + text: "#ffffff" + - name: 900 + hex: "#1a237e" + text: "#ffffff" + - name: a100 + hex: "#8c9eff" + text: "#212121" + - name: a200 + hex: "#536dfe" + text: "#ffffff" + - name: a400 + hex: "#3d5afe" + text: "#ffffff" + - name: a700 + hex: "#304ffe" + text: "#ffffff" + +- name: light blue + levels: + - name: 50 + hex: "#e1f5fe" + text: "#212121" + - name: 100 + hex: "#b3e5fc" + text: "#212121" + - name: 200 + hex: "#81d4fa" + text: "#212121" + - name: 300 + hex: "#4fc3f7" + text: "#212121" + - name: 400 + hex: "#29b6f6" + text: "#212121" + - name: 500 + hex: "#03a9f4" + text: "#212121" + - name: 600 + hex: "#039be5" + text: "#212121" + - name: 700 + hex: "#0288d1" + text: "#ffffff" + - name: 800 + hex: "#0277bd" + text: "#ffffff" + - name: 900 + hex: "#01579b" + text: "#ffffff" + - name: a100 + hex: "#80d8ff" + text: "#212121" + - name: a200 + hex: "#40c4ff" + text: "#212121" + - name: a400 + hex: "#00b0ff" + text: "#212121" + - name: a700 + hex: "#0091ea" + text: "#ffffff" + +- name: light green + levels: + - name: 50 + hex: "#f1f8e9" + text: "#212121" + - name: 100 + hex: "#dcedc8" + text: "#212121" + - name: 200 + hex: "#c5e1a5" + text: "#212121" + - name: 300 + hex: "#aed581" + text: "#212121" + - name: 400 + hex: "#9ccc65" + text: "#212121" + - name: 500 + hex: "#8bc34a" + text: "#212121" + - name: 600 + hex: "#7cb342" + text: "#212121" + - name: 700 + hex: "#689f38" + text: "#212121" + - name: 800 + hex: "#558b2f" + text: "#212121" + - name: 900 + hex: "#33691e" + text: "#ffffff" + - name: a100 + hex: "#ccff90" + text: "#212121" + - name: a200 + hex: "#b2ff59" + text: "#212121" + - name: a400 + hex: "#76ff03" + text: "#212121" + - name: a700 + hex: "#64dd17" + text: "#212121" + +- name: lime + levels: + - name: 50 + hex: "#f9fbe7" + text: "#212121" + - name: 100 + hex: "#f0f4c3" + text: "#212121" + - name: 200 + hex: "#e6ee9c" + text: "#212121" + - name: 300 + hex: "#dce775" + text: "#212121" + - name: 400 + hex: "#d4e157" + text: "#212121" + - name: 500 + hex: "#cddc39" + text: "#212121" + - name: 600 + hex: "#c0ca33" + text: "#212121" + - name: 700 + hex: "#afb42b" + text: "#212121" + - name: 800 + hex: "#9e9d24" + text: "#212121" + - name: 900 + hex: "#827717" + text: "#ffffff" + - name: a100 + hex: "#f4ff81" + text: "#212121" + - name: a200 + hex: "#eeff41" + text: "#212121" + - name: a400 + hex: "#c6ff00" + text: "#212121" + - name: a700 + hex: "#aeea00" + text: "#212121" + +- name: orange + levels: + - name: 50 + hex: "#fff3e0" + text: "#212121" + - name: 100 + hex: "#ffe0b2" + text: "#212121" + - name: 200 + hex: "#ffcc80" + text: "#212121" + - name: 300 + hex: "#ffb74d" + text: "#212121" + - name: 400 + hex: "#ffa726" + text: "#212121" + - name: 500 + hex: "#ff9800" + text: "#212121" + - name: 600 + hex: "#fb8c00" + text: "#212121" + - name: 700 + hex: "#f57c00" + text: "#212121" + - name: 800 + hex: "#ef6c00" + text: "#212121" + - name: 900 + hex: "#e65100" + text: "#ffffff" + - name: a100 + hex: "#ffd180" + text: "#212121" + - name: a200 + hex: "#ffab40" + text: "#212121" + - name: a400 + hex: "#ff9100" + text: "#212121" + - name: a700 + hex: "#ff6d00" + text: "#212121" + +- name: pink + levels: + - name: 50 + hex: "#fce4ec" + text: "#212121" + - name: 100 + hex: "#f8bbd0" + text: "#212121" + - name: 200 + hex: "#f48fb1" + text: "#212121" + - name: 300 + hex: "#f06292" + text: "#212121" + - name: 400 + hex: "#ec407a" + text: "#ffffff" + - name: 500 + hex: "#e91e63" + text: "#ffffff" + - name: 600 + hex: "#d81b60" + text: "#ffffff" + - name: 700 + hex: "#c2185b" + text: "#ffffff" + - name: 800 + hex: "#ad1457" + text: "#ffffff" + - name: 900 + hex: "#880e4f" + text: "#ffffff" + - name: a100 + hex: "#ff80ab" + text: "#212121" + - name: a200 + hex: "#ff4081" + text: "#ffffff" + - name: a400 + hex: "#f50057" + text: "#ffffff" + - name: a700 + hex: "#c51162" + text: "#ffffff" + +- name: purple + levels: + - name: 50 + hex: "#f3e5f5" + text: "#212121" + - name: 100 + hex: "#e1bee7" + text: "#212121" + - name: 200 + hex: "#ce93d8" + text: "#212121" + - name: 300 + hex: "#ba68c8" + text: "#ffffff" + - name: 400 + hex: "#ab47bc" + text: "#ffffff" + - name: 500 + hex: "#9c27b0" + text: "#ffffff" + - name: 600 + hex: "#8e24aa" + text: "#ffffff" + - name: 700 + hex: "#7b1fa2" + text: "#ffffff" + - name: 800 + hex: "#6a1b9a" + text: "#ffffff" + - name: 900 + hex: "#4a148c" + text: "#ffffff" + - name: a100 + hex: "#ea80fc" + text: "#212121" + - name: a200 + hex: "#e040fb" + text: "#ffffff" + - name: a400 + hex: "#d500f9" + text: "#ffffff" + - name: a700 + hex: "#aa00ff" + text: "#ffffff" + +- name: red + levels: + - name: 50 + hex: "#ffebee" + text: "#212121" + - name: 100 + hex: "#ffcdd2" + text: "#212121" + - name: 200 + hex: "#ef9a9a" + text: "#212121" + - name: 300 + hex: "#e57373" + text: "#212121" + - name: 400 + hex: "#ef5350" + text: "#ffffff" + - name: 500 + hex: "#f44336" + text: "#ffffff" + - name: 600 + hex: "#e53935" + text: "#ffffff" + - name: 700 + hex: "#d32f2f" + text: "#ffffff" + - name: 800 + hex: "#c62828" + text: "#ffffff" + - name: 900 + hex: "#b71c1c" + text: "#ffffff" + - name: a100 + hex: "#ff8a80" + text: "#212121" + - name: a200 + hex: "#ff5252" + text: "#ffffff" + - name: a400 + hex: "#ff1744" + text: "#ffffff" + - name: a700 + hex: "#d50000" + text: "#ffffff" + +- name: teal + levels: + - name: 50 + hex: "#e0f2f1" + text: "#212121" + - name: 100 + hex: "#b2dfdb" + text: "#212121" + - name: 200 + hex: "#80cbc4" + text: "#212121" + - name: 300 + hex: "#4db6ac" + text: "#212121" + - name: 400 + hex: "#26a69a" + text: "#212121" + - name: 500 + hex: "#009688" + text: "#ffffff" + - name: 600 + hex: "#00897b" + text: "#ffffff" + - name: 700 + hex: "#00796b" + text: "#ffffff" + - name: 800 + hex: "#00695c" + text: "#ffffff" + - name: 900 + hex: "#004d40" + text: "#ffffff" + - name: a100 + hex: "#a7ffeb" + text: "#212121" + - name: a200 + hex: "#64ffda" + text: "#212121" + - name: a400 + hex: "#1de9b6" + text: "#212121" + - name: a700 + hex: "#00bfa5" + text: "#212121" + +- name: yellow + levels: + - name: 50 + hex: "#fffde7" + text: "#212121" + - name: 100 + hex: "#fff9c4" + text: "#212121" + - name: 200 + hex: "#fff59d" + text: "#212121" + - name: 300 + hex: "#fff176" + text: "#212121" + - name: 400 + hex: "#ffee58" + text: "#212121" + - name: 500 + hex: "#ffeb3b" + text: "#212121" + - name: 600 + hex: "#fdd835" + text: "#212121" + - name: 700 + hex: "#fbc02d" + text: "#212121" + - name: 800 + hex: "#f9a825" + text: "#212121" + - name: 900 + hex: "#f57f17" + text: "#212121" + - name: a100 + hex: "#ffff8d" + text: "#212121" + - name: a200 + hex: "#ffff00" + text: "#212121" + - name: a400 + hex: "#ffea00" + text: "#212121" + - name: a700 + hex: "#ffd600" + text: "#212121" diff --git a/_data/nav.yml b/_data/nav.yml index e1e5bb573..d4cfc71b5 100644 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -1,6 +1,8 @@ - title: Getting started pages: - title: Introduction + - title: Theming + - title: Tooling - title: Components pages: @@ -67,7 +69,9 @@ - title: Data tables - title: Dialogs - title: Expansion panels + - title: Icons - title: Menu + - title: Navigation drawer - title: Pickers - title: Progress - title: Selection controls @@ -76,4 +80,4 @@ - title: Text fields - title: Toolbars - title: Tooltips - - title: Waves + - title: Typography diff --git a/_data/theme-colors.yml b/_data/theme-colors.yml index d0fdbca3f..afb130b38 100644 --- a/_data/theme-colors.yml +++ b/_data/theme-colors.yml @@ -1,16 +1,80 @@ - name: primary - hex: "#673ab7" + hex: "#9c27b0" + text: "#ffffff" + levels: + - name: dark + hex: "#7b1fa2" + text: "#ffffff" + - name: light + hex: "#e1bee7" + text: "#212121" - name: secondary hex: "#ff4081" -- name: success - hex: "#4caf50" + text: "#ffffff" + levels: + - name: dark + hex: "#f50057" + text: "#ffffff" + - name: light + hex: "#ff80ab" + text: "#212121" - name: danger hex: "#f44336" -- name: warning - hex: "#ff9800" + text: "#ffffff" + levels: + - name: dark + hex: "#d32f2f" + text: "#ffffff" + - name: light + hex: "#ffcdd2" + text: "#212121" - name: info hex: "#2196f3" + text: "#212121" + levels: + - name: dark + hex: "#1976d2" + text: "#ffffff" + - name: light + hex: "#bbdefb" + text: "#212121" +- name: success + hex: "#4caf50" + text: "#212121" + levels: + - name: dark + hex: "#388e3c" + text: "#ffffff" + - name: light + hex: "#c8e6c9" + text: "#212121" +- name: warning + hex: "#ff9800" + text: "#212121" + levels: + - name: dark + hex: "#f57c00" + text: "#212121" + - name: light + hex: "#ffe0b2" + text: "#212121" +- name: dark + hex: "#424242" + text: "#ffffff" + levels: + - name: dark + hex: "#212121" + text: "#ffffff" + - name: light + hex: "#757575" + text: "#ffffff" - name: light hex: "#f5f5f5" -- name: dark - hex: "#212121" + text: "#212121" + levels: + - name: dark + hex: "#e0e0e0" + text: "#212121" + - name: light + hex: "#fafafa" + text: "#212121" diff --git a/_includes/callout-info-mediaqueries-breakpoints.md b/_includes/callout-info-mediaqueries-breakpoints.md new file mode 100644 index 000000000..ddf2b3745 --- /dev/null +++ b/_includes/callout-info-mediaqueries-breakpoints.md @@ -0,0 +1,3 @@ +{% callout info %} +Note that since browsers do not currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons. +{% endcallout %} \ No newline at end of file diff --git a/_includes/footer.html b/_includes/footer.html index 9feb64f62..6b1286855 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,12 +1,11 @@ - - + - - + + diff --git a/_includes/header.html b/_includes/header.html index d6e4a3f73..ca593e514 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -11,8 +11,8 @@ - - + + diff --git a/_includes/nav-navdrawer.html b/_includes/nav-navdrawer.html index bb9b9e1e7..ba13959c3 100644 --- a/_includes/nav-navdrawer.html +++ b/_includes/nav-navdrawer.html @@ -1,4 +1,4 @@ -