var ya;
Home
Services
ProjectsBlogContact

All posts tagged storybook

Generic Storybook stories with different viewports

Making the components responsive is usually one of the key requirements for any design system or a pattern library. This means that the documentation system has to follow and show how the components are rendered on small to large screens. In this post, I show how I managed to do it with Storybook and get unique URLs for such responsive stories for later embedding them as examples into other (documentation) pages. Storybook provides essential add-ons, and one of them is for working with different screen sizes. It gives you a viewport toolbar where you can select how to render your stories. The documentation page explains how to get it working and how to configure for your specific case. You may enjoy the default set up and manually change the viewport settings when developing or checking…

You can hire me to set up, manage, develop, and champion your design system. I can align the design and development processes in your organisation for a larger business impact.

Get in touch
© Varya Stepanova 2022