List of Classes

[fu]

I've been working on cleaning up the design of Dreamwidth. Long term, the goal is to make the design coherent. On this first pass, I only aim to consolidate (most of) the existing classes and elements, collapsing to one class and styling instead of a couple dozen similar-but-different ones on each page, where appropriate.

Side effect, each of the site skin stylesheets is now lighter by something like 10kb *g*


I've thrown up a static page with a list of classes and styling for each class.


The design is not final. But assuming there are no huge glaring issues, I'd like to go ahead and commit this version or this version with some tweaks. (There shouldn't be a huge difference from the current appearance yet).

This doesn't mean that we shouldn't talk about what the design should look like! Just that I think the current code is a good balance of cleanup and not breaking existing appearance, and that I'd like to be able to commit at this stage rather than holding it up forever while we work on a polished design (so let's discuss right here, right now, but I want the overarching design changes to go in the next patch please, and not hold up the commit on this patch)


We need to work on cleaning up the HTML so that the styling / new classes look good when applied to the HTML. As we clean up our HTML, some of the existing classes will go away; that's good, we want that. There's quite a few ridiculous CSS classes in there that are meant to be temporary (say, for example, action-bar and action-box ;-))


For coders/frontend designers:

Use the current global classes listed on /dev/classes as much as possible, instead of defining new ones.

If you're adding a new class to any page, add a sample usage demo on /dev/classes (unless it makes no sense to, but you should try to have it make sense to)



For the dev-oriented among you, I have uploaded patches to Bug 3243 - Need consistent styling across the site

If you apply the patch, and restart your servers, you will find the live page for my static HTML mockups in /dev/classes.

Comments

[cesy]

Minor thing, but on Tropo purple simple forms, the gap above a text box is tiny on purple lines but fine on grey lines.

Also, you've given examples of links, but not visited or active links, which should ideally be different colours for accessibility.

The warning-box also stands out more to my eye than the error-box, so that could be a future improvement.

This looks brilliant, though, and I'm really glad all the classes are getting tidied up like this - thank you.

[ninetydegrees]

For info, the visited links thing is bug 1386.

[fu]

Oh good point. Hm, I admit I'm not sure how to mock up an active link though (I am cheating with the visited link by making it point to the current page *G*)

And thank you for the other things you brought up! Will keep them in mind.

[ninetydegrees]

I'm mostly familiar with Tropo Purple so I'm only gonna comment on this one. I think current colors for (alternating) rows is a light gray (see Manage Communities for example), which I prefer to the purple of the new design. It's far easier on the eyes and safer in terms of text vs background color contrast. Speaking of contrast, the text color of .status-hint and the disabled tab is far too light for me. .status-hint is pretty invisible actually.
I don't mind that some "tables" now have borders on the sides but I must say I find the invisible borders of .tab-header weird. I do have the impression they're missing.

Oh, one more thing: +1 for one style for buttons. I expected them all to look like "Submit".

Otherwise, congrats on an excellent job.

[fu]

Re: alternating rows

Have tweaked what I could in the things you pointed out.

And yeah *ruefully* The submit buttons are one of those things I'm setting aside for the future -- I tried doing them before, but found that trying to change them all at once rendered the forms hideous in some instances.

Thank you for your advice *g*

[foxfirefey]

I am really impressed at how much your redesign cuts down!

[jeshyr]

Wow, those are seriously helpful pages to have and I am massively impressed at your code-cutting-down-ness! (Incidentally, what's the current size? I'm curious as to what 10k is in percent :)) (geek!)

With these, in theory, somebody could design a new "skin" for DW just via CSS, as long as they didn't need HTML/code changes. That's a cool idea :) It makes me want to make a marginally-less-boring version of Lynx which has all the accessibility features in place but a bit more colour included.

Accessibility-wise, I'm glad to see the :focus and :active stuff hasn't been messed with, and so tabbing around works visibly on all these layouts. No glaring accessibility issues in any of them, although I didn't check much - not expecting any since (a) code cleanup rather than mass change, (b) you are smart and eddicated about it.

Helpful useful project which will aid design and coders in the future. WIN! Thank you!

[fu]

Hmm, cleanup chopped off between 35-40% in each case:

celerity went from 24k to 14k
gradation went from 28k to 18k
tropo-red and tropo-purple went from 17k to 11k


Theoretically it makes it much easier to make a new skin! In practice, we're not quite there yet, but we are edging towards there *grin*