Date post: | 15-Apr-2017 |
Category: |
Documents |
Upload: | gergely-pap |
View: | 75 times |
Download: | 0 times |
Build a Drupal 8 site with cutting-edge frontend technologiesGergely [email protected]
“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!