Material Design for Bootstrap 4
CSS JavaScript HTML Ruby

README.md

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

Therefore, the Bootstrap's documentation can serve as a valid documentation for this project as well. Replacing bootstrap.min.css on the site with material.min.css from this project without any other changes will transform all components and elements into a materialised look.

Secondary

A secondary goal of this project is to add support of some unique Material Design components such as floating action buttons, pickers and steppers, to name a few, which cannot be achieved by transforming existing Bootstrap components or elements.

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

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.