
Show HN: Material Kit – Open Source UI for Bootstrap, React, Vuejs, React Native - axelut
https://github.com/creativetimofficial/material-kit
======
mr_overalls
I'm an enthusiast of early 20th century architecture schools like Art Deco,
Prairie Style, Streamline Moderne, and Danish Modern (for furniture &
housewares) because the clean lines and geometric shapes can function as a
design philosophy in a variety of areas.

And obviously, web aesthetics like Material Design already reflect the ideas
of Bauhaus and other schools.

But has anyone tried to replicate the "feel" of specific architectural
approaches in their web design? For example, how would Frank Lloyd Wright
design a website? Is it possible to incorporate more organic approaches like
Art Nouveau without producing too much distracting visual clutter?

Put another way, what architectural/design movements could provide inspiration
for the next evolution of web design?

And as further food for thought, wouldn't widespread use of AR/VR would serve
to strengthen the link between architecture and human-computer interaction?
Your personal computing environment could become an actual space - in the
architectural sense - in which to do work. The first thing I'm going to do, of
course, is replicate the Johnson Wax Factory's Great Workroom.

[https://goo.gl/PF665e](https://goo.gl/PF665e)

~~~
fermienrico
Architectural movements such as Brutalism are already making their way into
web design - not in a good way, imho.

They’re distractions.

Web-design in my view should follow Swiss layout and typography which is
widely considered to be the most objective, neutral, clear and universal
theory of graphic design. Some parts of Swiss layout already permeate in
everything we do - Grid system(Brockmann et al) for example. Or Helvetica and
Univers in typography (Frutiger et al).

Everything else is decoration. Obviously, if you build a website for a music
band, then all bets are off. My view is about common web design.

~~~
mr_overalls
Decoration exists on a continuum, and I don't think it's bad as long as it's
not overdone - which is a subjective judgment call, of course.

Decoration exists for comfort, beauty, and usability. I particularly like this
fantastic essay that explains the rationale for decoration in architecture,
and how the current design preferences for stark simplicity came to be.

[https://www.currentaffairs.org/2017/10/why-you-hate-
contempo...](https://www.currentaffairs.org/2017/10/why-you-hate-contemporary-
architecture)

An excerpt: 'A few obvious stylistic changes characterize postwar
architecture. For one, what is (now somewhat derisively) called “ornament”
disappeared. At the dawn of the 20th century, American architect Louis
Sullivan proclaimed the famous maxim that “form follows function.” Even though
Sullivan’s own buildings were often highly ornate, adorned with elaborate Art
Nouveau ironwork and Celtic-inspired masonry, “form follows function” was
instantly misinterpreted as a call for stark utilitarian simplicity. A few
years later, architect and theorist Adolph Loos, in a 1908 essay called
“Ornament and Crime,” dramatically declared that a lack of ornamentation was a
“sign of spiritual strength.” These two ideas quickly became dogmas of the
architectural profession. A generation of architects with both socialistic and
fascistic political leanings saw ornament as a sign of bourgeois decadence and
cultural indulgence, and began discarding every design element that could be
considered “mere decoration.”'

~~~
fermienrico
I didn’t claim Decoration and creativity is bad and said that when it’s
required for cultural, aesthetic or media appeal then it makes sense, for
example a music band website.

But a web framework should adopt the most neutral stance and designers can
modify as they see fit. In other words, decorative frameworks as proposed by
the OP that are based on an Architectural movement are not appropriate for
majority of the webpages on the internet. They distract. _Decoration_
distracts. Doesn’t mean it has no place in society.

Also, Dieter Rams proved that design can be un-decorated, yet inviting,
comfortable and human centric. As a direct legacy to Rams, just look at the
success of Apple and it’s stance on design. Personally, I argue that
Decoration is shallow and doesn’t solve the fundamental goal in design : to
make products and services that interface with humans easy to interact,
understand and use. Instead Decoration distracts, deludes and creates
confusion. It steals clarity and intent in design. In some cases, Decoration
is not honest. Can you imagine Casinos built by Tadao Ando?

~~~
petilon
> _Decoration distracts._

This is the principle that lead to the abhorrent and unusable flat design.
Sometimes, lack of decoration distracts. Because it is this "decoration" that
makes things look familiar. Without the decoration people have to stop and
think and figure out things.

iOS 6 and below is an example of decoration making things more familiar and
intuitive. As Steve Jobs designed it, the world inside the iPad screen was a
seamless extension of the world outside the screen. When you went inside the
iPad, everything looked familiar. But now we have a hard boundary at the
device, and different rules apply inside that boundary. You have to learn and
memorize new rules because the outside rules that you are already familiar
with are of no help inside the screen.

~~~
fermienrico
I think you're confusing skeumorphism with decoration. Decoration is adding
elements to design for the sake of aesthetic ornamentation. For example,
Geocities websites had all kinds of blink tags and fireworks going on inside a
webpage. That is decoration.

A save button icon that looks like a floppy disk is not decoration. It is a
use of skeumorphic semiotics that takes advantage of historic familiarity -
which is what you're referring to. I agree with you that it has its place in
design. The original discussion of this thread is whether we should _decorate_
websites with architectural motifs whether it is art-deco or brutalism.

------
nik736
I still don't understand what's so good about Material Design, I absolutely
hate it.

But props for the effort.

~~~
NowThenGoodBad
Materials Scientist/Engineer who also codes here:

1\. I highly dislike material design as a programmer and as a consumer.

2\. Google and others using “Material Design”, Polymer, etc is really annoying
and can be confusing until the context is clear. It makes searching about
EITHER physical material design or coding material design a painful
experience.

I was searching for job openings around the SF Bay Area and the fact that
they’ve made stuff like this and “product design engineer” very hard to filter
through between hardware and software is just nonsense.

There’s a reason we define specific words and terms for specific fields and
it’s totally understandable that different fields would accidentally mess this
up before we had the internet and global connectivity. However, now we have no
excuse to not make things clear and distinct. When I say “Polymer” you should
thing “long noodly chain of repeating units, aka many mers” not “a web
component library.”

When I search for “materials design/er” I should NOT see something programming
related unless it’s computational materials design software (simulation,
analysis, etc).

Still, barring the complete confusion created by this stuff, I don’t like
Materials Design. It’s ugly and needs to go away. Amp can do that too. We need
to keep Amp about current.

~~~
flavor8
> When I say “Polymer” you should thing “long noodly chain of repeating units,
> aka many mers” not “a web component library.”

I'm sort of with you on some of your complaints (e.g. job titles), but this
one doesn't stand. Do you want to ensure when we talk about amazon that we're
talking about a river? That when we talk about googol we're talking about
10^100? Words are frequently reappropriated for company and product names, and
that's fine.

~~~
TeMPOraL
TBH yes. I wish search engines had an "exclude branding" modifier to search
terms. Too many products appropriate too many terms from other domains these
days.

------
axelut
Hey guys, the UI kit comes also in Figma, Sketch, Photoshop and Wordpress, you
can check more about it here: [https://demos.creative-tim.com/material-
kit/presentation.htm...](https://demos.creative-tim.com/material-
kit/presentation.html)

You can use it for commercial or open source applications as it is released
under MIT License.

If you have feedback please let us know.

~~~
sambroner
This is an amazingly comprehensive project. What about your architecture lets
your support so many frameworks?

------
bsimpson
I love that people make and share things, and I hate to pour water on
announcements. I admire the effort that went into this.

That said, it makes me sad to see more fragmentation in the Material space.
When Material launched, it was a set of design guidelines. A bunch of open
source teams (like Material UI) stepped up and put together libraries that
implemented those guidelines for specific view frameworks. This project looks
like one of those efforts.

Since then, the Material Components for the Web project has formed. It's
staffed by Google engineers who collaborate with the designers who write the
Material Guidelines. They faithfully implement the Guidelines and makes
updates as necessary to keep pace with design changes. The project is designed
to be wrapped by other libraries to work with specific view frameworks.

I'd hope that any Material library for the web that's put together in 2019
would leverage that work. It will more faithfully follow the guidelines and be
easier to maintain over time, because there's already a team of people
responsible for maintaining the underlying framework.

If you haven't already, take a look at Material Components for the Web. You
might have a better time if you back Material Kit with it.

[https://github.com/material-components/material-
components-w...](https://github.com/material-components/material-components-
web)

------
LearningCoding
A little off-topic, but I'm learning CSS and this seems like as good a place
as any to ask: What are the alternatives to material design (which I think I
understand is a certain aesthetic that incorporates shadows and textures)? Is
flat design the only main alternative in modern web design, or are there
others?

Secondly, the online course I am doing is using fluid grid but I understand
that flexbox is another option. Am I better off focusing on one or the other?
Thanks.

~~~
deltron3030
There are others like the HIG (Human Interface Guidelines) from Apple. The
ones that are in the open are more like full design systems meant for internal
use and prestige. You can find a list of systems on this page:
[https://adele.uxpin.com](https://adele.uxpin.com)

To use shadows for the z-index and layers is quite common these days though,
many systems use them. Flat could be just a step after "inset" and before
"raised" within a system like that, something you use for normal backgrounds
and stuff that are part of the background.

The most basic element in a design system is essentially just an empty
frame/box that could hold a shape and color, and optionally a shadow on a
shape. This frame could become anything.

------
typon
Using Material design always feels so sluggish. Is it the shadows? Can someone
with more CSS knowledge speculate about what's causing the high latency?

~~~
dmitriid
It's the shadows and the unnecessary animations for every single interaction.

------
Theodores
This is yet more div soup judging by the examples in the Repo and the
Wordpress theme.

I am struggling to find anything that is using HTML5, CSS Grid, CSS variables
and other niceties of evergreen browsers the right way. It is almost as if web
development has forked into two paths, one path being div soup bloat and the
other being increasingly more complex build tools to arrive at the logical
arrival of css in js.

I want the sensible features in modern evergreen browsers without these
options of increasing div soup or increasing complexity. We can now have a
true separation of content from styling and scripting with design being
content first rather than visual mockups and placeholders.

The problem is that to start using the modern good stuff requires unlearning
the bullshit that has gone on ever since the browser wars, nobody is giving up
on the hacks, the frameworks and the complexity to do it properly with
succinct content, succinct styling and straightforward scripts. Everyone is
telling themselves they work on a team building products that are far too
complex for any chance of going forward to more sensible document markup.

The days of div soup are not over - as exemplified by what we have here - but,
once the good stuff has been discovered and the evergreen friendly stuff
learned there is no going back to div soup and the working methods that go
with it.

~~~
dmitriid
> It is almost as if web development has forked into two paths, one path being
> div soup bloat and the other being increasingly more complex build tools to
> arrive at the logical arrival of css in js.

css in js will not save you from div bloat.

Div bloat exists because CSS+HTML are horrendously bad at actual layout. For
any sufficiently complex component you'll have div soup, and newer CSS
features reduce the bloat only ever so slightly.

> nobody is giving up on the hacks

New frameworks have very few if any hacks leftover from the browser wars. The
framework discussed here uses flexbox almost exclusively. It doesn't mean you
don't need dozens of other hacks to display anything more complex that text.

> once the good stuff has been discovered and the evergreen friendly stuff
> learned there is no going back to div soup and the working methods that go
> with it.

Yeah, no. Div soup is here to stay, because it's literally _the only_
foundational layout element of HTML.

~~~
Theodores
I think that there is an alternative and the likes of Rachel Andrews are
speaking my language when it comes to document structure, no div soup and CSS
grid for the layout.

At school or university you have options regarding who you are going to copy
to get that assignment done. You can spend hours plagiarising with a lot of
work put into rephrasing things slightly so that your work will pass as your
own. Or you can spend a lot of time second guessing what everyone else is
doing and emulating what you think the solution is. Or you can actually ignore
what everyone else is doing and roll your own solution, learning the
fundamentals, copying nobody. Then when done you can have a look around and
see what you missed in the other ways the problem has been solved. By going
original in your thinking you might have missed a trick or two. Or got
something wrong. But, with a foundation of original work you can confidently
patch up what you have got to be best in class, all defects removed.

I think the web is like that. Sometimes you look for a simple aide-memoire on
Stack Overflow where once upon a time all the answers were seemingly
brilliant. But then you realise that you have moved on from that, your own
code is better, you aren't just copying and imitating, you have this
understanding thing going on that is lacking in some of the other answers.

Then there is the hamster wheel of forever having to learn the latest and
greatest, that panic and fear of the unknown latest framework. So another
round of copying and imitation goes on, the mountain top of confidence and
knowledge never reached as there is always another extra thing to add in to
the build chain to make it better.

But then you realise you are working on a second rate website to sell hair
care products to care bears. And it doesn't need the latest trends in visual
design or the convoluted ways of cooking up yet more div soup that nobody is
ever going to notice.

I beg to differ on your attitudes towards your staple diet of div soup.
Concise, content first actual content is not the same thing as bullshit
written by people that can't spell force fed into some content blocks that
rightfully should only ever contain the lorem ipsum text the visual mockups
demanded of them. It is time people started with the raw manuscript and got
the copy right without applying a single style. When this is done styling with
CSS grid and lovely HTML5 elements works beautifully. This is no marginal gain
in bloat, it is a whole new world of maintainability and awesomeness. If you
ain't doing it right you are doing it wrong and some mastery of CSS grid is
needed, it ain't just something you sprinkle in div soup like it is a fifty
bucks Wordpress theme.

Content is king and there isn't any div soup needed. Maybe a div for holding
that Google ReCaptcha button but I am struggling for bona fide instead of lazy
ignorant uses thereafter. You have got to get the document structure right,
accessible and good for modern CSS.

Of course this falls apart if you need to support 32 bit iPads or that person
struggling along with Internet Explorer 6.

~~~
dmitriid
> content, content, content

Yeah. If by content you mean text and images. And HTML + CSS can hardly handle
that.

And here's what I said, and it's true as ever:

> For any sufficiently complex component you'll have div soup

> Div soup is here to stay, because it's literally the only foundational
> layout element of HTML.

No amount of grand words about hamster wheels and ad hominem attacks like
"people who can't spell" will change the sad reality: the web has moved on
beyond simple texts with images, CSS and HTML have not.

Here's an example of a component that puts content first. Developed with
modern CSS with no hacks (each css class essentially represents a single CSS
property, everything is flexbox etc.):
[https://tailwindcss.com/docs/examples/cards](https://tailwindcss.com/docs/examples/cards)

Do enlighten me how you get rid of the div soup. I'm especially interested in
the "lovely HTML5 element" called "a card capable of displaying an image and
text".

~~~
Theodores
Flexbox is old hat, use your favourite search engine to see how easily it is
done with CSS Grid - grid not flexbox.

You can nit pick on any example tutorial but do the research and you will find
it all works great with CSS grid, you just might have to learn how it works
rather than copy and paste.

The class bloat is another problem with div soup, also sometimes you need to
put aside the mentality that everything has to be sooo complex, simplicity is
hard, anyone can make everything complex and buy into the myth that everything
has to be complex.

There is always a better element than 'div', the exception to the rule is
where you need something that would have been an 'object', e.g. a Google
'recaptcha' needs a 'div'.

The same goes for 'span', unless you really need to change the colour of the
second letter of a word there is always a better way, e.g. psuedo elements.

~~~
dmitriid
> There is always a better element than 'div'

Please show me a better element for “a card to display an image and text”.

It would also be nice if that element used CSS grid.

------
Flavius
Is this kit any better than [https://material-ui.com/](https://material-
ui.com/) when using React?

~~~
yuchi
Sorry to be rude, but simply no. I used both (inherited a Material Kit project
and moved it to Material UI), and the quality of MUI is simply astonishing:

1\. Releases are very thoroughly cut 2\. The APIs are very well designed 3\.
The result is incredibly professional

~~~
jefozabuss
The React version of this Kit is built on top of MUI so I'm kind of confused
about this comment.

------
rsweeney21
Wow, such negative comments. Nobody cares that you don't like Material Design.
/rant

This looks awesome! As a designer and engineer, it's always frustrating when I
design something that turns out to be next to impossible to do with the
component library we've chosen to use. Having such a comprehensive set of
design platforms and web frameworks covered here solves that problem for us.
Thank you for building this!

BTW, if you haven't tried Figma, you really should. It's cross platform and
even runs perfectly smooth in your browser.

On that note, @axelut - it would be nice if there was a link to _open_ the
Figma UI Kit, so I could preview it in browser, rather than having to download
it first.

~~~
axelut
Thank you for the feedback, glad that you see this useful. I agree that Figma
is getting better and better, that's why we started to work with it. Please
check this link:
[https://www.figma.com/file/bvQEB3MNOzDx5KrBWLZmmIre/Material...](https://www.figma.com/file/bvQEB3MNOzDx5KrBWLZmmIre/Material-
Kit-Free?node-id=0%3A1) and let me know if it is fine.

------
francislavoie
This isn't following the latest Material spec. For example, see the text
inputs; they went away with the underlined fields style (for some good
reasons). I'd love to see that updated, then I might consider using it.

~~~
ravenstine
People _could_ just import the individual Material web components, rather than
trust any number of 3rd parties to keep their own remake of Material design up
to date.

[https://github.com/material-components/material-
components-w...](https://github.com/material-components/material-components-
web)

------
avinium
I came across the Vuetify dashboard the other day for a side project I'm
spinning out ([http://www.sweephq.com](http://www.sweephq.com) \- may or may
not open source, haven't decided yet).

There are some fantastic themes/UI components here. Great job.

~~~
axelut
Hi, thank you for the kind words and congrats for the product. If you do it
open source we can let our users know about it, maybe somebody can use it. We
should keep in touch as we are working on some email templates that will also
be release under MIT license. Ping me at alex@creative-tim.com :D

~~~
avinium
The e-mail templates also sound like a logical fit - will certainly drop you
an e-mail if I decided to release OSS!

------
skilled
Material Design ain't got that cosy feel to it.

------
seanwilson
On the product pages, what's used to collect, store and display the customer
reviews? e.g. [https://www.creative-tim.com/product/vue-material-
kit](https://www.creative-tim.com/product/vue-material-kit). Just curious as
social proof like this is really useful when you're trying to sell products.

------
kevin_thibedeau
So you have to upgrade to Pro to get documentation and SASS sources?

------
johnisgood
Feels really sluggish.

------
nathan11
This looks really nice, thanks for building it.

