Design Systems Handbook

Cover of the book Design Systems Handbook

I’ve been involved in the process of instating a design system twice. First, with the short-lived attempt to move the MediaWiki platform to mediawiki.ui. And second, replacing mediawiki.ui and whatever else MediaWiki was using to OOUI.

While the first attempt was limited to a small CSS file and KSS generated documentation, the second one came with a full-fledged demos page and a styleguide to go with it. MediaWiki is in the process of transitioning once again, now to Vue.js. This time though, things are different, the style guide remains in place, it is only the implementation of the components that’ll change.

So when I first heard about the Design Systems Handbook on the Design Better podcast I was immediately interested. Large legacy products like MediaWiki have long suffered from bespoke designs for every corner. Design systems that can scale-up help build products faster.

Continue reading “Design Systems Handbook”

πŸ”– Atomic Design (archive)

Atomic design is a strategy for creating design systems by breaking elements into distinct levels:

  • Atoms are the smallest building blocks, that is HTML elements (like inputs, buttons and headings)
  • Molecules combine atoms together to build something useful (like a form or a card)
  • Organisms combine molecules to create distinct sections of an interface (like the header or the product grid)

These are combined to make the actual designs in the form of:

  • Templates are organisms stitched together to form pages.
  • Pages are specific instances of templates.

This system allows you to design by assembling rather than deconstructing which means you don’t have to cherry pick patterns later.

A persistent Table of Contents

A recent discussion on Wikitech-l lead to the idea of having a persistent Table of Contents on Wikipedia articles. Timo had shared the Underscore.js and Asciidoctor docs as examples but I liked Bootstrap’s the best because it collapses headings and shows you where you are. I sat down to experiment and came up with this β€”

toc expanded wikipedia
toc expanded wikipedia

You can try it by adding the following code to your common.js β€”

importStylesheet( 'User:Prtksxna/toc.css' );
importScript( 'User:Prtksxna/toc.js' );

The table will show up on the side once you have scrolled past the first heading. There are a few bugs and I am not collapsing headings as I am not yet sure if its necessary for Wikipedia articles. Feedback and ideas are welcome!