Designing with Drupal 8DRUPALCAMP NJ 2016

Daniel Schiavone

What’s different about Drupal 8?

P.I.E. Proudly Invented Elsewhere

● Symfony2

● Symfony CMF

● Zend Feed

● Guzzle

● EasyRDF

● Twig

● PHPUnit

● Zend Diactoros

● Backbone.js

● Underscore.js

So we need to know...

Basic stuff

● html

● css

● Php

New stuff

● YAML

● Twig

● Sass

YAML

---# Employee recordname: Joeyjob: Themerskills: - Music - Artlanguages: php: Elite javascript: Elite

YAML is a human friendly data

serialization standard for all

programming languages.

http://www.yaml.org/

Twig

Print something

{{ name }}Run code

{% set class = “something-something” %}Comment

{# This is something #}

http://twig.sensiolabs.org/doc/templates.html

Sass

A CSS preprocessor that adds power and elegance to the basic language with use

variables, nested rules, mixins, inline imports, and more.

$font-stack: Helvetica, sans-serif;$primary-color: #333;

body { font: 100% $font-stack; color: $primary-color;}

http://sass-lang.com

body { font: 100% Helvetica, sans-serif; color: #333;}

Before we begin

Preparing environment

● Local environment - LAMP/MAMP, Acquia DevDesktop

● Browser extensions - Firebug, Livereload

http://www.acquia.com/downloads

http://getfirebug.com

http://livereload.com/extensions

Before we begin

● Install Drupal 8

● Drush (windows, mac,

linux)

● Devel module

Directory structurecore/ ← don’t hack!modules/node_modules/profiles/sites/themes/vendor/

Before we begin

Install Drupal 8

● Download from https://www.drupal.org/project/drupal

● Drush dl drupal

Before we begin

Install Drush (Fortunately you are using Acquia’s DevDesktop)

● In order to use Drush with Drupal 8 you need composer

● Windows → https://modulesunraveled.com/drush/installing-

drush-windows

● Mac → https://www.drupal.org/node/1674222

● Linux → http://whaaat.com/installing-drush-8-using-composer

https://www.drupal.org/node/1791676

●

1. Creating a Theme

● From scratch (by default themes use Stable as Base Theme)

● Contrib theme

● Subtheme

○ Core base themes

■ Classy - base theme for Bartik and Seven

■ Stable - bare minimum/style for things to work

○ Other base themes

1. Creating a Theme

mytheme.info.yml

core: 8.xtype: themebase theme: classy

name: Eightdescription: This is a eight sub theme of Classy

1. Creating a Theme

mytheme.libraries.yml

# eight.libraries.ymlglobal-styling: css: theme: css/styles.css: {}global-scripts: js: theme: js/main.js: {}

2. Disable cache, Enable Twig debug

Templates → /modules/system/templates

settings.php and settings.local.php

service.yml and development.services.yml

3. Gulp

Automates repetitive tasks

Detects changes to files and…

Compiles Sass

Reloads browser with Livereload

More info → https://css-tricks.com/gulp-for-beginners

3. Gulp

1. Install nodejs → https://nodejs.org/en/download2. Download gulpfile.js from http://www.snakehill.net/designingd8

Edit gulpfile.js - replace <mytheme> with your theme name

3. Install gulp

npm install

or

npm install gulp-livereload gulp-uglifyjs gulp-sass gulp-autoprefixer gulp-sourcemaps gulp-imagemin imagemin-pngquant es6-promise

5. Blocks and Regions

1. Blocks → admin/structure/block

2. page.html.twig

3. Defining regions in mytheme.info.yml

4. Creating a block

5. Placing a block in a Region

6. Templates

● Modifying a template

● Template suggestions

● Starters → core/themes/stable

7. Menus

1. Add content

2. Add content to a menu

3. Create a new region in mytheme.info.yml

4. Add region to template

5. Add menu to region

8. Intro to Views

● Devel module

● Generate content

● Modules

● Edit filter

● Teaser vs fields

10. Content types and fields

● add content type

● add fields

● create view

● create menu item

11. Displaying fields

● Changing field layout with templates

● Changing layout with Display Suite

Questions

Daniel Schiavone

www.SnakeHill.net

Daniel@SnakeHill.net

@schiavo

@Snake_Hill

DDO: schiavone

Community

Baltimore Drupal Meetup

meetup.com/Baltimore-Drupal-Meetup

Baltimore / DC Drupal Co-working

References and Resources

@MortenDK’s Barcelona Session

https://www.youtube.com/watch?v=1m6WR7e7qwU

Watch and Learn YouTube Channel https://www.youtube.

com/channel/UCXQC_GB5hG6PkzIhSMZ-hWA

More at

http://www.SnakeHill.net/designingd8