This article was originally published on designsystems.com.
Previously, I’ve written about the container pattern we use in our React components in the Zendesk Garden design system. They render no UI, handle keyboard and mouse interaction, and support RTL layouts.
I believe this pattern has a lot of merit but its previous incantation is buried in our high abstraction React components, meaning you have to bring down a package — styling included — just to use our no-UI containers.
Well no more! Introducing react-containers: a new open source library to help elevate these patterns into their own repo. …
Originally posted in 2014, some things have changed in those 4 years.
There are several reasons you would want to render to an iFrame but the main benefit is style encapsulation. We can safely style our components without having to worry about style inheritence or CSS specificity and vice versa not affecting the parent document styles. The other benefits that are beyond the topic of this post are guaranteed paint layer and layout boundaries. …
We’ve recently open-sourced our design system, called Garden.
I wrote a Twitter thread on some of the cool stuff we’ve done that could be very useful as a starter for other people.
So here’s that thread with some extra goodies, in article form.
We’ve utilised a really cool pattern, based on the render prop pattern, to create some primitive components that can help anyone get started.
In Garden we divide our components into 3 parts:
We’ll drill down into the container component concept as this is the most useful to folks not directly developing on the Zendesk platform.
They’re UI-less components that provide a render callback. They provide state and prop getters, which you can then spread onto the correct components. …
I recently started working on the engineering side of Zendesk’s Design System, known as Garden.
My first mission has been diving into the world of rendering our react components back into Sketch, a design tool, to keep the final components in sync. Standing on the shoulders of others, I have been using very cool tools such as html-sketchapp & html-sketchapp-cli.
For more information on the why of rendering react into sketch, have a read of Sketching in the Browser.
One thing that was missing was the ability to set resizing options on a symbol. …
On April 13th, 2016 I gave a talk at a special “mega meetup” here at the Zendesk Melbourne office. It was a combination of MelbJS, MelbCSS & Be Responsive in collaboration with Web Directions Respond conference.
I gave an overview of the the new Houdini umbrella term for a series of specifications that will enable low level access to the browser rendering pipeline.