Clarus

Drupal 8 version

Clarus is a Sass-enabled starter theme for building custom responsive Drupal 8 themes. 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 is based on Stark, which removes all classes and is a truly blank canvas.

The Sass files in this theme are loosely based on Harry Roberts' ITCSS methodology and are split into partials. Feel free to add on or change them as you wish. This theme uses Gulp to compile the Sass files to CSS. It also makes use of [BrowserSync](http://www.browsersync.io/) for live-reloading.

Requirements

1. NodeJS - You can use the installer, but I personally like using Homebrew
2. GulpJS - npm install -g gulp
3. 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 yarn install. This will install the required node modules for the project.

Running Gulp during theming

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

Drupal 7 version

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.