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.
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 is work in progress. Let us know what you think at the Daemon Labs forum.
Goals
Primary
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.
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 |
| Button group | Toggle buttons |
| Card | Cards |
| Carousel | None, but supported with our own interpretation |
| Collapse | None, but supported with our own interpretation |
| Dropdowns | Menus |
| Forms | Text fields |
| Input group | Text fields |
| Jumbotron | None, but supported with our own interpretation |
| List group | Expansion panels |
| Modal | Dialogs |
| Navs | None, but supported with our own interpretation |
| Navbar | Toolbars |
| Pagination | None, but supported with our own interpretation |
| Popovers | None, but supported with our own interpretation |
| Progress | Progress & activity |
| Scrollspy | None, but supported with our own interpretation |
| Tooltips | Tooltips |
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.
- Bootstrap 4's layout components such as
.mediaare 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 | .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 | 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 | None |
| Dialogs | 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 | 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 | Margin, padding, and vertical-alignment utility classes may be required. |
| Lists: Controls | Media object | Margin, padding, and vertical-alignment utility classes may be required. |
| Menus | 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 | Circular and indeterminate linear progress are added on top of default linear progress. |
| Selection controls | 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 | .nav-tabs-scrollable is added for scrollable tab bars. |
| Text fields | Forms | .floating-label, .textarea-autosize and .textfield-box are added. |
| Toolbars | Navbar | .toolbar-waterfall requires some custom JavaScript to add/remove .waterfall class on scroll since Bootstrap 4 removes the affix plugin. |
| Tooltips | Tooltips | None |
| Widgets | None | This component is not relevant to web development, so we will not actively look into this. |