Show HN: Material Kit – Free Bootstrap UI Kit Based on Material Design | Hacker News Reader

Show HN: Material Kit – Free Bootstrap UI Kit Based on Material Design

demos.creative-tim.com

180 pointsaxelut69 comments

Honest question from a non-web dev. Are these things actually used for real working websites? Are there any examples other than landing pages and blog posts?

One of the things that keeps me from using a web platform on my projects is that I don't want to have to worry about aesthetics. With good ole Windows, I drop some controls and buttons into a designer and I know it is going to look pretty good and be obviously functional to all users. I don't have time to place individual lines and worry about the alignment of shading and curves. Projects like Bootstrap interest me because they offer a way for me to focus on function rather than looks, however I never seem them in action for something substantial. Say, a financial accounts manager.

Are there projects out there using these templates for such purposes?

Quick side note. Does anyone else notice the startling lack of information density on these pages. Compare it to hacker news. You have to scroll the window to see the introductory text. That's insane.

These tools: bootstrap, material, etc. seem to be exactly what you need. They make sure your style is consistent and looks good without too much work. You can then configure the framework to make it look unique to your application. My impression is these frameworks are used all over the place in production, they are just customized so you might not recognize them. The last three companies I’ve worked at, one used angular material, one used bootstrap, and one had a custom css framework. The later had a tendency to build internal frameworks instead of new product and is suffering the consequences.

Using something like this can save hours and win a client over (shallow souls) on some basic web internal business app.

We're using Bootstrap for our site, Podium: https://podium.live. It was a great way to get started, we had a decent looking app for a while, then once we could hire a designer we were able to modify where needed. It really does make a difference.

Used Bootstrap on our customer-facing portal for years and in a recent rewrite. Additionally, many websites build atop of Bootstrap as the foundation. Almost all of the admin themes on ThemeForest, for example, are built using Bootstrap, and provide rich "app" functionality.

I agree with you, @metalliqaz: I personally have a hard time seeing how these examples can map to more business focused projects with the examples being just landing pages and blog posts.

@axelut maybe you can shed some light on why the examples don't cover a layout you would expect for, say a CRM app? Here's what I'm missing in your examples:

- Lists or Tables which can be filtered / sorted - In-line editing of List (or Table) items - In-line / pop-up / card-based detail drill-down of List (or Table) items - CRUD methods

Thanks.

Here are some big sites that currently, or have previously, use Bootstrap:

walmart.com target.com nba.com spotify.com nasa.gov fifa.com & many more.

Are you referring to developing a windows standalone application in C#?

there is a market for "fast food like" websites. The client has little money, and he wants the site done by tomorrow. He also has no idea what he wants to put on his own website...

One tell-tale sign are the portfolio links from web agencies that link to dead sites. The client paid for the site, the theme, one year of hosting etc. After the year was up he saw no reason to continue.

Looks good.

I've been very happy with http://materializecss.com/. Really simple to use with some very slick touches.

"Free?" what the heck is a Creative Tim license?

That is the license that we give to our users. As an overview, you can use this product for your personal projects, startups or for a client. What you cannot do is to get this product and resell it/post it anywhere as your own created product. This is what we want to protect. That's it. Please let me know if I can help with other information.

Lack of exact licensing terms may make any legal dept (or just copyright-conscious individual) wary. The table at /license doesn't count - there are no definitions and without those some rows are really odd, like "multiple developers" restriction (who counts as a "developer"? does the "personal" license forbid two computer-savvy persons making a website? or, say, what if I code the page myself but then call someone for assistance?)

Legalese sucks hard (and layman-readable licenses are hard to write), but ambiguity is even worse.

Yes, you're right, the legal stuff sucks. We wanted to make it as simple as possible and not have 100 pages terms and conditions. We will try to make that more clear so people can understand that if they get this product for Free can be used by how many devs they have, in how many products they want.

Our business is to create good looking products that speed-up the development for web developers and not to go after people who use our products without a license. Probably there are 1000 people every day who just "View Source" of the page and get the product. We cannot and don't want to focus on those people :D

Please stop wasting potential customer's time by offering a great looking, professional-grade product with a horrible, non-professional license. I'd love to use your templates in my business. The pricing is on the high end of what I'd pay but not so high that I'd walk away. But I have to walk away,I can't allow myself to waste any more time looking at your site because the license is an absolute deal breaker.

Licenses aren't just "ugh, we do software but we have to put up some stuff about licensing." Licenses are essential to any form of commercial software. If I base my front end on your bundle, which I paid for, I'm basing my business on your bundle. If I don't know what I've bought and what I can and can't do with your bundle, I don't know what I can do with my business. That's an absolute deal breaker. There's a reason why licenses look the way they do. This kind of stuff is incredibly hard to specify and the evaluation criteria isn't "I'm a programmer and I think I know what it means" it's "I'm a court of law reviewing how licenses have been interpreted historically for the past thousand years."

