Experimental project

This is a sandbox project, which contains experimental code for developer use only.

Clarus is a SASS-enabled starter theme based on Susy for building custom responsive Drupal 7 themes. It uses semantic HTML5 elements and SMACSS classes for cleaner markup.

This theme is not meant to be used out of the box. Rather, it serves as a blank slate for projects which require a bespoke theme, thus this starter theme has all theme-able elements stripped of styles and layouts so the themer has a truly blank canvas to work with.

Included with this theme are basic extends and mixins for the following:

  • clearfix
  • removing all list styles
  • centering block elements
  • image replacement
  • set element invisible on screen but visible for accessibility
  • changing placeholder colours
  • changing selection styles
  • css shape mixins
  • breakpoint mixins
  • type-scale mixin

This theme uses Gulp to compile the Sass files to CSS. It also makes use of BrowserSync for live-reloading.

Requirements

  1. NodeJS - You can use the installer, but I personally like using Homebrew
  2. Bower - npm install -g bower
  3. GulpJS - npm install -g gulp
  4. Browsersync - drush dl browsersync -y
    • This Drupal module is required for Browsersync to work. Go to Appearance > Settings and check Enable Browsersync.

Getting started

  • Clone this repository into your working directory.
  • Navigate to the directory and run npm install. This will install the required node modules for the project.
  • Also run bower install. This will install Susy for this project.

Running Gulp during theming

  • Run gulp. This will run the Gulp tasks needed for:
    • compiling Sass,
    • clearing cache after changes to info, inc and php files
    • watching for changes to relevant folders and reloading the browser accordingly.

Project Information