Tagui

πŸ”– 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

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!