Always Twisted

This page is old.

Although the content of this page may be useful. The page was part of a migratian and may look different and unmaintained. I am working my way through, tidying them up.

🙏🖤

Develop your styleguides with code

On This Page:

I've recently read a lovely post by Mark Boulton where he touches on our current fascination with styleguides, pattern libraries and primers.

I'd like to give my take on it.

I'm just going to ratify what I often say and that is I'm not a designer. I just can't do it as good as other people so I don't.

I love HTML, CSS and JS (kinda) and (blowing my own trumpet) I'm pretty good at it.

Frickin' love styleguides

Or pattern libraries, or pattern primers. They help me code more effeciently in that object orientated kind of way. I don't mean I need a .psd file of 'all the things'.

How I approach creating a coded styleguide is pretty basic.

  1. print out 'pages' in grayscale
  2. attach tracing paper
  3. make pretty boxes
  4. define naming convention
  5. start coding
  6. re-iterate
  7. re-iterate

This stops me from duplicating code and allows me to check changes 'globally'.

Be appropriate

I think styleguides as I seem them in web design are for the developer more than the designer. I feel the designer should be thinking about the 'bigger picture' in fixing the problem for their client.

The developer should be making their best effor in coding it as leanly, cleanly as possible. To get that you should really be trying to make a pattern library or styleguide with your code.

Do you need guidance on implementing a modular CSS approach, such as BEM or ITCSS?

I’ll help you adopt a modular CSS methodology that suits your team.

get in touch!