Sass structure

This document is outdated Please see Howto Grunt

This document explains the scss files structure in bluebottle and how to override it.

The bluebottle scss files are located under /bluebottle/common/static/sass.

The scss files follow the convention of bootstrap by defining many variables in _variables.scss. These variables are all declared using !default, so can be easily overrided in your client application. For simple changes to layout such as changing colors, sizes, icons or logos, it should simply be done by changing a variable. For more drastic changes, you can override the styles you need in your client stylesheet.

Setup

This guide assumes that you are using compass to compile your styles.

In your client project you should add an import path, that points to your local bluebottle installation.

in the static folder, in config.rb:

add_import_path "/Users/example/code/bluebottle/bluebottle/common/static/sass"

You should now be able to reference the bluebottle scss files via simple @import statements. You can completely customize your css like this.

Cascading

Compass imports works like this: It will first look in your local folder, and if the file doesn't exist there it will grab it from bluebottle if it exists there. Thus you can overwrite files in bluebottle completely if that should be desired.

A normal setup is this:

• You supply a _variables.scss and a screen.scss. In _variables.scss you supply your variable overrides, and screen.scss adds all needed styles via import. You can copy this from bluebottle if you want.
• Your screen.scss should include _variables.scss from bluebottle first and then from your project, to override the bluebottle settings

The css is only compiled on development machines, so don't worry about breaking stuff when going live. As far as sass and compass is concerned, there is no "live".

Variables

Below is a list of all variables in bluebottle:

Variables	Usage
$base-font	Used for setting the base font
$border-radius	Used for settings the border-radius
baz	baz

This document is still work in progress.