TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Material Design for Bootstrap

194 pointsby FezVrastaover 10 years ago

36 comments

dangover 10 years ago
<a href="https://hn.algolia.com/?q=material+design+bootstrap#!/story/forever/0/material%20design%20bootstrap" rel="nofollow">https:&#x2F;&#x2F;hn.algolia.com&#x2F;?q=material+design+bootstrap#!&#x2F;story&#x2F;...</a>
cpursleyover 10 years ago
God forbid I ever spend time making something and put it on hacker news. Dismissing an idea doesn&#x27;t take any work. Good job, fezvrasta.
评论 #8729201 未加载
评论 #8730213 未加载
kfinleyover 10 years ago
FezVrasta - Nice work!<p>I&#x27;m curious about your choice of license[0]. I&#x27;ve been considering the use of a non-commercial license for a project I&#x27;m working on. Would you mind discussing:<p>1. Your motivation for the choice. Is it to prevent people from reselling the theme?<p>2. The impact, if any, that the choice has had on adoption. With the popularity of the project, it doesn’t seem to be an issue. In your experience are users not using your project to built commercial application? Or are they violation the terms (un)intentionally?<p>3. Your longterm objectives for the project. Do you plan on making this into a business by selling commercial licenses? Do you plan on having a standard commercial license fee, or do you believe it works better to negotiate each license independently?<p>Thanks!<p>0: <a href="https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;FezVrasta&#x2F;bootstrap-material-design&#x2F;blob&#x2F;...</a><p>Edit: grammar, added license
评论 #8730543 未加载
评论 #8731005 未加载
thewarriorover 10 years ago
OP don&#x27;t listen to all the haters in this thread.<p>This is absolutely gorgeous and fluid smooth , atleast on Desktop. I can see this becoming very popular in the months ahead.<p>And why all the hate for the animations ? They are well thought out and provide context .<p>Design is continuously evolving and Material Design will also evolve to overcome some of its shortcomings such as a lack of information density and a rather flat look.
评论 #8729952 未加载
debaserab2over 10 years ago
This is basically unusable on an iPhone 5S - text&#x2F;elements bleeding off the panel, unclear scroll areas (easy to swipe the background scroll area). I thought the big use case of MD was to deliver a more intuitive interface especially on mobile. This misses the mark by a wide margin.
评论 #8729313 未加载
评论 #8729120 未加载
评论 #8729138 未加载
评论 #8729101 未加载
espadrineover 10 years ago
The ripple effect when clicking buttons is a 20x20px div with 100% border-radius and a CSS scale transform animation, created when clicked, where clicked.
评论 #8728971 未加载
amdtover 10 years ago
This project raised a question for me: what is the copyright or licensing situation with Google’s Material Design? The specification itself appears to be copyright Google, but several implementations of the specification on the Web are under permissive licenses:<p>Google’s Web Starter Kit (<a href="https://developers.google.com/web/starter-kit/" rel="nofollow">https:&#x2F;&#x2F;developers.google.com&#x2F;web&#x2F;starter-kit&#x2F;</a>) uses the Apache License 2.0<p>Polymer is implementing Material Design for its Paper Elements collection (<a href="https://www.polymer-project.org/docs/elements/paper-elements.html#paper-button" rel="nofollow">https:&#x2F;&#x2F;www.polymer-project.org&#x2F;docs&#x2F;elements&#x2F;paper-elements...</a>) under a BSD license.<p>Angular is implementing it (<a href="https://material.angularjs.org/" rel="nofollow">https:&#x2F;&#x2F;material.angularjs.org&#x2F;</a>) under the MIT license.<p>Is Material Design for Google and Android apps only? Can anyone implement it on the Web?
评论 #8729254 未加载
Kudosover 10 years ago
What&#x27;s with the non-commercial licence?
评论 #8729115 未加载
评论 #8730327 未加载
TuringTestover 10 years ago
The floating labels in input text fields are a nice finding.<p>The click animation for most elements is too strong, though, at least on the desktop. I haven&#x27;t tried on touchscreens, they may be good enough feedback for direct finger touch, but they are distracting when using the mouse for clicks.<p>Is the exact highlight animation mandated by Material guidelines, or can it be tweaked? I believe a fast, simultaneous &quot;fade&quot; effect that made the animated circle&#x2F;rectangle lighter while its moving would be enough to make it subtler and less aggressive.
评论 #8728942 未加载
Guillaume86over 10 years ago
I find it strange there&#x27;s so many different material design implementations (for the web, no idea how it&#x27;s going on in android), shoudn&#x27;t at least the CSS be centralized to avoid uneccesary efforts and then provide specialized packages for things like bootstrap, jQuery UI themes, angular, react etc that all use the same base CSS?<p>I know it&#x27;s probably utopic but it looks like there&#x27;s a lot of &quot;wasted&quot; energy in these kind of projetcs.
评论 #8731045 未加载
评论 #8729323 未加载
mkohlmyrover 10 years ago
How about don&#x27;t slow down navigation to play an animation. Function over form. Every time. Never artificially slow your user down for the sake of &quot;pretty&quot;. Pretty is subjective, snappy is objective and appreciated by everyone.<p>The navigation feels like when I was 12 and wrote my first c++ program adding &quot;cool loading animations&quot; for no reason.
评论 #8729366 未加载
tracker1over 10 years ago
Other than menus (which don&#x27;t follow material design guidelines), and modals... I don&#x27;t think the designer really understands how material design is supposed to work.<p>I&#x27;d been thinking that it would be nice to see a material design theme go into bootstrap.. I like that VezVrasta has integrated the color pallet but not sure how well integrated it is.<p>I would say that the Jumbotron, wells, etc shouldn&#x27;t be raised materially, and that the shadow effect should probably simple be a sub-class used by the JS based overlays, which should then follow the material design guidelines.<p>Nice effort, but I think it&#x27;s not quite right.
andybakover 10 years ago
Really lovely for the most part.<p>The input boxes rather lack affordance&#x2F;discoverability or whatever you want to call it. Basically - they don&#x27;t look inputty enough.
评论 #8731070 未加载
jonificoover 10 years ago
I personally enjoy the animations, I just hate how damn slow they are! This needs to be much faster in response to user input.
normlomanover 10 years ago
I get that animations can help users sometimes. But these animations are waaaaayyyyy too long.<p>Everyone stop with this material design bullshit. Just because Google released a new design language with a fancy name doesn&#x27;t mean you have to mindlessly copy the most shallow parts of it. The fundamentals of UI design didn&#x27;t change. Carry on.
评论 #8729232 未加载
评论 #8729191 未加载
bithushover 10 years ago
I really like the look of Material but not all the animations.
izolateover 10 years ago
I hope this doesn&#x27;t take off. If bootstrap wasn&#x27;t annoying enough, we&#x27;ll soon have this abomination on every MVP site.<p>Animation for animation&#x27;s sake. Design for design&#x27;s sake. This is just tacky.
评论 #8729044 未加载
评论 #8729597 未加载
评论 #8729069 未加载
评论 #8728915 未加载
评论 #8730105 未加载
DZittersteynover 10 years ago
Looks really nice, one nitpick: You use the placeholder-as-label anti-pattern (src: <a href="http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute" rel="nofollow">http:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;html5&#x2F;forms.html#the-placeholder-attrib...</a>) in the search field of the navbar. That almost put me off before I&#x27;d even seen the nice floating label pattern under the fold.
评论 #8729021 未加载
评论 #8728920 未加载
gumballheadover 10 years ago
I love material design, and this is more related to material design than this theme, because this is a beautiful and faithful implementation for web, but that button ripple is obnoxious.<p>It also makes the ui seem very sluggish, because the traditional pressed state of a button is instant feedback, and this is an animation that takes a couple hundred ms or so to complete.
sumdeosover 10 years ago
Seems like there is a bug in the number validation example. When non-numeric data is entered, the floating label moves back into the input field making it very difficult to read. This is on Chrome.<p>Other than that, this looks pretty cool; I particularly like the floating label animations. I may have to give it a try in my next project!
评论 #8731066 未加载
warfangleover 10 years ago
Fantastic for the most part. Minified JS is less than 6k.<p>The CSS is huge though - over 250k. This is expensive for mobile devices :(
评论 #8729645 未加载
bmm6oover 10 years ago
It looks pretty cool. There&#x27;s one thing about the demo site that I found really confusing though - those white rectangles look like they should be modal dialogs but they aren&#x27;t. I kept trying to dismiss the donation popup before I realized navigation wasn&#x27;t disabled.
tn13over 10 years ago
I am writing this comment only because of the so many negative comments on the thread.<p>Kudos to FezVrasta for building thing. Clearly it is not perfect but I am sure he will work on ironing out the issues. Also if the license is MIT I would use it in my projects too.
danbucholtzover 10 years ago
This is really nice. Great work! Ignore the haters - you&#x27;re on the right track with this. Most of the people giving you guff are not the type that create things - they&#x27;re the ones who pretend to create things.
awjrover 10 years ago
Definitely one to watch. There is a lot to like here. I&#x27;m not saying it&#x27;s for everyone but I see this as something you would use with Ionic to deliver a very good Android 5 look and feel solution.
srs0001over 10 years ago
You know, I really want to like it, but I just don&#x27;t.<p>I think Material works very well on touch surfaces. There are a ton of good design principles that it champions, but the interactions are strange on desktop.
Machaover 10 years ago
Performance on the animations is very poor on my nexus 7.
评论 #8728904 未加载
csmattryderover 10 years ago
I noticed the simple modal, unlike Bootstrap&#x27;s, doesn&#x27;t seem to close when you click anywhere on the page.<p>Is this by design, or is it on my end?
评论 #8731129 未加载
FezVrastaover 10 years ago
The transition between pages is now 100% faster. Hope it looks better. The ripple effect is now subtler.
Synrocover 10 years ago
This looks great! I&#x27;ll definitely keep this in mind for future development.
Raphmediaover 10 years ago
This won&#x27;t do until you can use keyboard navigation. Think accessibility.
评论 #8731139 未加载
trumbitta2over 10 years ago
Nicely done.<p>Shouldn&#x27;t the wells – being &quot;wells&quot; – be inset instead of outset?
评论 #8729406 未加载
Zolomonover 10 years ago
Back-button is broken, nothing changes upon going back.
评论 #8728956 未加载
mkawiaover 10 years ago
transitions , what I like most about material design is transitioning between elements ,Morphing and filling .<p>But this remains best implementation
评论 #8728930 未加载
jdawg77over 10 years ago
If you like to be abel to use material in bootstrap (or more) make sure you check out semantic UI. Open source as well, let&#x27;s you toggle between...everything really :)<p>This looks pretty awesome as well, thanks for sharing.
PaulHouleover 10 years ago
Ugh, have any of you actually used android l? Google runs video ads for the nexus 5 and 9 with the devicea turned off because they look atrocious when turned on.