Build a Drupal 8 site with cutting-edge frontend technologiesGergely Papgpap@brainsum.com

“The Druplicon is the frontend developer’s teardrop.”

What’s new?★ Twig replaces PHPTemplate.

★ Valid HTML5 markup, with improved accessibility and RDFa tags defined by schema.org.

★ jQuery 2.x, Modernizr, Backbone.js, Underscore.js in core (goodbye IE7-8).

★ YML configuration files and loading libraries.

Let’s build a base theme in D8/themes/THEME.info.ymlname: My Themetype: themedescription: 'High-end starterkit for your next Drupal 8 project.'package: BRAINSUMbase theme: classycore: 8.xversion: 8.x-0.1

libraries: - THEME/stuff

regions: header: Header # ...

Defining libraries and dependencies/themes/THEME.libraries.yml

stuff: version: 1.x css: theme: dist/css/app.min.css: {} dist/css/print.min.css: { media: print } js: dist/js/app.min.js: {} dependencies: - core/jquery - core/drupal

Other ways of including assets// Alter existing library.

function hook_library_info_alter(&$libraries, $module) {

if ($module == 'core' && isset($libraries['jquery.farbtastic'])) {

$libraries['jquery.farbtastic']['js'] = $new_js;

}

}

// Add new library.

function hook_preprocess_page(&$vars) {

$vars['#attached']['library'][] = 'slick';

}

// Alter in page attachments.

function hook_page_attachments_alter(&$page) {

if ($conditions) $page['#attached']['library'][] = 'core/jquery';

}

Adding Breakpoints/themes/THEME.breakpoints.yml

THEME.mobile: label: mobile mediaQuery: 'screen and (max-width: 480px)' weight: 0 multipliers: - 1x # - 1.5x // supports Android # - 2x // supports Mac retina display

Grouping Breakpoints/themes/THEME.breakpoint_groups.yml

id: THEMElabel: My Theme

breakpoints: - theme.THEME.mobile - theme.THEME.tablet - theme.THEME.desktop - theme.THEME.wide

group1: label: Group 1 breakpoints: - mobile - desktop

group2: label: Group 2 breakpoints: - mobile - tablet - desktop

Using Breakpoint and Responsive Images modules1. Enable the these on /admin/modules2. Add a Responsive Image style on

/admin/config/media/responsive-image-style

3. Set this image style for an Image field.

It’ll be rendered in the new <picture> element with a srcset and a fallback <img>.

Removing default stylesheets/themes/THEME.info.yml

Sometimes we don’t need some default CSS, or we simply want to put all CSS into one single filewith a preprocess tool.

stylesheets-remove: - core/assets/vendor/normalize-css/normalize.css - core/modules/system/css/system.module.css - core/modules/system/css/system.theme.css

Templating with Twig★ Twig is fast, secure and widely used (e.g.

Symfony).

★ It prevents newbie developers from putting too much logic in templates.

★ Can be useful for future headless projects as well.

