Using Gulp for managing themes

Recently at The Hideout we have been working on a large project whereby we had to completely refresh the online look and feel of multiple restaurants owned by a single group. Each restaurant has their own look and feel and that needed to be illustrated, whilst keeping the sites consistent in layout in order to link back to the group brand. Before beginning the development of the sites from the designs, we needed a solid game plan to ensure the foundations were set for us to overcome the obstacles of this project.

The challenge

The challenge we discovered is that we were going to be using the same website for five or more restaurants, each with their own brand guidelines. The guidelines outline their colour palette, typefaces, and use of the logo. Each website needs to use the same mark-up and share the majority of the CSS, but be able to change the colours for every element, the heading/body typography and their font sizes as they will differ in base size. The client also has growth plans so the code needs to be written to enable us to duplicate the base layout styles but modify the theme with relative ease, ensuring value for money moving forwards.

The majority of web projects at The Hideout I find myself using the compass menu bar application for quick compiling of sass files into a browser compatible CSS document. For this project I needed to be able to compile the themes into separate CSS files of their own, something that compass could not handle. Instead I opted to use Gulp, which is a popular task runner for web development.

The gulpfile

Here I’ll go through the different parts of the gulpfile. It’s a relatively small document with only three methods; sass-theme, sass and watch. Before anything can function, we need to include Gulp, and any other plugins to the gulpfile at the top of the document:

// Include gulp
var gulp    = require('gulp');

// Include other required plugins
var sass    = require('gulp-sass'),
sourcemaps  = require('gulp-sourcemaps');

The sass-theme method is being used to loop every theme sass file within the /sass/themes directory, check for errors, compile them and output them in css/themes/.

// Loop sass theme files and output separately.
gulp.task('sass-theme', function () {
return gulp.src('./assets/sass/themes/*.scss')
	.pipe(sourcemaps.init())
	.pipe(sass({
	outputStyle: 'expanded',
	}))
	.on('error', sass.logError)
	.pipe(sourcemaps.write())
	.pipe(gulp.dest('./assets/css/themes'))
});

The sass method does the same, but compiles the base theme style main.scss only.

// Compile main sass file
gulp.task('sass', function () {
return gulp.src([
		'./assets/sass/main.scss',
	])
	.pipe(sourcemaps.init())
	.pipe(sass({
		outputStyle: 'expanded',
	}))
	.on('error', sass.logError)
	.pipe(sourcemaps.write())
	.pipe(gulp.dest('./assets/css'))
});

The watch method does what it says – it watches the sass files and runs the two sass methods anytime a file changes.

// Watch Files For Changes
gulp.task('watch', function() {
	gulp.watch('./assets/sass/**/*.scss', ['sass', 'sass-theme']);
});

To run the gulpfile, I point my terminal to the project folder and type gulp watch. This continues to run in the background until I close the terminal window.

Base main.scss file

// 1. Mixins and variables
@import 'base/mixins',
		'base/variables';

// 2. Core theme config
@import 'themeBase';

// 3. Base styles
@import 'base/resets',
		'base/slider',
		'base/base';

// 4. Layout files
@import 'layout/header',
		'layout/footer';

// 5. Components
@import 'components/button',
		'components/forms',
		'components/social-media',
		'components/sub-nav',
		'components/tables',
		'components/typography',

// 5. Page specific styles
@import 'pages/homepage',
		'pages/sitemap',
		'pages/subpage';

I’ve included all relevant files in their required order – sass mixins, resets & base styles at the top, followed by layout styles for the header and footer, components and then page specific styles and overrides at the bottom. The one file I haven’t mentioned yet is themeBase.scss. This is the location for our core config file for the variables which we will be duplicating any time we need to create a stylesheet with new theme styles.

Theme Config

This is exactly what was produced in the config file, a list of variables, which reference something within any of the sass files. We can change it’s colour, background colour, font size and so on. It’s like a traditional variable, but if we define the same variable somewhere else without the !default tag, like in a restaurant specific file, when compiled it will choose the new variable over the !default. Here’s an example use case:

// Define our primary styles
$primaryColour:#002f24 !default;
$secondaryColour:#002e21 !default;
$colorDark:#000000 !default;
$baseFontSize: 16px !default;

// in our restaurant theme file
$primaryColour:#ffffff;
$secondaryColour:#000000;
$colorDark:#090909;
$baseFontSize: 14px;

This may seem like a workaround method, but if the config file is defined with enough detail, any developer who has been tasked with adding the styles for a new restaurant should only need to duplicate and access one file in order to create the new theme. The alternate method would be to copy up the SASS, go into each file and modify the styles individually. Not only will this be a more time consuming process, but also it will create duplicates of the same set of files, one for each restaurant. This will become difficult to maintain in the future if there is a bug that needs to be fixed across every restaurant site.