daemonite-material

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.

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.

Supported Bootstrap 4 Components

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

Additional Supported Bootstrap 4 Elements

• 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.

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-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.