Journey

I have joked with fellow designers that I could write more than a thousand words about buttons. Now I can claim that I have with absolute certainty. I still want to write more, but I think this was a good start.

Writing about a component is a powerful way to evaluate it. It forced me to re-evaluate my choices and in some cases tweak the code. It led me to look at how others had also built and documented this simple component. I’m pleased with the end result.

With a little help #

As part of documenting this first component, I added some additional tools to improve the documentation. First, I wanted to highlight code syntax so I installed the 11ty syntax-highlight plugin. It handily processes code snippets during the build so they’re already styled within the static file.

Second, I wanted to be able to link to specific sections within a page, so I also added markdown-it-anchor. This automatically adds a logical ID to headings within the page and a subtle link after the heading.

Next up #

Now that I’ve got the first component documented, I’m excited to move on to the next set: form elements. I will be creating, styling, and documenting all of the various form elements so this will likely take some time for the next update.