Classes

Classes are general and written in English. Do not give every element on every page a unique class. Do not give elements very specific names. Classes are inherited from their parent element. Classes are combined together to style elements uniquely.

Classes are used to add structural meaning. A good class describes more specifically the function of the element to which it is applied. A bad class is something like red ; a good class is something like warning. (Imagine that you were creating a skin for people with red-green color blindness, and you wanted to change the appearance of words using the class red to be the color blue! That would be very confusing and therefore harder to maintain.)

Class names are short and, ideally, English words in common usage. If you find yourself combining several words to make a class, like english_user_information, stop and think whether you could use several more general classes: english user information.

Our classes are how we describe and document our data, so it's very important to use them consistently and accurately. If you find a class that doesn't fit this system, it's probably a mistake and needs fixing. The main exceptions are classes for jQuery plugins, since it is easier to keep plugins up to date if we don't modify the class names. However, if you're writing new jQuery for the Archive, please keep our naming system in mind.

Navigation and Actions

• .navigation
• .landmark
• .submit
• .filters

Metadata Grouping

• .index :list of blurbs
• .blurb :standalone metadata of work, collection, bookmark, shown in indices
• .meta :complementary meta data shown at page head
• .profile :home page metadata
• .preface :complementary metadata surrounding individual work (notes, description, summary)
• .stats :sublist of countable metadata (hits, comments, bookmarks, wordcount etc)

Content Type

• .work
• .series
• .bookmark
• .collection
• .chapter
• .comment
• .tag

Meta data

• .heading
• .title
• .byline
• .summary
• .notes
• .footnote
• .description
• .faq
• .cast
• .tags
• .warning
• .datetime
• .email
• .birthday
• .location

Grouping and spacing presentational elements

• .clear :null presentational, clears both
• .module :group several blocks (default: position:relative, hasLayout)
• .wrapper :null presentational, wraps block (default: drop shadow)
• .sidebar :indicates page with #dashboard child of body

Roles and States

Roles

• .anonymous
• .orphan
• .pseud
• .user
• .admin
• .wrangler
• .userstuff

States

• .requested
• .required
• .current
• .odd
• .even
• .own
• .draft
• .new

What Kind and Where?

It might be useful to look at some diagrams of pages on our archive, to really understand that in CSS, we write a path to places in our XHTML; we don't need to give everything a unique name, because we describe it: "what kind and where".

Rails Classes

Rails automatically generates a unique class on #main on each page, named by the view partial #main calls. This means that each page on the archive can have rules set independently, which is very useful for tweaking the layout, but ought not to be used as a core technique.

http://archiveofourown.org/media = #main.media-index

http://archiveofourown.org/users/lim/works = #main.works-index .sidebar

System Messages and Warnings

This is a work in progress. Could you design a system of messages and warnings? Check the issues list!

• .warning
• .error
• .message
• .instructions
• .notice
• .flash
• .symbol, .symbols
• .question
• .help
• .important
• .note

← Back