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.
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.
- 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 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
You need the drupal module link_css to make browserSync working!
Here is the reason: https://github.com/BrowserSync/browser-sync/issues/10
- libsass - a c-based sass compiler
- npm, bower - frontend tooling.
RubyJust for the second scss-lint option now. But sass-lint will be ready soon to fully replace scss-lint, providing about double speed.
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
- 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
Run gulp in theme folder
cd [theme folder] npm-run gulp
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
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
- Maintenance status: Seeking co-maintainer(s)
- Development status: Under active development
- Reported installs: 8 sites currently report using this theme. View usage statistics.
- Downloads: 488
- Last modified: 16 April 2017
- Stable releases for this project are covered by the security advisory policy.
There are currently no supported stable releases.