daemonite / material

Material Design for Bootstrap 4

Material

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

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

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

Feel free to check out our documentation site or let us know what you think at the Daemon Labs forum.

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.

A secondary goal of this project is to add support for some unique Google Material Design components such as floating buttons, 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.

🙏

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Table of contents

• Content
• Documentation
• Quick start

Content

Within the download you will find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

daemonite-material/
├── css/
│   ├── material.css
│   ├── material.css.map
│   ├── material.min.css
│   └── material.min.css.map
└── js/
    ├── material.js
    ├── material.js.map
    ├── material.min.js
    └── material.min.js.map

We provide compiled CSS and JavaScript (material.*), as well as compiled and minified CSS and JavaScript (material.min.*). CSS and JavaScript source maps (material.*.map) are available for use with certain browsers' developer tools.

The Material source code download includes the precompiled CSS and JavaScript, along with documentation and source assets. More specifically, it includes the following and more:

daemonite-material/
├── assets/
│   ├── js/
│   └── scss/
├── css/
│   ├── material.css
│   ├── material.css.map
│   ├── material.min.css
│   └── material.min.css.map
├── docs/
│   └── 4.1/
└── js/
    ├── material.js
    ├── material.js.map
    ├── material.min.js
    └── material.min.js.map

Documentation

Material's documentation, included in this repo in the root directory, is built with Jekyll and publicly hosted on GitHub Pages at http://daemonite.github.io/material/. The docs may also be run locally.

Running documentation locally

1. Run through the tooling setup to install Jekyll and other Ruby dependencies with bundle install.
2. Run npm install to install Node.js dependencies.
3. Run npm run dist and npm run docs to rebuild distributed CSS and JavaScript files, as well as docs assets.
4. From the root /daemonite-material directory, run npm run docs-serve in the command line.
5. Open http://localhost:9999/material in your browser, and voilà.

Quick start

Several quick start options are available:

• Clone the repo: git clone https://github.com/Daemonite/material.git
• Download the latest release
• Install with bower: bower install daemonite-material
• Install with npm: npm install daemonite-material

material's Issues

Ligatures for icons

Hi,

Following this link, the prefered way to use material icons is by ligatures.

Using ligatures will remove a lot of sass variables burden, but will impose everyone to go in legacy code replacing old way by new way.

Comparison with Bootswatch Paper

