A crucial part of the creative process is researching current trends and advances in the design industry. This is a time consuming task involving inspecting the CSS of sites, taking notes of design elements, and evaluating them before choosing a design direction. We discussed how there was an opportunity to make this process easier, and Stylify Me was born.

Stylify Me was created to help designers quickly create a style guide of an existing site, including colours, fonts, sizes and spacing. It’s a tool that allows the designer to research the CSS styles efficiently without the need to inspect each element, in order to be aware of current design trends and inform their design decisions.

Retrieving CSS styles from a website is easy when you can query against the actual DOM elements, but as many sites cannot be opened in an iFrame, a client side only approach was not an option. Michael had previously heard of PhantomJS, a scriptable, ‘headless’ WebKit browser, on the Javascript Show Podcast. ‘Headless’ means it runs without a GUI (Graphic User Interface) from the command line, allowing a JavaScript file with processing instructions to accept arguments like a URL or file path.

Running a load speed script from PhantomJS’s example library.

PhantomJS is commonly used for test automation and web crawling but it did exactly what we needed: loading a website, running scripts against its DOM and saving screen shots – all in a real browser using JavaScript. PhantomJS comes with an experimental server but we decided to call it from Node.js as it has a lot more to offer in terms of stability and performance. Furthermore we can leverage express, a small but very convenient development framework for Node.js.

The step-by-step process of analyzing the styles for Nurun.com.

In our processing instructions for PhantomJS we analyze the text and background colours of all elements on the page and order them by quantity, giving some, for example, the main background and the main text colour, a higher priority. Next we look for the main text element. For proper HTML5 markup this is simple, we just need to look for the role=”main,” but in reality a lot of websites use old and irregular markup, which requires us to look for common id and class names. If this does not work we simply use the middlemost element – in the hope that this is part of the main copy and not the side navigation. Based on this selection we extract the CSS styling of the text and headlines and return everything as a JSON response back to the user.

If you’re interested in learning more about the technical side of Stylify Me, you can check out the source code of the service layer on Michael’s GitHub.

Stylify Me was a fun, collaborative project to work on. We hope it becomes a useful tool that helps make the design process a little easier.…