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 "My Theme"

Guru theme setup

  1. 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 ;).

  1. Install node dependencies
npm install -g npm-run
cd [theme folder]
npm install

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

    cd [theme folder]
npm-run bower install

  2. Change your domain and theme url in

    [theme folder]/gulp.config.js

  3. Run gulp in theme folder

    cd [theme folder]
npm-run gulp

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

More readings about the theme

Introduction and howto video on Youtube https://www.youtube.com/watch?v=EcyXh4REaQk Complementary slides. http://slides.com/digitaldonkey/drupal-8-guru-theme-intro

8.1.x Version

Checkout presentation at Drupalcamp Essen 2015 http://drupalcamp-essen.de/15/session/creating-a-gulp-based-d8-theme-wit...

See the slides http://slides.com/digitaldonkey/create-a-drupal8-theme

Please use drupal issue tracker to provide feedback and share improvements. https://www.drupal.org/project/issues/search/2599668

Project information

  • caution Seeking new maintainer
    The current maintainers are looking for new people to take ownership.
  • caution Maintenance fixes only
    Considered feature-complete by its maintainers.
  • chart icon1 site reports using this theme
  • Created by digitaldonkey on , updated
  • shieldStable releases for this project are covered by the security advisory policy.
    There are currently no supported stable releases.

Releases