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.
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
Let us know what you think at the Daemon Labs forum.
| Bootstrap 4 Components | Equivalent Material Design Components |
|---|---|
| Alerts | None, but supported with our own interpretation |
| Breadcrumb | None, but supported with our own interpretation |
| Buttons | Buttons |
| Button group | None, but supported with our own interpretation |
| Cards | 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 |
| Tags | Chips |
| Tooltips | Tooltips |
| Utility classes | None, but supported with our own interpretation |
- Bootstrap 4's grid system is supported, but breakpoints have been changed according to Material Design Responsive UI Guidlines.
- Bootstrap 4's responsive utilities are all supported.
- Bootstrap 4's typography classes and HTML tags (also including code, figures and images) are all supported.
| 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-flat and .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 | Tags | Both .chip (Material) and .tag (Bootstrap) work the same. Bootstrap 4's .tag-pill is not supported. |
| Data tables | Tables | Todo: .table-inverse, .table-reflow and .table-sm. |
| Dialogs | Modal | Both .dialog (Material) and .modal (Bootstrap) work the same. |
| Dividers | None | Generally, use <hr> with margin utility classes to create dividers. Some specific components have dividers built in that may (e.g. navigation drawers) or may not (e.g. expansion panel) require .*-divider classes. |
| Expansion panels | List group | Both .expansion-panel (Material) and .list-group (Bootstrap) work the same. Collapsed and expanded panels require .expansion-panel-collapse class. |
| Grid lists | None | Use Bootstrap 4's grid 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 as .menu overlays the dropdown toggler. .dropdown-menu-sm and .menu-cascading are added for a cascading menu variation defined in Material Design Gudielines. |
| 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 | Linear progress bar's buffer variation is currently not supported. |
| Selection controls | Forms | The on/off slide toggle defined in Material Design Guidelines 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-bordered, .nav-tabs-centered, .nav-tabs-fixed, and .nav-tabs-scrollable are added to create certain variations of a tab bar based on Material Design Guidelines. |
| Text fields | Forms | .floating-label is required on top of Bootstrap 4's markup to create a text field with a floating label. .textarea-autosize is required to create a multi-line text field that automatically breaks to a new line for overflow text. |
| Toolbars | Navbar | Both .navbar (Bootstrap) and .toolbar (Material) work the same. .toolbar-clipped is equivalent to .navbar-fixed-top. .toolbar-waterfall requires some custom Javascript to add/remove .waterfall class on scroll since Bootstrap 4 removes the affix plugin. |
| Tooltips | Tooltips | |
| Widgets | None | This component is not really relevant to web development, so we probably will not actively look into adding support in this framework. |