Material

Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4.

Download Material Documentation

Currently v4.0.0-beta
(based on Bootstrap v4.0.0-beta)


codeFork me on GitHub favoriteMade by Daemon

Introduction

The basic idea behind this project is to combine the front-end technology of the popular Bootstrap open_in_new framework with the visual language of Google Material Design open_in_new .

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

Principles

CSS & HTML

If a Bootstrap component has an exact match in Google Material Design, this project will style this Bootstrap component based on the specifications laid out in Google Material Design Guidelines. For example, Bootstrap's button = Google Material Design's button.

If a Bootstrap component lacks an exact match in Google Material Design, the specifications of a closest matching component in Google Material Design Guidelines will be used to style this Bootstrap component. For example, Bootstrap's navbar = Google Material Design's toolbar.

If a Bootstrap component lacks completely a related counterpart in Google Material Design, this project will style this component based on our own iteration of Google Material Design Guidelines. For example, Bootstrap's button group, jumbotron and pagination, etc.

JavaScript

No modification has been made to Bootstrap's JavaScript. It is safe to use Bootstrap's JavaScript as it is.

However, in order to achieve some unique Material look such as floating labels and waves, Material includes a handful of additional JavaScript to help bring some of the components to life.

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

Rewrite all JavaScript plugins in ES6 to take advantage of the newest JavaScript enhancements.