forked from Daemonite/material
-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
89 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 <http://daemonite.github.io/material/>. 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 `<hr>` 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. |