Working with Bluecheese

Last updated on
27 July 2016

Bluecheese is custom Drupal.org theme. The theme must be implemented in accordance with the Drupal.org style guide. This theme is only for use on official Drupal.org sites.

Working with Sass

Bluecheese uses Sass, a CSS preprocessor. The source files are in the directory sass/. You should not edit CSS files directly, as they will be rewritten every time the Sass is compiled.

Installing dependencies

Bluecheese includes a Gemfile which lists the dependencies for compiling Sass. You can use Bundler to automatically install the correct dependencies.

Compiling Sass

Sass files will not compile automatically. If you wish to compile the files, and generate usable CSS files you have two options:

  1. One-time compile:
    $ bundle exec compass compile path/to/bluecheese
    This command can also be run from within the Bluecheese directory as:
    $ bundle exec compass compile .
  2. Compile on every filesave:
    $ bundle exec compass watch path/to/bluecheese
    This command can also be run from within the Bluecheese directory as:
    $ bundle exec compass watch .

Bluecheese only compiles one CSS file, style.css.

Sass Folder Structure

The main style.scss file aggregates the three main partials, ‘Common’, ‘Drupal.org’, and ‘Utilities’.

Common

‘Common’ contains styling properties common for all *.drupal.org sites. Such as header and footer, page layout, comments styling.

Drupal.org

‘Drupal.org’ contains styling properties specific to the Drupal.org website. Such as project and issue queue styles, landing pages (/community, /about, /drupal-7.0).

Utilities

‘Utilities’ contains variables, mixins, and helper functions. There should be no element styling inside this folder.

Sub-folder structure

Each of the 3 folders contains a scss file that aggregates every partial within their respective sections.

Styling for particular section, page or website element is contained within it's own scss file.  

sass/partials/design/drupal.org/download.scss 

Currently there are no sub-site (e.g. g.d.o or api.d.o) specific styles in Bluecheese. In case such styles appear in the future they should be placed within a folder pertaining to that site.

If a style is used on more than one page or section in the theme, it should be abstracted into a reuseable component and placed within the ‘Common’ folder.

Sass plugins

  • Susy
  • Breakpoint

Templates & function overrides

Like any theme, we override .tpl.php files and themeable functions, when needed. Site-specific code, the drupalorg module, should not be overridden, change drupalorg itself. Key modules we are using, like project usually shouldn't be overridden, unless the change really is specific to Drupal.org. In general, try not to override it is less code to maintain and shows off the modules we use, and Drupal core.

Help improve this page

Page status: No known problems

You can: