fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] dw_design2010-12-23 12:41 am

List of Classes

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.
cesy: Home is where the <3 is (Dreamwidth) (Dreamwidth)

[personal profile] cesy 2010-12-22 04:57 pm (UTC)(link)
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: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2010-12-22 05:51 pm (UTC)(link)
For info, the visited links thing is bug 1386.
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2010-12-22 06:10 pm (UTC)(link)
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.
Edited (I always forget some words. *sigh*) 2010-12-22 18:14 (UTC)
foxfirefey: Fox stealing an egg. (Default)

[personal profile] foxfirefey 2010-12-23 10:15 pm (UTC)(link)
I am really impressed at how much your redesign cuts down!
jeshyr: Blessed are the broken. Harry Potter. (Default)

[personal profile] jeshyr 2010-12-28 02:19 am (UTC)(link)
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!