Theme Scheme

theme-scheme.md

Theme Scheme

Basic Goals

• Fast development
• Flexible styling across domains

Overview

The idea is to create a single _common.scss file, which is included everywhere. _common.scss serves two purposes: to access re-usable SCSS mixins, and to @import one of several _palette.scss files.

We would have a unique palette file for each publisher or top-level domain. At deploy we compile all CSS into a directory for each theme.

Visitors to FindTheData.org receive entirely different CSS than visitors to MooseCat.com, as the CSS has been recompiled with different color constants. Could still override any styling in the _palette.scss file if we want to have something special/custom on a specific domain, beyond custom colors.

Example

Folder Structure:

• modules
  • (.scss files scattered everywhere)
• themes
  • ftb1
    • (more .scss files everywhere)
• _css (NOT version controlled)
  • findthebest
    • sites/…
  • findthedata
    • sites/…
  • weatherdb
    • sites/…
  • …

_common.scss

// Included Everywhere
@import 'palette'

// Mixins and Whatever
@mixin box-shadow ($args) {
	-webkit-box-shadow: $args;
	-moz-box-shadow: $args;
	box-shadow: $args;
}

_palette.scss

// Example: FindTheBest.com Palette

// Theme-wide color constants:
$accentColor: #0bf;
$baseColor: #fff;
$darkGrey: #4d4d4d;
$lightGrey: $ccc;

// Any other overrides:
.logo {
	background: url("/moosecat/background.jpg");
}

I'm not exactly sure how the 1:many compilation would work, but at worst it would involve running Compass once for each theme, giving it a different path argument each time so that a different _palette.scss is imported by _common.scss.

Potential Wins

• Styling is faster, for the developer, than it is now (no need to edit PHP).
• Styling becomes something that can easily be done as you develop, rather than being a chore that we go back and do as bugs are reported. Just use $accentColor instead of #0bf, and so on.
• Compared to creating classes for every theme-able CSS property, this will cost less development overhead once it is configured. Style remains separate from page structure, and the same block of HTML can be styled differently in different contexts without needing to add special classes.

Potential Losses

• Compiling SCSS will be slower, both on locals and on deploys. Saving compare.scss will require a recompile of one file for each of 15-30 themes. Offhand, I would expect this to add 60-80 seconds to the deploment process.
• The path to any given compiled CSS file now depends on which subdomain you are on. The THEME_PATH global can be adjusted accordingly, but we need to plan for this.