For a web designer, remembering the properties of all the CSS classes, IDs and elements that have been written, often over multiple stylesheets, can be a real task. Often developers need to keep referring back to their CSS to check the definitions, look at the properties and classes and find the right element. This is time wasted. Time that could be spent on more constructive endeavours.
MacRabbit’s CSSEdit eases the burden slightly by displaying a graphical representation of each CSS definition in the sidebar. This however, is still missing information on positioning, padding, margins, borders background images, background properties, font styles and various other vital pieces of data. Of course, it would be unreasonable to stipulate that kind of display in the application as it’s meant to be a CSS editor. Click on a definition on the left to bring up the full CSS.
But the web designer is not doomed to be eternally editing CSS. The HTML needs to be written as much as the styles, and it’s really very obtrusive and awkward to have to search through your CSS to see what a particular class or ID looks like. Which where style guides come into play.
A style guide is critical for any designer undertaking a project of a decent size. Not only does it help you remember your classes if you’re working on multiple projects or if it’s been a while, it’s also a great way to get instantaneous updates, and easy cross-browser rendering to see what your styles look like in different browsers. A style guide will also benefit any other person working on the same website who may not be familiar with the styles you have created.
The benefits of having a style guide are numerous, and fairly obvious (Refer to this article), but often the time and effort taken to write up a style guide can be a deterrent. Not any more.
stylesay
stylesay is, to my knowledge, the first ever style guide generator, and it couldn’t be easier to use. It’s been written with a single, clear goal in mind - to provide designers with a resource from which CSS style guides can be created quickly, and with minimal effort.
Currently, stylesay is still being developed, but the feature-set is now near enough to completion that it does its job. There is no syntax to learn; stylesay recognizes CSS elements, classes and IDs, so you can copy and paste portions straight from your stylesheet. For the moment, the default text includes some basic documentation in the comments, but that will eventually be moved when the project goes final.
Would you find stylesay to be useful? Or are there any features that you would like to request?
4 Comments so far
Leave a commentdude - this is amazing - please don’t abandon this - I’ve been looking for this for over a year. Only problem I found was displaying absolutely positioned elements (they need to be surrounded by div’s a style of position:relative in order to flow visually)
spoken by Jeromy on October 25, 2007 6:47 am | Permalink
Jeromy, thanks. I put it back up for now, but I doubt I’ll get a chance to really work on this properly until… later. But I’m glad you find it useful
written by Ankur on October 25, 2007 4:06 pm | Permalink
Not sure if you’re still working on this, but I did find one bug - the generator chokes on hyphens - so a class called ‘.home-nav’ for example would get displayed in the generated guide as ‘.home’ - any chance you know why that’s happening?
proclaimed by Jeromy on July 8, 2008 5:01 am | Permalink
Thanks again Jeromoy; it should work now.
recorded by Ankur on July 8, 2008 11:00 am | Permalink
Leave a comment