Guru Theme

8.X

Demo to see how the theme looks in a sample Drupal site Apply theme

Guru is a Drupal 8 base theme with kss styleguide.

It’s not a ready made out of the box theme you just need to enable, but a a gulp based theme workflow to enable in browser style guide driven and mobile first theme development.

Target audience

Target audience for the guru theme are frontend developers want to use SMACSS to structure SCSS and KSS to document the SCSS code.

The focus of Guru theme is fastest possible compilation of SCSS and a documentation of code.

By rendering a living styleguide out of the SCSS comments section (think of it as PHP doc for SCSS) you gonna have great reference for your Co-workers, PM’s and Designers. It will help you to avoid CSS bloat because you and your team will know what you already have implemented and enable you a high level of code reuse.

The look and feel of the theme is entirely in your own hands. You will have a bunch of features enhancing development speed and tons of examples rendering into a full styleguide. The styleguide comes with a template and can be adapted to your requirements very easily.

Workflow Features

libsass for fast scss compilation
Live Editing of scss in site and styleguide using browserSync for an amazing developing and testing experience
singularity.gs css grid system (but you may use you own favorite grid system)
KSS-Node to create stylesheets and maintain your style library
The styleguide enables you prototyping in SCSS with custom HTML in the comments section
SCSS linting to drupal SCSS standards while live editing, to enforce clean readable code
sourcemaps - See where your SASS code is located in browser inspections.
autoprefixer - Don’t care about vendor prefixes anymore, they’ll be done for you
gulp as a build tool
SVGgo and inline SVG to easily use inline SVG images.
Automated documentation of SASS mixins in the styleguide to focus on code reuse
Fully variableized SCSS code. E.g. change colors in only one place.
KSS Styleguide Template integrated and ready to modify within the workflow
Automated minifying of JS and CSS code
Compatibility ie 9+ (like drupal core)
Drush based subtheme generation
Compatible with Docker environements and Vagrant (Drupal VDD)

Design features

Design features are not considered as the main focus of this theme, but there are some. You may use or decide to do your own.

No-JS burger menu for the primary menu
Full width backgrounds for sections
Tons of KSS example code to structure the styleguide and give you a fast start with typography on the SCSS base layer
Browser indicator to show your window with and breakpoints and check if the size of you links fit tab standards.
Based on drupal core classy theme, giving you well known css class names
Layout examples for the Grid system
Tons of Styleguide-ready SCSS comments rendering into a styleguide structured by SMACSS principles

Dependencies

Drupal Modules

You need the drupal module link_css to make browserSync working!

link_css

Here is the reason: https://github.com/BrowserSync/browser-sync/issues/10

Other dependencies

libsass - a c-based sass compiler
npm, bower - frontend tooling.
~~Ruby~~ Just for the second scss-lint option now. But sass-lint will be ready soon to fully replace scss-lint, providing about double speed.

Getting started

Create a subtheme You should create a subtheme with drush. Lullabot tells you how to use multiple drush versions.

In order to create a subtheme with drush, guru theme needs to be installed and set as default!

cd [www-data-folder]
drush pm-enable guru
drush config-set system.theme default guru
drush guru &quot;My Theme&quot;

Guru theme setup

You should have node, npm and sassc available in your command line.

node -v
 v6.2.0
 
npm -v
 3.8.9

sassc -v
 sassc: 3.3.6-8-g1949
 libsass: 3.3.6-70-g4acba
 sass2scss: 1.0.6
 sass: 3.4

You may use homebrew on a Mac or check out “Getting started in Drupal’s Vagrant VM” below for an Ubuntu example. Windows users may look at VDD too or struggle their own way and commit back the lessons learned ;).

Install node dependencies

npm install -g npm-run
cd [theme folder]
npm install

Install singularity (Currently 1.7.0) and compass-sass-mixins

cd [theme folder]
npm-run bower install

Change your domain and theme url in
```
[theme folder]/gulp.config.js
```

Run gulp in theme folder

cd [theme folder]
npm-run gulp

Enable theme in Drupal and check the styleguide in /themes/[theme folder]/styleguide/