Twig basics{# Print variable #}{{ content }}{{- content -}}

{# Set variable #}{% set classes = ['btn', 'btn-primary'] %}

{# Set associative array #}{% set args = {'key': 'value'} %}

{# Operations #}{% if is_new %} ...

More: www.drupal.org/theme-guide/8/twig

Twig filters{# Translation (calls Drupal t() function) #}{{ title|t }}{% trans %} Submitted on {{ date }}{% endtrans %}

{# Strip tags (calls Drupal check_plain()) #}{{ comment|striptags }}

{# Join multiple strings with a separator #}{{ items|safe_join(", ") }}

More: www.drupal.org/theme-guide/8/twig

Templating with TwigDrupal 8 ships with a new base theme: Classy.We can use it as a starting point for our template files.{% set value = attributes.offsetGet('value').value%}

{% if attributes.offsetGet('type').value not in ['button', 'submit', 'reset'] %} <input{{ attributes.addClass('form-control') }} />{% else %} <button{{ attributes.addClass('btn') }}>{{- value -}}</button>{% endif %}{{- children -}}

Blocks and extends

{% extends "page.html.twig" %}

{% block breadcrumbs %} {# Breadcrumbs content here #}{% endblock %}

templates/breadcrumbs.html.twig

{% block breadcrumbs %} {{ breadcrumbs }}{% endblock %}

templates/page.html.twig

Set local settings for development$ cp sites/example.settings.local.php sites/default/settings.local.php

if (file_exists(__DIR__ . '/settings.local.php')) { include __DIR__ . '/settings.local.php';}

Uncomment this in /sites/default/settings.php

Changes these in /sites/default/services.ymltwig.config: debug: true # Wrap template rendering with HTML comments. auto_reload: true # Automatically recompile templates when the code changes. cache: false # Disable caching. (No sh*t)

HTML template commentsShows the theme hook, file suggestions and the template that is in use (marked with an x):

Debugging in TwigUse dump() for var_dump() output,

or use kint() →which replaces dpm()/dsm()

Ok, I already knew that!

What are the ‘cutting-edge technologies’ ?

Automation tools

← More plugins← Logo is cooler

Shorter syntax →

Hipsters use it →

★ It makes your life easier by automating anything. * except for making you a coffee** but only if you don’t have a computer connected to your coffee machine

★ Compiles, auto-prefixes and cleans your LESS/SASS files. Lints, tests, concatenates and compiles your JS.

★ All you have to do:

What is Grunt?

(After hours of Grunt configuration)

$ cd themes/my_awesome_theme$ grunt

Getting started with Grunt1. Install Node.js with npm (if you haven’t already)2. Install Grunt: npm install -g grunt-cli

Optional:- Install grunt-init: npm install -g grunt-init- Run grunt-init gruntfile and answer

questions.

More: gruntjs.com/getting-started

Must-have Grunt pluginsgrunt-sass / grunt-contrib-lessGenerates native CSS from .less / .sass / .scss files.

Pro tips: ★ For SASS/SCSS, don’t use grunt-contrib-sass or Compass!

grunt-sass uses the C++ based libsass for lightning fast preprocess.

★ Enable source map generation for enhanced browser debugging.

Must-have Grunt pluginsgrunt-contrib-watchWatches for file changes, and runs any task on save.

grunt-contrib-jshintLints your JS code.

grunt-contrib-concat / grunt-contrib-uglifyConcatenate and minify your scripts into 1 single file. (Try not to use more than one <link> or <script> tags.)

Load only what you usegrunt-contrib-concat:

grunt.initConfig({ concat: { files: { src: [ 'path/to/vendor/bootstrap/js/transition.js', 'path/to/vendor/bootstrap/js/collapse.js', 'path/to/vendor/bootstrap/js/dropdown.js', // 'path/to/vendor/bootstrap/js/carousel.js' ], dest: 'dist/app.js', }, },});

grunt-autoprefixerYou can safely use CSS3 properties without worrying about browser differences.

grunt-contrib-cssminMinifies your CSS to the smallest possible size. It can also reorganize rules that are defined multiple times.

grunt-uncssLoads a PhantomJS server and removes unused CSS by checking all pages.

Must-have Grunt plugins

Some other notable tools

Bower★ Frontend package

manager created by Twitter.

★ Easily download and update packages, and handle dependencies.

LiveReload★ Automatically

refreshes page on JS and CSS changes.

★ Available for OS X, Linux and Windows.http://livereload.com/

icomoon.io★ Build custom icon

fonts that only contain the icons that you need.

★ Huge number of free icon fonts, ability to save your icon set, etc.

Tesseract beta

★ Drupal 8 base theme developed by BRAINSUM.

★ Most of these tools are pre-configured for instant usage. Just download and run ‘grunt’.

★ @todo: minimalist Bootstrap templates, lightweight DOM, predefined region sets, etc.

https://github.com/gergelypap/tesseract

★ Web development is becoming more and more frontend-oriented.

★ You will use these tools heavily for a Headless Drupal project.

★ Mobile traffic slowly exceeds desktop!

“[...] more Google searches take place on mobile devices than on computers in 10 countries including the US and Japan.” — Google

Why is frontend so important?

Thanks for your attention!