Since this is built with Bootstrap, it might be worth mentioning in README the extra features it offers vs. Bootswatch Paper (see #16).

Implement required field validation

Hello,
First of all, it's a great material design implementation!

Maybe I missed something but I don't find a way to make a form field mandatory the same way as in : https://www.polymer-project.org/0.5/components/paper-input/demo.html

Regards,

PL

Doesn't work offline - Locally

Hi,

I'd like to use it locally, without Internet access.
How can I do?

Thanks for your help!

Can't get JavaScript files working in Meteor

I'm having trouble getting this working in Meteor. The CSS files are running well but the JavaScript files keep throwing the error: Uncaught TypeError: Cannot read property 'style' of null base.js?4f6009c08cf32c5ac7ff405986401b33b8512157:83.

Is it something I am doing wrong? Any ideas how I can get around this?

Reorganize files

Hi,

Will you agree to reorganize the files/directories according to this best practice : aesthetic sass

And create tests, assets, dist as root directories. I'll submit a pull request.

Thanks

Elevation & shadows

elevation & shadows describes precisely z-index and shadows.

I will do a pull request, but I need some guidance on how to do that.
Using placeholder ? mixins ?

Firefox flaky toast formatting

This is a pain in the butt. Firefox seems to have a strange way of formatting the toast, as seen in the screenshot below.

Styling for video tag

It will be good to get a better styling for a video tag, I cannot make a video tag fill a card. Hope you can fix that soon.

feat: Provide less stylesheets of the project

Add animated bottom border to input boxes

Polymer Paper implements this.

One method: http://jsfiddle.net/muicss/Lrw1me3e/

Would love to see this at:
http://daemonite.github.io/material/docs/4.0/components/forms/

Header issue in Chrome with multi-selects

Hi there

When you have a multi-select box with one or more options selected, the .header-logo drops down and obscures the LHS menu. This seems to only affect Chrome, I could not reproduce the problem in Safari or Firefox.

Even weirder, if you inspect the .header-logo, click "float: left" off and on again, it pops up to the correct place.

The offending form control:

<div class="form-group">
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-4">
            <label class="form-label" for="input-select">Select</label>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-8">
            <select class="form-control" id="input-select" multiple="multiple">
                <option selected="selected">1</option>
                <option selected="selected">2</option>
                <option>3</option>
            </select>
        </div>
    </div>
</div>

As a work-around, I'm just doing this (not ideal):

<header class="header">
    <div class="clearfix pull-left" style="min-width: 300px">

Comparison with alternative Material projects; eg. MaterializeCSS

From the commit history, I see this library was started in Feb 2015. At that time, MaterializeCSS was already around, so there must've been good reasons to not contribute there instead, or fork that project.

Would be nice to mention prior art in the README.

Call the toast programmatically

I can only find info for toggling it with a button.

Need more animations

The project is great so far (highfive).
All it needs now is some animations.

Many issues with the JavaScript files in Meteor

I really like this project and I would have a little fun with it in Meteor and Cordova. I tried checking out the templates from a PHP server and everything works fine. However, when I put them in a Meteor they don't seem to look and behave as they should. Is there something I am not doing right? Is it Meteor or there are known issues with meter.

Here's my app structure:

├── application_layout_minimal.html
├── client
│   ├── css
│   │   └── base.min.css
│   ├── lib
│   │   └── material
│   │       ├── base.js
│   │       ├── html5shiv.js
│   │       └── respond.js
│   └── templates
│       ├── application
│       │   └── application_layout_minimal.html
│       ├── authentication
│       └── home
├── index.html
├── lib
│   ├── collections
│   └── router.js
├── page-404.html
├── page-affix-full.html
├── page-affix.html
├── public
│   ├── css
│   │   └── fonts
│   │       ├── FontAwesome.otf
│   │       ├── fontawesome-webfont.eot
│   │       ├── fontawesome-webfont.svg
│   │       ├── fontawesome-webfont.ttf
│   │       ├── fontawesome-webfont.woff
│   │       ├── fontawesome-webfont.woff2
│   │       ├── MaterialDesignIcon.eot
│   │       ├── MaterialDesignIcon.svg
│   │       ├── MaterialDesignIcon.ttf
│   │       └── MaterialDesignIcon.woff
│   └── images
│       ├── samples
│       │   ├── landscape.jpg
│       │   └── portrait.jpg
│       ├── screenshots
│       │   ├── material01.png
│       │   ├── material02.png
│       │   └── material03.png
│       └── users
│           └── avatar-001.jpg
└── server

Bad pratice of javascript:void(0) in templates ?

Hi, was wondering something.

Context

I was looking to play with you repo' and as I was reading a topic on good practices on javascript I noticed that in your page there is a lot of " javascript:void(0) " in href attributes.

The fact

" There is no need to use knowing that the javascript code does not belong in an href attribute of a tag . In the href attribute of a link must appear a valid URI that points actually on a resource, in this case javascript: is treated as a protocol! Protocol that does not exist; the link is then invalid and useless. At the time of web accessible, it's task. Replace the URI with an empty anchor, the famous action is as bad.
To add an event to a link - for example on a confirmation link or delete the management with "AJAX" loading a link - so, use Event onclick. To confirm deletion, can be used, for example:

<a href="/delete/id" onclick="return confirm('Delete this object ?');">delete object</a>.

" -- end of citation.

cf: OpenClassRoom

Question

Why keep this behaviour ? Is there a meaning behind this I didn't find ?

Missing icons

Hi, beatiful work! It's a wonderful themplate! Just one thing that is not perfect, the icons doesn't appear...do you have any solution for that? thanks

Bower

any plans to make a bower package?

Datepicker inside modal

When a datepicker is used inside a modal dialog, a graphical error occurs with the datepicker's black background:

I tried using a very crude hack which seemed to make it look okay on desktop:

.modal .picker__holder {
    margin-top: 49px;
    margin-bottom: 49px;
    overflow-y: hidden;
    margin-left: 17px;
    width: calc(100% - 34px);
}

But it doesn't really work when it comes to mobile:

As you can see, it cuts off the controls at the bottom of the datepicker.

Would it be possible to maybe move the datepicker holder so that it is part of the body instead of the parent div or something similar?

Webfonts - Icons - not working properly

Using Opera on Android, icons like hamburger menu, plus, etc.. are not showing (neither the code name). - on IE (windows phone) there is visible only code name "plus" or "menu".

[question] Material design icons

Hi,

Awesome work.

I want to use the material design icons as a separate dependency. What is the source of _material-design-icons.scss ?

Thanks

DOC ui-tile.html: Tiles with Actions: text-overflow doesn't work for long texts on small screens

Hi,

It's a correction/adaptation of the documentation or your CSS file.
The text-overflow doesn't work for long texts on small screens in tiles with actions.

File: ui-tile.html
Section: Tiles with Actions

Code:

<div class="tile-inner">
    <span class="text-overflow">consectetur adipiscing elit, consectetur adipiscing elit, consectetur adipiscing elit</span>
</div>

Screenshot:

When the code works correctly:

<div class="tile-inner text-overflow">
    <span class="">consectetur adipiscing elit, consectetur adipiscing elit, consectetur adipiscing elit</span>
</div>

Kind Regards

error to install from bower

I tried to install it by Bower with cmd: bower install --save git://github.com/Daemonite/material
at finished, I found its version is 1.0.0 (like).
and then tried to cmd bower install --save git://github.com/#1.2.0, told not this version.

still problems

Template is a fantastic !!! But I continue to have problems with the file base.min.css.
How can I fix?

Get state of checkbox switch

How does one get the value of the switch whether on or off with JavaScript. Using $('input[name="input-switch"]').val() with jQuery always returns "on" even when the switch is off

Browser compatibility questions

What is the browser compatibility like? How would it fall back to <IE9?

Icons

Cannot be loaded font awesome or ¿how should we must load it?

Today error to preview the live template

I cant see the live template today

Edit: this was solved by erasing the historial, also i cant edit and put this template in live mode by using Adobe Brackets.io web editor.

What's the difference between this one and Google Material

Google has a similar UI project for Angular (https://github.com/angular/material) on GitHub. What's the difference between this one and Google's Material?

mistakenly added

Cannot read property 'left' of undefined

I have a problem in base.min.js on tabSwitch=function(a,b){var c=a.closest(".tab-nav"),d=$(".tab-nav-indicator",c),e=c.offset().left, function

SASS style using scss-linter and css-comb

Are you ok to force a css style on material using scss-linter and css-comb ?

How do I add tabs in the header?

There are several material design mobile apps which have tab in the header area like whats-app, google reader etc. But here in this framework, I can't add tabs into the header area satisfactorily. (I am not a css wiz though). Can you please show me how to achieve that?

Suggestion for improvement: add badge with number on icons

Hi,

I think your project is the best association of HTML5, Bootstrap & Material Design .
I suggest to improve the UI: add a badge with a number (like the number of unread messages on an envelope icon).

It's just a suggestion. It must be adapted with your CSS structure, design and the CSS guideline rules.

Sample:

• HTML:

<span class="icon">mail</span>
<span class="icon icon-lg">mail</span>
<span class="icon icon-2x">mail</span>

Sample, included badge:

• HTML:

<span class="icon icon-badge" data-badge="1">mail</span>
<span class="icon icon-lg icon-badge" data-badge="1">mail</span>
<span class="icon icon-2x icon-badge" data-badge="1">mail</span>

• CSS:

<style>
.icon.icon-badge[data-badge]::after {
    content: attr(data-badge);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
    top: -21px;
    right: -7px;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-weight: 600;
    font-size: 9px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #F44336none repeat scroll 0% 0%;
    color: #FFF;
}

.icon-lg.icon-badge[data-badge]::after {
    content: attr(data-badge);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
    top: -27px;
    right: -11px;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-weight: 600;
    font-size: 10px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #F44336 none repeat scroll 0% 0%;
    color: #FFF;
}

    .icon-2x.icon-badge[data-badge]::after {
    content: attr(data-badge);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
    top: -35px;
    right: -15px;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-weight: 600;
    font-size: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #F44336 none repeat scroll 0% 0%;
    color: #FFF;
}

</style>

Thank you for your time and attention.
See you soon for the next commit.

Angualr JS Support

Would you be interested to create an angularized version of this template? There is already an angular version for the bootstrap.js https://angular-ui.github.io/bootstrap/

There is an ongoing project for angular material design :
https://github.com/angular/material
However this is based on FlexBox instead of Bootstrap.

jquery's link not found

The link: ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js doesn't work.
You have to download the jquery 1.11.3 (from: https://jquery.com/download) and replace this line:
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
with this one:
src="js/jquery-1.11.3.js"
in every html.

Pull request?

Hi there

I sent a pull request 21 days ago, but you haven't responded. I don't mind if you reject it, or request that I change it, but would appreciate a response. If you don't want pull requests, maybe mention it in your readme.

Roboto font is missing in css/fonts

Its really nice you remove the font downloading from google, but now the roboto font is missing in css/font.

Pagination?

Is there any way to create pagination with Material? Some like

How can i use the fbtn-inner as a toggle to control the menu open and close?

It will be appreciated if you can offer a detail code.
I am totally new to Javascript.

thanks for your help.
have a nice day.
:)

$mdDialog and $mdBottomSheet - promises do not resolve when testing

When unit testing my code, I ran across this issue. $mdDialog and $mdBottomSheet - promises do not resolve when testing by call hide() or cancel(). I included my test here. Both services use $q so I tested that and it is fine - release: version 0.10.1-master-514927a.

'use strict';

describe('$mdDialog.show()', function () {

    beforeEach(module('ngMaterial'));

    // region var
    var promise;

    var resolve = function (e) {
        console.log('resolve', e);
    };

    var reject = function (e) {
        console.log('reject', e);
    };

    var notify = function (e) {
        console.log('notify', e);
    };

    var catchs = function (e) {
        console.log('catch', e);
    };

    var finallys = function () {
        console.log('finally');
    };

    // endregion

    it('$mdDialog', inject(function ($mdDialog, $rootScope) {

        console.log('begin $mdDialog');

        promise = $mdDialog.show({template: "<md-dialog></md-dialog>"});

        promise.then(resolve, reject, notify).catch(catchs).finally(finallys);

        $mdDialog.cancel();

        $rootScope.$apply();

        console.log('end $mdDialog');
    }));

    it('$mdBottomSheet', inject(function ($mdBottomSheet, $rootScope) {

        console.log('begin $mdBottomSheet');

        promise = $mdBottomSheet.show({template: "<md-bottom-sheet></md-bottom-sheet>"});

        promise.then(resolve, reject, notify).catch(catchs).finally(finallys);

        $mdBottomSheet.cancel();

        $rootScope.$apply();

        console.log('end $mdBottomSheet');
    }));

    it('$q', inject(function ($q, $rootScope) {

        console.log('begin $q');

        var defer = $q.defer();

        promise = defer.promise;

        promise.then(resolve, reject, notify).catch(catchs).finally(finallys);

        defer.resolve(0);

        $rootScope.$apply();

        console.log('end $q');
    }));
});
}

Output is

begin $mdDialog
end $mdDialog
begin $mdBottomSheet
end $mdBottomSheet
begin $q
resolve, 0
finally
end $q

Problem with RHC fixed nav on mobile Safari

When scrolling to the bottom, the RHC starts flickering on mobile Safari. It's as if it's possible to scroll down further than what is "normally" possible. Several swipes up - while the RHC is flickering - are needed until the middle column text shows up again, then it's back to normal. Tested it also on mobile Chrome, there everythings ok.

Create releases

Hi,

In order to help people get stable releases of material. Could you please create release. Like leaflet

It's not time consuming but can help a lot.

Thanks

Checkbox and radio button on firefox

Checkbox and radio button on firefox is not accepting css in both mine as well as in your demo .

Replace bootstrap

Hi,

Will you agree pull request replacing parts of the bootstrap js with "custom" code ?
In es6, transpilated by babel ?

Thanks

Stop supporting IE 8 and 9

Those versions of IE are not used enough for the amount of work needed to support them

Set the website of this GitHub repo to the demo

http://daemonite.github.io/material/

Example:

base.min.css

I have a problem with this file base.min.css. It seems that is not formatted correctly.

Swipe support

Needs ability to swipe side menus in and out of view