large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="http://ift.tt/2rWYuVu">| Prototyping: From UX to Front End &mdash; Medium</a> Matt Healy <img alt="" src="http://ift.tt/2qDt1DV">
<a href="http://grommet.io">Grommet</a> is a React-based web UI framework and design system in the tradition of older frameworks like Bootstrap, or newer ones like the web incarnation of Material Design. It’s part of a new breed of React-based UI frameworks, <a href="http://ift.tt/2qmjv7Y">the virtues of which I extoll in this post</a>. See also the other examples listed there.
<img alt="" src="http://ift.tt/2qDpJ3w">
I say “framework and design system” because Grommet’s not just a set of UI components. It’s a broad web design system, with guidelines for everything from layout to language. It’s developed by a team at HP, so its design perspective is based on their internal needs.
<h4>TL;DR</h4>
Grommet’s a comprehensive and opinionated framework. If its UX and aesthetic choices match your needs, it’s a great ready-to-use system with everything accounted for. If you’re looking for a good generic base to customize to your needs, it’s not the best choice; some of the UI choices are pretty nonstandard, and it’s not designed with deep customization in mind.
<h4>What’s great</h4>
<ul>
<li>Layout with the &lt;Box /&gt; component Where some UI frameworks ignore layout entirely, Grommet offers several layout components. <a href="http://ift.tt/2rWxLZe">&lt;Box /&gt;</a> is the most versatile one; it’s based on flexbox and takes props for all the flexbox features, as well as a few other conveniences like standard padding sizes. One of my favorite things in it is the pad.between prop, which lets you define padding between a box’s child components:</li>
</ul>
<img alt="" src="http://ift.tt/2qDL3FO">
<pre>&lt;Box direction="row" pad=&gt; &lt;Box pad="small" colorIndex="neutral-1"&gt;A&lt;/Box&gt; &lt;Box pad="small" colorIndex="neutral-2"&gt;B&lt;/Box&gt; &lt;Box pad="small" colorIndex="neutral-3"&gt;C&lt;/Box&gt; &lt;/Box&gt;</pre>
<ul>
<li>Component APIs Prop names are reused across a lot of the components. Also many of the components’ layouts are based on that &lt;Box /&gt; component, and can take the same props and pass them through (e.g. margin, padding, background color).</li>
<li>Icon set Grommet comes with a huge library of SVG icons, accessible in the <a href="http://ift.tt/2rWIFy7">&lt;Icon /&gt;</a> component. They match nicely with the flat, outlined style of the rest of the system.</li>
</ul>
<img alt="" src="http://ift.tt/2qDJibX">
<ul>
<li>Visualization tools Something Grommet has that I haven’t seen in many other frameworks is a large set of components for data visualization — everything from bar charts to world maps. If you need some easy dataviz tools, it’s nice to have a matching set that doesn’t require another library.</li>
</ul>
<img alt="" src="http://ift.tt/2rXdZfY">
<h4>What’s not as great</h4>
<ul>
<li>Difficult to customize The creators of Grommet are pretty clear that it’s not designed for extensive customization. They make it easy to override the default fonts and colors, but beyond that there are a lot of details that require nastily specific CSS selectors to change, and many things that can’t be changed at all.</li>
<li>External CSS All of the CSS for Grommet’s components are defined in SASS files that are separate from the components themselves. If you’re using CSS modules (I usually am), it requires a fair amount of contortion to avoid defining global styles to override anything you need to tweak about Grommet.</li>
</ul>
<img alt="" src="http://ift.tt/2qDmc5j">
<ul>
<li>Non-native UI controls Several components, especially in the form controls, look pretty far off from any native UI. Again that’s fine if you’re willing in to buy in to the full Grommet aesthetic, but if you’re looking for a generic base to apply your own style to, these things stick out. In particular: form fields where the label’s positioned inside the border, select menus that look like text inputs but with an overly large carat and no clear active state. Often when I’m looking at a new UI framework I look at the date picker first, and <a href="http://ift.tt/2rWUC6L">Grommet’s</a> is not my favorite — picking a time is tedious and the whole thing is awkwardly large.</li>
</ul>
All in all, Grommet is impressively broad in the controls it offers, and its style guide makes a lot of the little decisions for you. If you’re okay with how it looks and works, it’s a great, thoughtful framework. If you want more control over customization, there may be better alternatives out there.
This is the first post in a series where I’ll be digging into a few examples of the new breed of React-based UI frameworks. Read more below, and follow me on Medium to stay posted.
<a href="http://ift.tt/2qmjv7Y">The new generation of React-based UI frameworks</a>
<iframe src="http://ift.tt/2kZ4o5P" width="800" height="400" frameborder="0"><a href="http://ift.tt/2pIip9S">http://ift.tt/2pIip9S</a></iframe><img src="http://ift.tt/2qDK0ps" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2rWNKGL">Grommet</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Grommet

Grommet

Top Stories