Stylesheets

From Qubit Toolkit
Jump to: navigation, search

Some thoughts on our use of cascading stylesheets

Our goal is wherever possible to use existing semantic markup/stylesheet systems, and override as necessary. Compared to creating all our style from scratch, this has the benefit of gaining the experience of other developers and reducing the burden of maintenance. Other stylesheet systems are also more likely to be thoroughly cross browser tested. We can also Google for answers how to solve common problems, something we can't do with our own stylesheets because no one else is using them

Currently we use two systems, Drupal CVS HEAD and YUI

We try to keep our own stylesheets to a minimum, by overriding only what is necessary. We do this in main.css

main.css is configured in view.yml with position: last. This ensures that it's loaded after YUI and Drupal, in order to override them

Contents

[edit] dash, underscore, or camel case?

Drupal seems to use a dash naming style for their CSS classes (e.g. form-item), while symfony uses underscore (e.g. sf_admin_actions). My own preference leans towards camel case, which is how we name everything else in the system (e.g. contextMenu)

One thing to consider is whether the names are legal JavaScript names, in case those two ever need to line up. This saves awkward converting between naming schemes. In this light, camel case is probably the best choice, since it's how we name things in JavaScript

[edit] Existing classes

This is the start of a list of CSS classes already in use in Qubit,

  • .actions - used to indicate lists of contextual links like edit, delete, save, cancel
  • .field - used to identify document fields such as on "show" pages
  • .itemsPerPage - to identify links to more or less search results per page, name from OpenSearch response elements
  • ,login - used on <body> to indicate the login page
  • .page - currently used to indicate static page content, will probably change but is important to keep as high as possible in the DOM hierarchy
  • .publicationStatus - originally used .status, but conflicts with Drupal .status for messages
  • .search - currently used to indicate search forms, this too will probably change

[edit] Classes used from Drupal

  • .description
  • .error
  • .even
  • .links
  • .odd
  • .section
  • .sidebar
  • .status

[edit] HTML 5

The semantics of new elements in wikipedia:HTML5 may be good inspiration for classes and markup?

The Drupal Markup Style Guide references HTML 5

Here's a article on the new HTML 5 elements, also referenced by the Drupal Markup Style Guide, http://www.ibm.com/developerworks/library/x-html5/

[edit] Style guide

Questions a style guide would need to answer,

  • When to use <div class="section">, <div class="content">, <p>
  • When to use <h1>, <h2>, <h3>
  • When to use <div class="description">
  • When to use <ul class="links">
  • When to use class .element-invisible

[edit] Heading

  • The title of a page should be marked up with <h1>. It may not be the only <h1> on the page - the site title may also be marked up with <h1>, but the two should be distinguishable by their context (we may revise this if necessary)

[edit] "Actions"

To markup collections of links, e.g. menus, toolbars, navigation, etc., we use <ul> and the Drupal ".links" class, e.g.

<ul class="links">
  <li><a href="#">Home</a></li>
  <li><a href="#">Add</a></li>
  <li><a href="#">Next</a></li>
  [...]
</ul>

To further distinguish the special case of links which are actions, usually to do with the current context, e.g. actions on the current resource like "Edit", "Delete", etc. we use an additional ".actions" class,

<ul class="actions links">

HTML 5 has some structural elements for "navigation", http://www.ibm.com/developerworks/library/x-html5/#N10115

[edit] Menu

Drupal uses,

<ul class="links">
  <li class="active">
    <a class="active">

We can certainly add the "active" class twice, but in the interests of simplicity, let's start with just once

We should start with <li> because CSS can check whether a parent has a class, but not whether a child does

[edit] Page style

Should we,

  1. allow specialized stylesheets for special page types
  2. include enough semantic information for one stylesheet to style specialized pages

So far we've been doing #1 (edit.css, delete.css) - but #2 may be easier

Trying by adding <div class="page"> to static page template

Might change later to pageModule of modulePage...

[edit] Notes

http://maxdesign.com.au/presentation/inline/

Freebase uses <div><h3/><ul/></div> for name/value properties

Another possibility is <dl/>, but I haven't seen this used anywhere

^ Hakon Wium Lie recommends this, http://www.princexml.com/howcome/2009/wikipedia/infobox/

We ended up using <div> and <h3> like Freebase instead of <dl/> because that way name and value have a common unique ancestor, unlike <dl/>

Consider linking this, coding standard, and editorial style guide?

Drupal Markup Style Guide

Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox