Open site redesign using a pattern library

As I’ve mentioned previously, I’m in the process of redesigning this web site. It’s very much a work in progress.

Pattern Library

As a first step I’m building a pattern library and I’ve decided to open source the repo during the build process. I’m using Pattern Lab for the purpose.

At the time of writing, I’ve done atoms and some of the molecules – more work needs to be completed. There are a number of open issues to reach version 1.0, these will be added to as I hit templates and pages.

I’m using the build the learn the process of using Pattern Lab. No doubt there are features of Pattern Lab I am missing, I hope to go back to implement these. I’m a little lost around variables stored in JSON files.

WordPress theme

Once the library is built, I’ll move on to the WordPress theme. I’ll be able to copy the CSS and JavaScript straight over, it will become a matter of matching the HTML.

While building the pattern library, I’m generally not thinking about how WordPress outputs particular code. I’m fussy about HTML, so will be coding up filters to match my needs.

It bears repeating, this is a work in progress. Once I’m a little further down the path I’ll be sending the implementation back to the designer so anything I’ve missed can be picked up on.

By Peter Wilson

Peter has worked on the web for twenty years on everything from table based layouts in the 90s to enterprise grade CMS development. Peter’s a big fan of musical theatre and often encourages his industry colleagues to join him for a show or two in New York or in the West End.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.