Yesterday I wrote about how MailChimp’s Pattern Library is pretty awesome. But copying it exactly might not be the best decision for your organization. Today I will continue with the breakdown against Nathan Curtis’ medium article titled “Design System Doc Components“.
What follows are 2 more of his list of 8 top reusable components from the MailChimp Pattern Lib.
#1. Example-Code Pair
The example code pair is exactly what it sounds like. An example of the component. The code that created it.
Often this has some additional documentation, but the power is in the pairing of the code and the live example.
Being able to see the component as it is rendered in your current browser is key. This allows you to observe your component in the wild and makes updating it simple.
Beware that there are several disadvantages if you used images generated from a graphics program such as Sketch or Photoshop.
- The component is simulated and may not resemble the actual live component.
- Updating images later is a laborious process.
- It is very difficult to track differences between images. With code or text you can run a diff between versions and see exactly what has changed.
- Rely on someone who uses such a tool. Usually your UX or Design team.
- It will be very difficult to automate the entire process.
#2. Markdown chunks <– MAYBE?
Now this is a guess since I don’t know the exact process they use to build this documents. But if I were to guess, I would imagine they are using some consistent way to build the documentation be that Markdown or another tool.
Nathan’s article gives an example of markdown mixed with Nunjucks (a templating system). The key take away is to approach your system in a way that allows for clean, consistent editing, and updating.
A favorite approach of mine is to use the ZURB Template and Panini to accomplish much of the same thing.
Now, that brings the question: Should my system include these 3 reusable components (Navigation, Example code-pairs, Markdown Chunks)?
I will answer exactly this question tomorrow.