Drupal 8 Theming

@JacobBaloul

#$ echo "the old school hacker way" | wall

http://bit.ly/d8theming

Step 1:

setup your dev environment

in my case, i am using Acquia Cloud Professional in LiveDev mode

why? because it's awesome! +brainless +tweaked for high performance drupal

D8 up & running in a couple of clicks

* you can setup your dev environment as you please, 
LAMP, WAMP, MAMP, ${SHM}AMP, Acquia Dev Desktop, DigitalOcean, EC2, else

Step 2:

find & copy Bartik

1. login ssh
2. browse to your drupal 8 dir
3. find & copy Bartik to Bar
4. change dir to Bar

shell

steps

user@server:/path/to/drupal8/$

cd themes/

cp -vpr ../core/themes/bartik/ bar

cd bar/

* note new dir structure. core/themes and /themes

Step 3:

rename key theme files

in /themes/bar rename:

1. "bartik.theme" TO "bar.theme"
2. "bartik.libraries.yml" TO "bar.libraries.yml"
3. "bartik.info.yml" TO "bar.info.yml"
4. "bartik.breakpoints.yml" TO "bar.breakpoints.yml"

steps

shell

user@server:/path/to/drupal8/themes/bar$

mv bartik.theme bar.theme

mv bartik.libraries.yml bar.libraries.yml

mv bartik.info.yml bar.info.yml

mv bartik.breakpoints.yml bar.breakpoints.yml

Step 5:

add your custom css file

1. create a new file: /themes/bar/css/style.css
2. add some css​

steps

shell

user@server:/path/to/drupal8/themes/bar$

touch css/style.css

vim css/style.css






drush8 cr

/*
 * Bar Theme CSS
*/

body {
  background-color: black;
}

#page {
  background-color: black;
}

#main-wrapper {
  background-color: gray;
}

Step 5.5:

add your custom css file

Introduce your style.css to the new theme by declaring it in the "theme:" section of the new d8 libraries yaml file

       file: /themes/bar/bar.libraries.yml

steps

shell

user@server:/path/to/drupal8/themes/bar$

vim bar.libraries.yml

Step 6: turn it on

1. clear cache
2. login to drupal as admin
3. browse to "Appearance"
4. "Install and set default" to new Bar theme

​

* note drush8 for d8, and cache clear / rebuild is now cr NOT cc

steps

shell

user@server:/path/to/drupal8/themes/bar$

drush8 cr

Drupal Admin UI

/admin/appearance

Step 7: 

appreciate your progress

further? really?

...of course

Step 8: getting dirty with twig

Magic! turn on Twig debugging

in "services.yml" 

under "twig.config:"

change to "debug: true"

steps

shell

user@server:/path/to/drupal8/themes/bar$

vim sites/default/services.yml

Step 9: turn off aggregation

1. by default, css & js aggregation is on, for development, turn it off in Drupal Admin UI

2. clear cache

steps

shell

user@server:/path/to/drupal8/themes/bar$

drush8 cr

Drupal Admin UI

admin/config/development/performance

Voila!

find the css code we put in style.css

inspect & view source to see twig suggestions in the dom html

theme suggestions now built in!!!

Tip! this has been back ported to Drupal 7.34

Next...

theming blocks & views

# let’s theme a block!

docroot/themes/bar/templates

vim block.html.twig


# extends = includes

{% extends "@classy/block/block--system-menu-block.html.twig" %}

whatever gets added beneath the “extend” statement will be added to the code.

# TODO next:
 use extend example with blocks and views
 make the view for homepage images

to be continued...

http://bit.ly/d8theming