CSS Guide for the Blue Cheese theme implementers

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
You are viewing a wiki page. You are welcome to join the group and then edit it. Be bold!

To provide standardized rules for layout, typography, navigation, multiple media styles and browser resets, the Blue Cheese theme design is based on the 960 grid system. The new design utilize the 12 column grid, where each of the columns is 60 pixels wide, the gutters between them are 20 pixel wide and on the each side of the page there is a 10 px margin, giving the page a total width of 960px.

Please note that this guide is not a 960 GS tutorial. It is required that the theme implementers and contributors are familiar with the 960 GS framework and it's design principles. For more information and references please visit the 960 GS official web site at http://960.gs.

It is of great importance that drupal.org has 100% valid semantic XHTML. Properly written HTML and CSS will eliminate possible cross browser problems.

General CSS Practices to manage, organise and develop CSS files.

Code must be easy to read. When writing CSS for Blue Cheese follow Drupal’s css coding practices.

Always document your code and do not use undocumented hacks in your css files.

Using in-line CSS is not allowed and cannot be used.

Selector naming conventions:

  • in conjunction with the HTML standards, name your selectors appropriately and properly. Remember that these selectors will be representing Drupal in the future. Do not use inappropriate or cryptic language
  • use only lower case letters
  • separate words using - (hyphen) only. Do not use underscores or other special characters

Whether a selector is a simple element or a rich contextual representation it is always written in the following manner:

selector {
  property-1: value;
  property-2: value;
}
  • selector is never indented
  • when single, a selector is followed by a space and the opening brace
  • property is indented by 2 spaces followed by colon
  • one space separates a value from the property
  • there is always a semicolon following the value
  • the closing brace is not indented

In a case where selector has only one property the code may be written in one line as:
selector { property: value; }

When several selectors share the same declarations, they may be grouped into a comma-separated list. Each selector must be written on a separate line.

selector-1,
selector-2,
selector-3 {
  property-1: value;
  property-2: value;
}

Where available, to set several properties at once in a single declaration, shorthand properties can be used:

selector {
  property: value-1 value-2 value-3;
}

Combine selectors and use inheritance wherever possible:

Replace

selector-a {
  property-1: value-A;
  property-2: value-B;
  property-3: value-C;
  property-4: value-D;
}

selector-b {
  property-1: value-A;
  property-2: value-B;
  property-3: value-C;
  property-4: value-E;
}

with
selector-a,
selector-b {
  property-1: value-A;
  property-2: value-B;
  property-3: value-C;
}

selector-a {
  property-4: value-D;
}

selector-b { 
  property-4: value-E;
}

For additional basic Drupal coding standards please visit http://drupal.org/node/302199

Blue Cheese Theme specific rules

CSS is organized in a set of modular css files stored inside the styles folder within a theme. When working on their assignments, implementers should add a new custom CSS files to the same directory. The new files should be named accordingly and the link to the file should be added to the local bluecheese.info file. The theme maintainers may decide to merge or keep the styles in separate documents upon the review of the code.

For design direction and page appearance, implementers should refer to the prototype section of the Blue Cheese theme at https://infrastructure.drupal.org/drupal.org-style-guide/prototype.html

As previously mentioned, the Blue Cheese theme is based on the 960 GS framework, hence all the page regions are defined by column width.
Grids are wrapped in a container div. The "master" container for this theme has the class .container-12 {width: 960px;} and it is defined inside the layout.css file. Theme implementers and contributors can use this file only as a reference. No changes to this file are allowed.

The other available grid classes and their respective widths are:

.grid-1 { width: 60px; }
.grid-2 { width: 140px; }
.grid-3 { width: 220px; }
.grid-4 { width: 300px; }
.grid-5 { width: 380px; }
.grid-6 { width: 460px; }
.grid-7 { width: 540px; }
.grid-8 { width: 620px; }
.grid-9 { width: 700px; }
.grid-10 { width: 780px; }
.grid-11 { width: 860px; }
.grid-12 { width: 940px; }

There cannot be any other arbitrary set classes and custom widths on the site. To manage margins on nested divs, implementers should use only the supplied alpha and omega classes. The alpha class is meant for the first nested element and it will remove left margin, while the omega class is to be used on the last nested element and it removes the right margin.

Reset browser defaults:
Browser resetting in the Blue Cheese theme is handled through the reset.css file. This file should not be changed or altered by contributing themers in any way.

Typography:
Drupal.org website style guide, Typography section, defines Font families, colours and sizes for the site.
To allow for font size resizing in a browser we will convert fixed px measurements to relative values. 12px p size would be reset to 75% and consequently be equal 1em.

Selectors would then be*:

h2 {
  font-size: 2em;
  color: #000;
}

h3 {
  font-size: 1.75em;
  color: #555;
}

h4 {
  font-size: 1.33em;
  color: #555;
}

h5 {
  font-size: 1em;
  color: #000;
}

h6 {
  font-size: 1em;
  color: #333;
}

p {
  font-size: 1em;
  color: #333;
}

*Also switched colour codes, #000000 to #000, #333333 to #333 and #555555 to #555

These classes are defined in the typography.css and should not be altered by contributing implementers.

CSS Sprites:
Only sprites and images supplied with the theme and available inside the images folder can be used inside the theme. Implementers are not allowed to extract individual images from a sprite or to alter images in any other way.

Only relative addressing can be used in selectors for adding images:

selector {
  background-image: url(../images/image-name.png);
}

Colours:
Only the following colours can be used when declaring color property:

Primary colours
Dark Blue #0678be
Dark Blue 50% #83bcde
Dark Blue 40% #9cc9e5
Dark Blue 30% #b4d7eb
Dark Blue 20% #cde4f2

Light Blue #53b0eb

Lime Green #96bc44

Secondary colors
Navy Blue #064771
Light Navy Blue #0d7dc1
Light Navy Blue 50% #9ecbe6

Pale Yellow #f6f6f2
Light Yellow #e6fcb6

Gray #9d9d93
Black #000

Typography Colours
Gray body text #333
Header h1 #000
Gray headers h2-h4 #555
Gray headers h5-6 #333
Blue links #0089dc

Navigation:
The theme uses Drupal menu system, unordered list. Implementers should not make any changes to the site navigation styles. The header and footer region of the site are maintained by the theme's lead implementers only.

The Masthead Main Navigation is fixed in size, color and order of headings. It appears at the top right hand side of every page on the Drupal.org site. The class for the Masthead Main Navigation is lightweight, type based with no sprites or background images used. The type size is 0.916667em (11px).

The Masthead Tabs are using sprites images/sprites-header.png for background property. The Font size should be inherited and equal to 1em.

The Content Tabs are using sprites images/sprites.png for background. The Font size should be inherited and equal to 1em.

The site's footer is the only allowed exception to the overall grid design and it consists of 5 navigation blocks. A custom class will be used to position columns.

List of CSS files

Name Description
admin.css
debug.css
forms.css
ie6.css Contains specific hacks/fixes for IE6 browser
layout.css Provides the rules and classes for the 960 grid system
reset.css Resets default browser style and overrides certain default Drupal style
sprites.css
styles-rtl.css
styles.css
table.css Styles for tables
typography.css Sets general type style. Must submit an issue to edit.
AttachmentSize
Blue Cheese Colors.png51.33 KB