Did you pay a lawyer who specializes in software licenses to write that license? If you did, find a different lawyer. If you didn't, take down the license and your offer to let people use software you don't know how to license until you have found an actual lawyer and had them draft an actual license that is as professional as your product.

If you want a plain-vanilla license out of their law firm's files, expect it to cost a few thousand dollars to have your license prepared (mostly for the time it takes them to understand what you want). If you want an unusual or highly customized license, expect it to cost more like five to ten thousand dollars to have it prepared (because they will need to bill you for time spent writing that custom document). Licenses are hard. They are literally the contract between your business and your customers' businesses. They matter.

If you had a real license, I would have bought a pro license this morning. You don't, so all I can do is complain about it on hacker news and hope in some future life I find your site again and find a decent license on it.

Thank you for the detailed explanation. We have over 1 million users who checked our resources, 97.000+ web developers are using them in 150.000+ projects and this is the first time when somebody is not happy with our licensing options. We will see what we can do in this area.

Given the number of questions on this HN page about licensing I think it's a mistake to conclude my comment is the first time someone wasn't happy with your licensing (And people who pay for software tend to be the same people who care about licensing, so the fraction who care about licensing is likely to be a much higher fraction of potential paying customers than simply x/1.000.000)

How about just offering it for sale on envato under their licensing. Yes, you give up a bit of revenue because they take a cut but you don't have to pay a lawyer to draft a license for you, and you can still offer it on your own page under your own non-professionally-drafted license at the same time if you really want to do that too.

At any responsible business with 100+ employees, third party software often passes through legal if it doesn't adhere to a pre-existing license(apache, mit, etc.). I think it wouldn't be correct to assume that there are only a few people concerned with licenses, especially because no license means all rights reserved, and you guys are pretty close to "no license". There are excellent licenses to choose from, and some already seem to fit your needs(as you describe them).

On another note, I personally see a license as one of many signs of product maturity. If there is a well established license in place, then that tells me the product is likely pretty stable and this along with other factors helps me determine if I should make the time investment to try and use that product. I think the issue here isn't whether your current users are having any problems with your license, but rather there are likely potential users who haven't even touched it because of the license. Having an explicit license is very helpful in the long run.

if you need a cutout point for making it paid for enterprise copy the terms here https://www.jetbrains.com/shop/eform/startup

but honestly, tiering by license sucks. an alternative would be to make the core free open source software and, say, widget enterprise only.

Custom licences are icky. I suspect many devs will prefer to go for something inferior than to risk money sink of a lawsuit that will hypothetically arise sometime in the future due to a silly misunderstanding of licensing terms.

Can I use this for my SaaS?

I am not a lawyer.

That's pretty much what copyright does. However, copyright laws vary among countries. Also, like copyright a license is only as meaningful to the extent someone is willing to lawyer up and enforce it.

If I use it for a client, I've passed the client a risk because the license is non-standard. One reason for selecting a standard license is to just avoid the distraction of creating a non-standard one.

Good luck.

Is it possible to upgrade a personal license to developer? IE when bootstrapping a product, getting customer feedback, and then upgrading when you actually start charging people?

Yes, you can do that whenever you want

Personal preference but does anyone else not like material design concepts?

I'm sure somewhere in the wide world of 6+ billion people there are individuals who agree with you :)

me. I think some of the animations are a gimmick and not a fan.

I initially really liked material because it seemed nice and clean but the animations have gotten out of hand, IMO, particularly when used on desktop. Is there a non/less-animated version?

If they do it in CSS, I bet you can remove the animations by setting the animationduration property to 0 seconds.

Or if you want to aggravate users, override it so that each animation takes 10seconds. :)

As with anything, I think material design can be done right or wrong. I don't like completely flat designs, and I don't like actionable objects that aren't immediately apparent as actionable. I do, however, like the overall look, as long as the functionality is done right.

One of my peeves is that it's sometimes hard to create business dashboards with high information density, since a lot of the material frameworks love their padding out of the box.

I dislike it a lot, and I'm otherwise mostly unopinionated about design. I think it has poor usability. It takes me a long time to process the odd placement of things like a "New/Create" button and the animations annoy me and feel distracting.

I think it's mostly ok on Android (except floating buttons), but bad on websites (even Google's own). And that mobile-like dumbification when websites look like my monitor is giant handset and most features and controls are removed as "unneeded for typical handset tapper" (most pages related to account management on Google, new Google photos with especially primitive controls).

I prefer previous design of Android (4.0-4.2) with slightly retrofuturistic aesthetics.

I would like to use it for one of the saas application. I am not sure by when it will start generating revenue.

Can I use personal licence till the the time my app is not earning any revenue ?

Looks amazing - great work!

This might be something I can use for a new SaaS I'm doing. Is there a "dashboard" type page?

And something with Tables/graphs etc?

The pro site lists additional components, including tables.

At this moment we are working on Material Dashboard. It will come in the next weeks and it will be for Free having all the basic elements that you need to create a Dashboard (tables, charts, maps, forms etc). Then there will also be a Premium version for that with more components and customization. But the Free version will be enough for most of the cases.

It will be something like another dashboard that we created: http://demos.creative-tim.com/light-bootstrap-dashboard

I dig this a lot. Good stuff.

So can I clarify - will this be like an "add on" to the Material Kit that is posted here? i.e. can I use the Material Dashboard + Material Kit together?

Or will it be it's own standalone product?

i.e. can I start developing the Material Kit now, and add the dashboard on later?

It will be a standalone product, but It will have all the components that are in the Material Kit. So you will use Material Kit when you create the Presentation page or landing page of your product and then on the admin part you will use Material Dashboard. They will have the same design line so there will be consistency in the overall design of your web app.

You can start developing with Material Kit, then when we release the Dashboard you just change the CSS with the new one and also get the new Structure of the page (Sidebar + Main Area).

small advice about color use on that demo

drop the blue on red for the charts

because: https://en.wikipedia.org/wiki/Chromostereopsis

Any chance there will be a version without the usage of jQuery?

This is nice and your other products are really nice. Was thinking of doing semantic ui for my next project but this will do. Pre-sale question if I want to resell a final product on envato will the developer license do (that is if i dont attach the source materials for the themes).

Also what License is suitable for an open source project?

Looks great! Someone should make these into react components :)

Hi guys,

If you want to give use feedback, want to contribute or have any issue, here is the Github Repo: https://github.com/timcreative/material-kit

Saw the live preview. Can people customize the color of entire UI kit before downloading?

Unfortunately, you cannot change the colors before downloading. You can do that, very easy, after you download using the SASS variables and a SASS compiler.

Why didn't you contribute to https://github.com/FezVrasta/bootstrap-material-design/ instead?

To make money I'd assume.

I just looked at it and looked at pro version. Very compelling in my view, congrats. I know people might have different uses and approaches, but I think if it can save me a lot of time, it is worth it.

@desireco42 we are glad that you like! It will definitely save you a lot o time :-)

Am I the only one who thinks material design looks really bad? :-/

I'm thinking of using Material Design Lite for my next project https://github.com/google/material-design-lite

Hm, using Gigi Hadid as the profile pic is pretty lame. :/

Change that woman's picture at the bottom, not classy in my opinion.

Also, in SeaMonkey, the part with the sliders is like the sluggiest I've ever seen a website...

Why is it not classy? The picture looks like a fashion photo shoot, probably for the earrings

Not everyone's culture would find that picture okay. It's not hard to find something else like a tree that would work just as well. Also, why not a guy?

Presumably, that class is intended for user profile photos, so a picture of a person makes sense.

Why is a guy ok? I expected a girl in a bikini or something but it's just a headshot of a girl. That's totally fine in most places in the world.

> That's totally fine in most places in the world.

...and the places that isn't can suck it frankly.

YeeeHaw...! Don't forget in some cultures women cannot have their faces shown in public spaces (burka?). I respect that, but in general we should mine such culture sensibilities before posting something.

I've observed that often the people screaming "respect my right to do <thing x>" are the ones who are intolerant to my right to think <thing x> is wrong/stupid and say so.

You see this particularly with religions who think that belief in something unprovable should give them special rights.

Different cultures will find different things to not be OK. The site was (presumably) made by someone of a western culture, so those visiting it from other cultures can be mindful of that, and just ignore it.

Other things that could be offensive to various cultures: - Red meat (offensive in India?) - Beer (offensive in countries where alcohol is illegal)

One thing is to avoid being obviously offensive (nudity, violence, etc), the other thing is limiting yourself to the lowest common denominator of all things acceptable in all cultures. (However this could make sense for a highly localized/global product.)

Why not have a picture of a man? If they did that, then someone could also complain that women are not represented in the website. We're in a niche culture that is extremely sensitive towards that. Take for instance Facebook's "Friend request" icon, which was redesigned so that the woman was on front, and not on the back, precisely because someone took offense from that:

http://www.nylon.com/articles/facebook-friend-request-icon

You appear to be working really hard at taking offense here.

There is nothing wrong with the photo (which is classy). You will find photos like that on Facebook (personal) & Linkedin (professional) profiles.

I guess it's maybe because it's stereotypical attractive white woman picture -- doesn't hurt to mix it up a bit, show some creativity.

"Gigi" Hadid is of middle-eastern descent. Which if the Liberals who yell at me constantly for being a racist bigot have anything to say is distinctly non-white and middle-easterns are a minority person of color. Or are they like asians now and are only a minority/person of color when it fits the narrative but are considered white and getting "the benefits of being white" when it suits the narrative?

My only issue with the picture would be copyright concerns, but I don't know the copyright status of the photo used. Plus since Material Kit is free, I'm not sure if it would fall under Fair Use or not. IANAL.

Thank you for the feedback! We will check SeaMonkey (actually it's the first time when I hear about it :D ) and see what we can do to improve the sliders.

I wouldn't worry about the picture comment. The picture is clearly some stock photo but everything on that page is technically fake and for demo purposes.

You guys do great work, thanks!

Reply on news.ycombinator.com