Themer's

will love

Drupal 8

About

twitter.com/digitaldonkey09

thorsten.krug@donkeymedia.eu

Drupal 8

  • responsive Mobile First HTML5 by default
  • Template Engine TWIG
  • New CSS philosophy (SMACSS & BEM)
  • ie8 not supported
  • CSS classes not in Core
    (but in Classy Theme)
  • jQuery 2.x / no JQuery
    by default

Today ...

SMACSS

BEM

KSS

Limit yourself!

KSS

SMACSS

BEM

// Button
//
// Your standard button suitable for clicking.
//
// :hover    - Highlights when hovering.
// :disabled - Dims the button when disabled.
// .primary  - Indicates button is the primary action.
// .smaller  - A little bit smaller now.
//
// Markup:
// <button class="button {{modifier_class}}">
//
// :hover - Highlight the button when hovered.
//
// Styleguide 1.1

.button {
  ...
  &.primary {
    ...
  }
  &.smaller {
    ...
  }
  &:hover {
    ...
  }
  &:disabled {
    ...
  }
}

Which template?

Demo

Live Demo
http://drupaleight.local/sites/all/themes/_custom/digitaldonkey/styleguide/

BrowserSync Demo Video 
http://quick.as/az3sxrb

Features

  • Based on Classy (The Drupal 8 core theme)
  • Gulp based workflow
  • Singularity.gs grid system (like in Omega4)
  • libsass is "up to 4000% faster!"*
  • KSS-Stylguide for Documentation, Team-development and prototyping
    • Loads of Examples to get started easily.
  • Improved live reloading with browserSync
  • SCSS-Lint 
  • Abstract class summary

* http://sassbreak.com/ruby-sass-libsass-differences/

 of the Guru „Theme Workflow“

The project on Drupal

  • Infos and links are in  the README.md
  • SessionPlease provide Feedback in the Issues
  • And review the theme if you like it @
    https://www.drupal.org/node/2618932

Feedback

twitter.com/digitaldonkey09

thorsten.krug@donkeymedia.eu

https://www.drupal.org/sandbox/digitaldonkey/2599668

Drupal 8 Guru Theme

By Thorsten Krug

Drupal 8 Guru Theme

Creating Drupal 8 Theme based on gulp with browSersync

  • 1,965

More from Thorsten Krug