Get ready for D8

• Check the requirements
  • PHP 5.5.9 or higher
  • MySQL 5.5.3/MariaDB 5.5.20
• Check if you can rely on core with your first project features (for now)
• Get a PHP debugger
  (e.g Xdebug / PHP-Storm)
• Use git and git submodules to keep your code base up to date
• Install drush 8

Drush 8

• You can install multiple versions of drush in parallel
• Install composer
  curl -sS https://getcomposer.org/installer | php
• Use composer to install drush
  mkdir ~/drush8
  cd ~/drush8
  composer require drush/drush:dev-master
• Read more:
  https://www.lullabot.com/articles/switching-drush-versions

Today ...

SMACSS

BEM

KSS

Package manager

Package manager

PHP

JS/Frontend for node.js

CSS preprocessors

CSS Grid Systems

Build Tools 

CSS Coding standards

SMACSS

BEM

Auto generated Styleguides

KSS

Build tools for build tools ....

Gulp ...

• is a "task runner"
• is a command line tool for frontend preprocessing
• enables live editing with multiple devices using browser sync
• let you generate a Styleguide with KSS-Node

Gulp example

SASS ...

• is a CSS preprocessor
  • enables you to organize your (S)CSS code in multiple files
  • makes it easy to use coding standards like SMACSS and BEM
• Lib-Sass
  • libsass is "up to 4000% faster!"*
  • use it for new projects

Syntactically Awesome StyleSheets

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

SASS EXAMPLE

KSS-Node styleguides

• Organize your and maintain style components
• Let your team and product owner know about the components
• Prototype with SCSS and a little chunk of HTML before implementing in backend.

Documentation for any flavor of CSS that you’ll love to write. Human readable, machine parsable, and easy to remember.

http://warpspire.com/kss/

// 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 {
    ...
  }
}

Demo

KSS

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

Theming in browser

• Control over details and responsive behavior
• Consistency and reusability
• Testing
  • Transitions and animations
  • Early testing
  • User interaction testing

BrowserSync

• Improved live reloading
• Works with Drupal only when using the link_css module.
  https://www.drupal.org/project/link_css

Demo
http://quick.as/az3sxrb

http://www.browsersync.io

D8 Themes

• no stable themes for d8 (I found yet), but the core ones
• Classy is a theme in Drupal 8 core that is used as a base theme for Bartik and Seven
• Classy provides the well known Drupalish css classes.

Create your own theme

• mytheme.info → mytheme.info.yml
  • declarations "=" → ":"
  • comments ";" → "#"
  • Watch your blanks in yml files
• type: theme                                                                
• CSS&JS → mytheme.libraries.yml

name: mytheme
description: 'Custom classy based theme.'
type: theme
core: 8.x
package: Custom

# Defines the base theme.
base theme: classy

# Add libraries.
libraries:
  - digitaldonkey/global-styling

#stylesheets-remove:
#  - '@classy/css/layout.css'
#  - core/assets/vendor/normalize-css/normalize.css

# Regions
# Default Regions see:
# https://api.drupal.org/api/drupal/core/modules/system/templates/page.html.twig/8
regions:
  header: Header
  content: Content
  sidebar_first: 'Sidebar first'
  footer: Footer

mytheme.info.yml

global-styling:
  version: 1.x
  css:
    theme:
      css/main.css: {}
  js:
      js/behaviors.js: { scope: footer }
  dependencies:
    - core/jquery
    - core/drupal
    - core/jquery-once

# For external libraries see:
# https://www.drupal.org/theme-guide/8/assets#external

mytheme.libraries.yml

TWIG

TWIG example

Which template?

• copy sites/default/default.services.yml to sites/default/services.yml 
• Change the following variables in services.yml 

twig.config:

    # Twig debugging:
    # @default false
    debug: true

    # Twig auto-reload:
    #
    # Automatically recompile Twig templates whenever the source code changes.
    # If you don't provide a value for auto_reload, it will be determined
    # based on the value of debug.
    #
    # Not recommended in production environments
    # @default null
    auto_reload: true

Which template?

e.g: {{ dump(page.content) }}

Twig debug dump([var]) 

e.g: {{ kint() }}

Twig debug kint([var])