Gestalt: A set of React UI components that supports Pinterest’s design language

https://github.com/pinterest/gestalt

by sloankev • 8 years ago

72 19 8 years ago

github.com

firloop• 8 years ago

Prior art in this area by Shopify: https://news.ycombinator.com/item?id=14159994

chrislloyd4• 8 years ago

I (alongside some very talented people) work on this. AMA!

danielvf• 8 years ago

Chris, the docs are fantastic!

chrislloyd4• 8 years ago

Thanks! It's been a big group effort. We've put a lot of work into them (with much more to come) and they've massively helped Gestalt's adoption in both the eng. and design orgs.

mjdude2• 8 years ago

Congrats on getting this released! Does it support theming? Took a quick look at the docs I don't think it does.

chrislloyd4• 8 years ago

Not currently, though this is a question that gets asked a lot.

One of the benefits of Gestalt is that all styling is statically resolvable. This means that all it's CSS can be built to one small file or inline styles. We get a bunch of perf. & portability for free. (Unconstrained) theming requires runtime style resolution which would negate those benefits. There are also things that we'd like to be able to change and tweak globally and those get difficult if everybody is running separate themes. We recently switched to using system fonts and we're planning on bumping the color contrast.

However, we're generally _really_ open to constrained theming (i.e. more button colors).

marklmc• 8 years ago

Awesome job!

QQ- why declare typing in both flow and proptypes? Thanks!

concerned_user• 8 years ago

Because proptypes actually catch stuff during runtime, flow not so much. Maybe I have a wrong setup, but that is the case for me.

chrislloyd4• 8 years ago

Same as what other commenters have suggested, both runtime and compile time checks are useful. We'd like to consolidate around Flow (our docs specify flow types) but just haven't gotten around to adding/vetting that Babel plugin (or alternatives). I'd personally like to just use static types but it would mean that all users would have to use Flow + our specific version of Flow.

xtalx• 8 years ago

This is a really nice piece of work! I’ve been experimenting with building something similar for my employer... I like that theming isn’t really a concern here. It makes sense because Pinterest already has a “theme” and this implementation enforces the theme. I have a few questions... These aren’t framed as “defend the choices that were made because I think they’re dumb” kind of thing, haha. I just think knowing some of the reasoning behind some of the implementation details would be illuminating.

Why not use something like Glam or Emotion to handle className generation?

With absolute positioning on <Box />... is there a reason why the top, bottom, left, right props are limited to static values of and not like top={48} or left=“12px”

Also curious on api that dictates Text component: color = css property color and Box component: color = css property background-color

Does Pinterest not use textShadow? Curious why that’s not a part of the Text component. Text styling seems to be the most difficult part of a component based design system.

Anyway this is great work! Hopefully I didn’t ask any stupid questions with obvious answers. Ha

mephitix• 8 years ago

Congrats on the release.

One point about the docs - you can cut down on the verbosity of those examples by using arrow functions (instead of .bind) and class properties instead of state initialization in constructors.

bauerpl• 8 years ago

Great job! Feel free to add Gestalt to https://adele.uxpin.com - the repository of publicly available design systems

dotsh• 8 years ago

Wow, great repository but presentation is just unusable and terrible. Table "jumps" around like crazy when scrolling, logo and social icons take way more space then actual content on my MBP. I know it's just a landing page thats only purpose is to convert new signups but really... huge white space with ADELE name on it? You still have to explain where the name comes from. :)

softwarelimits• 8 years ago

First a big THANK YOU very much for your very valuable work comparing design systems and making the results public - this is really very appreciated! A fantastic collection and your comparison is based on important features, very helpful!

However, I want to take the risk making me a bad person to express in full honesty my thoughts about an uncomfortable feeling that I get when reading your "About" section, hopefully without making yourself feel bad.

It is about the use of that popular "low contrast text" design pattern - one of the most awful and most ignorantly mindless-copy-pasted design patterns of our times.

Looking at a low contrast text on a website about design patterns is already ironic enough, but seeing it used with a text about "one of the most important computer scientists focused on graphic user interfaces, design patterns and object-oriented programming" makes it insulting.

Please do not use that low contrast pattern. I will explain:

That "low contrast text" idea once, a long time ago, was a very interesting and intellectually inspiring approach to the very old art of "text presentation". Making the text nearly unreadable, vanishing against the background, transports a lot of symbolic potential about what the viewer might think about the relationship of content and presentation - making the pattern itself a non-ignorable contribution to the evergreen discussion about exactly that issue. Applied in a not expected context such a design pattern could be seen as provocation or at least as some kind of challenge questioning the value of text production itself. Many hours of interesting discussion can arise from that, what again increases the value of that pattern, making it an effective social engineering tool.

However, at some point some person with basic knowledge about "Photoshop" (but certainly not a well educated graphic designer!) has seen that pattern somewhere and her/his idea about it was just one word - "cool". This was a very young person, maybe with a drug addiction or a similar handicap that made it hard for that person to think deeply and to analyze things, so his/her vocabulary and therefor the ability to name things was very limited to some prototypic primitives and the only way to express and to think interest was the word "cool".

That person then just copy pasted that pattern, without thinking, without ever understanding the context, the intention or the potential impact - all that person was able to think was the word "cool" - in his/her small world this was already enough to explain a lot.

As we all know, unfortunately and because of very bad education policies everywhere there are many people that understand the world in a similarly limited way like that person - and so that pattern spread around like a disease, copy pasted many times over and over again, and most people used it just because of "cool".

Then big companies came along and understood that this "cool" pattern was new and trendy. Big companies are extremely good at catalyzing the most stupid ideas that humans produce, often ignoring or not understanding any ironic potential of an idea, and so the use of that low contrast pattern found its way into popular culture and is nowadays one of the most used, most annoying design anti-patterns.

But what still remains is the original idea and the potential symbolism of that interesting idea - and it bites their unmindful users in a clandestine way, without them being aware of it: that pattern is mostly used by people producing meaningless or laughable words, hollow marketing phrases or plain lies, text, that is just meant to spoil the reader and that "vanishes against the background".

And this is the magic of good ideas.

So nowadays that low contrast pattern is usually a valid indicator for worthless, senseless time wasting BS. But this is also the reason, why it feels insulting in a potentially serious context, and most certainly in a text about iconic UI designers.

I hope I was able to express my feelings in an understandable way, and it would be a great pleasure if you could accept the existence of this world view. You might express your respect and friendship by avoiding that low contrast pattern from now on, just to not hurt people. As a benefit it will put your work in a different context, making it less disappear against the background noise of everyday information overload. Thank you very much!

BTW you might also like to take a look at http://contrastrebellion.com/ for some more pragmatic explanations of why that pattern should be avoided.

Also, too all dear HN readers: yes, it would give this text an additional level of ironic meta and make it an object of collaborative art if you downvoted it into vanishing against the background... I will then make a big print of a screen shot and will try to sell that to some modern art gallery... :)

Have a nice day!

fouc• 8 years ago

I think I might be confused on the definition since I don't see semantic-ui, bulma, or other common ones listed on here?

edit: idea - maybe indicate if they're mobile first or not? more than just responsive, but actually have appropriate actions and metaphors for mobile interface.

branko_d• 8 years ago

BlueprintJS is missing.

Also, material-ui, react-md, Prime React, and quite a few others...

Gestalt: A set of React UI components that supports Pinterest’s design language

Related Stories