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
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
- Run through the tooling setup to install Jekyll and other Ruby dependencies with
bundle install
. - Run
npm install
to install Node.js dependencies. - Run
npm run dist
andnpm run docs
to rebuild distributed CSS and JavaScript files, as well as docs assets. - From the root
/daemonite-material
directory, runnpm run docs-serve
in the command line. - 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
How to use CSS variables
you wrote in the doc that css variables can be used change the colors. But in the compiled css under
daemonite-material\css\
I cannot see any color attribute is usingvar(--abc)
. Can you elaborate how to use these css variables described in the doc.many thanks iocast
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.
Bootstrap 4v2, pointer cursor and Paypal donation
Hi guys,
you are awesome, thank you for your work !!! I'd like to send you some money to get you a beer ! Do you have a Paypal account for donation ?
Do you plan a build with bootstrap 4 beta 2 ?
What do you think of using pointer: cursor on btn and checkbox elements ?
What do you think of MDBootstrap z-index classes ? It's a cool feature.
Thanks for all. Hope I'll have some time to bring you some work soon.
Floating label text field not rendered correctly when rendered with a value
Hi,
As described on http://daemonite.github.io/material/docs/4.1/material/text-fields/#floating-label-text-fields I can move a label above the text field.
However, this doesn't seem to work when a prefilled input field is rendered. I know can work around this by adding the 'has-value' class to container tag, but I'm not sure if this is by design or a bug.
So this doesn't move the label correctly when the input does not have the focus:
But this does:
Material Checkboxes & Radio Buttons don't work with Chrome for iOS
Material Checkboxes & Radio Buttons don't work with Chrome for iOS, you can test on your demo http://daemonite.github.io/material/ui-form-adv.html
Carousel not auto sliding
Upon grabbing the code example from https://daemonite.github.io/material/docs/4.0/components/carousel/ the auto sliding that was shown no longer shows up in my app. My code is below. Our framework is Angular/material-io.
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.
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
djibe fork
Hi @djibe
Sorry I had to open ticket here. You don't have or maybe you have disabled issues on your fork.
Unfortunately creators of this fork as it currently stands seems to have abandon the project. So it's pretty unclear what the users are going to do next.
Modal is not a function
When I am trying to open the modal with the following code, I get the error modal is not a function, I am sure I brought the library and I can trigger modal with a button .
$("#testModeal").modal({ show: true });
Change color to tabs line
Hello,
I'm new in the bootstrap and I have and question to personalize this library.
I'm using the Tabs component an now I want to change the color the line under the tab selected also I want to change the text color selected with the different to the color tab unselected
This is my project screen
This is a question and not an issue, Exist a simple mode inside the library to resolve my problem?
Bump json5 from 2.1.1 to 2.2.3
Bumps json5 from 2.1.1 to 2.2.3.
Release notes
Sourced from json5's releases.
Changelog
Sourced from json5's changelog.
Commits
c3a7524
2.2.394fd06d
docs: update CHANGELOG for v2.2.33b8cebf
docs(security): use GitHub security advisoriesf0fd9e1
docs: publish a security policy6a91a05
docs(template): bug -> bug report14f8cb1
2.2.210cc7ca
docs: update CHANGELOG for v2.2.27774c10
fix: add proto to objects and arraysedde30a
Readme: slight tweak to intro97286f8
Improve example in readmeDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump qs from 6.5.2 to 6.5.3
Bumps qs from 6.5.2 to 6.5.3.
Changelog
Sourced from qs's changelog.
Commits
298bfa5
v6.5.3ed0f5dc
[Fix]parse
: ignore__proto__
keys (#428)691e739
[Robustness]stringify
: avoid relying on a globalundefined
(#427)1072d57
[readme] remove travis badge; add github actions/codecov badges; update URLs12ac1c4
[meta] fix README.md (#399)0338716
[actions] backport actions from main5639c20
Clean up license text so itβs properly detected as BSD-3-Clause51b8a0b
add FUNDING.yml45f6759
[Fix] fix for an impossible situation: when the formatter is called with a no...f814a7f
[Dev Deps] backport from mainDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes
Sourced from decode-uri-component's releases.
Commits
a0eea46
0.2.2980e0bf
Prevent overwriting previously decoded tokens3c8a373
0.2.176abc93
Switch to GitHub workflows746ca5d
Fix issue where decode throws - fixes #6486d7e2
Update license (#1)a650457
Tidelift tasks66e1c28
Meta tweaksDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Changing the default color for controls
Greetings, I tried to change the primary colour for the theme and i can see it on the generated css but all the controls, buttons, tabs, date picker, etc, still show as pink. Thanks, Huambo
Next/Previous buttons not working in web, angular 14.
After updating our project to angular 14 and node 16.15.0, I've noticed that next/previous buttons for the carousel now force reload the page with the carousel variable name in the link (ex: http://localhost:4200/login#carouselExampleControls). Is there a fix or workaround for this?