CSS Gurus Help - Style Guide?

Hello all,

I have been trying to find out something, but I don’t have enough knowledge to know what it is.

It’s basically like a sample sheet design which highlights the CSS you will use. So it describes the link colours, and so forth. Normally designers go through this before designing the websites.

I am looking for the technical name, so I can do more research on it. Apparently good designers go through this process. :frowning: Kind of makes me look bad if I put it like that.

If anybody know what I mean, or thereabouts please do let us know.

Sometimes when I get a PSD from a client there will also be a PDF attached that documents all the colours used, link states, fonts and font-sizes, how the rollovers should act and describe all the other dynamics of the page they are looking for.

However, it doesn’t really have anything to do with html or css but just what they want. It’s very useful from my point of view because often I just get the PSD with no information about link states or rollovers etc.

I think you’re right. I don’t know what I was thinking. I thought there might be something else I was not doing that everybody was, so I thought I would run it past the forum.

following your link, it shows how you can choose a theme for an UI, and points out at a css declaration of the current theme that makes the label have that colour. the themes are css coded for that application: e4 and are an improvement in the UI since e3.

i’m not sure “labels everywhere” would constitute a viable option for you. the example there is not about a presentation of a web project, it’s about a new feature of a new product version.

imagine what would mean in waisted time drawing “labels everywhere” on your web page screenshots to point out useless css, as the client would hardly know what to read there :slight_smile:

Some people use it because they forget certain trends they use for specific elements (and some people can’t remember what color hexes equal).

Others use it for hilarious messages in their code for anyone snooping about.

I don’t use it purely because it’s just unnecessary bulk that’s adding bytes to the stylesheet. :stuck_out_tongue:

That’s why I didn’t recognise it as I never do that. :slight_smile:

It’s probably useful during development but could be a nuisance afterwards especially if the design is changed frequently and you would need to remember to change the comments as well.

However, a lot of this is down to personal preference and if it makes life easier then that’s fine.

I thought people did it because they were kind of lazy. “What was my link color again? scroll up to top"oh yeah…”

it’s called css style branding :slight_smile:

this is an example of what you mean?

It’s like this - http://download.eclipse.org/e4/downloads/drops/R-0.9-200907291930/images/contact-css-style.png, but labels everywhere.

I wish I could find a better example, but examples are scarce.

can you write/make an example, no matter how loose?

I am not sure if this is what you mean, but as fledgling CSS coder and Seasoned art director I got into the nearly unbreakable habit of breaking my CSS up with the following comments:

/* utility classes*/
/* layout*/
/* Typography /
(/general stuff/)
(/IE sucks)/

tho some attributes will overlap ( on rare occasion padding and margin from Typography needs to go in Layout or vise versa) I can find font family, sizes styles and colors… exclusively in typography and can nearly change the entire feel of a page typographically w/o being concerned about the layout or anything else . Other than that there is using descriptive class and ID names ( as opposed to “.that” or “#a”).

Oh sorry, I got distracted, that’s not what I mean. It normally comes with the design and it has everything labelled in CSS format. It’s something done before development of the final design. It something that helps you communicate to the client. So if they wanted a particular colour theme or style then this would help you communicate that prior to development. Seems like over documenting everything, but it appears many don’t use this.

I personally have never done this, but I am looking at ways to improve my workflow so I am exploring different methods in doing things. I have the ere feeling I am going to stick to the way I am doing things now.

I don’t know it’s official name, it there is one :frowning:

I got that once. But this is not what I mean. I think I overcomplicated things. It’s something that designers do, which they use to present the information to clients. I can’t remember the name though.

I never understood comment usage, surely if you understand CSS you can read a stylesheet like reading a book and contextually know what it’s doing? :confused:


I’m not sure what you mean exactly :slight_smile:

I don’t think you talking about resets and I can’t think of anything else.