Blog

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…

One of the main focuses in my recent work is to keep documentation for designers and developers in the same place. How exactly to achieve this, depends on what are the chosen documenting tools. At the moment, our team is trying ZeroHeight which is very much appreciated by the designers. However, brining there technical documentation like a PropTypes table for the components, I faced some obstacles. Anyways, there is a solution. Create a Storybook page with PropTypes table For every component, create a separate page in Storybook where you output only the component properties. You can use MDX…

Nested structures are useful for managing and editing. But when it comes to representation in UI, it might not be trivial to iterate through all the deep levels. Often happens, that it is more useful to have a flat structure which probably preserves the depth of the items. In JavaScript, easiest way to transform such structure is reduce method. Image source: https://macwright.org/2015/01/03/reduce-juice.html Say, we have a nested structure representing the parts of a design system. This is a list of categories with underlying item which, in turn, may have subitems. Instead of going deeper…

Linking web fonts in SASS when using Webpack might not work as expected. The most common problem is incorrect URL resolving if a font is linked with url() . This post covers this and the following traps on your way to nice fonts on your webpage. Image source: https://processtypefoundry.com/blog/2011/02/five-new-webfonts/ Load fonts Instruct your webpack how to load font with file-loader : More info about loading fonts options on SurviveJs project . Resolve URLs If you use SASS, you must face a problem of resolving URLs. Let's say your Webpack configuration for processing SASS files is…

In these unique times, well-organized remote work becomes one of the key factors for success. This applies to any kind of work, and managing design systems is no exception. Although it is a huge challenge, I very much like how things are going in our team. So that I collected here some tips which may help you as well. Image source: https://medium.com/@WebdesignerDepot/2-essential-rules-for-working-with-remote-clients-e7e289a6cb3d Keep in touch Design systems connect people, and a design system team works as a conductor. Regular communication makes it all for us — meeting people in the office…

It may happen that default JIRA project settings or board does not fully respond the needs of your project, similarly to how it was for the project I am currently working at. Our team once realised that we would benefit from custom issue types which we use for filtering and organising our Kanban board. However, "realised" is maybe not 100% suitable word since initially that was more kind of hypothesis which we could prove or not. Simply speaking, we must try before we know. Image source: https://www.freepik.com/free-photos-vectors/business JIRA is a very much customisable tool and…