World is changed. I feel it in the FrontEnd

SERGIY BORODULINFrontEnd developer, Skilld

ANDRIY YUNFullStack developer, Skilld

Nestings in Drupal themes

Big nestings in projects. Why we need it?

Scheme

Drupal Core

Theme (Omega, Zen)

Subtheme (Projects theme)

What we have at first

- Drupal Core

-- Omega, Zen theme

--- Project theme

---- Subdomain theme with nesting styles and variables

Core theme - what is this?

Submodule

Structure in core & projects themes

SMACSS Gulp Folder

- Gulp -- settings.js -- scripts.js -- lint.js -- bower.js -- styles.js- gulp.js

Gulp as modular system

var gulp = require('gulp');

var requireDir = require('require-dir');requireDir('./gulp-tasks');

gulp.task('default', ['scripts', 'sass'], function () { gulp.watch('src/js/**/*.js', ['scripts']); gulp.watch('src/sass/**/*.{sass,scss}', ['sass']);});

hub(settings.core.hubpath);

gulp.task('injectFiles', function () {});

Gulp file in project

Problems & possible solutions

bulky for small projectstransfer gulp options from project to core tasks

gulp as git submodulemove gulp from core theme to project theme

http://macr.ae/article/splitting-gulpfile-multiple-files.html

https://www.npmjs.com/package/gulp-hub

https://www.npmjs.com/package/gulp-inject

Links

Reuse templates

Twig

Parent file

{# This empty block allows child templates

to insert markup into this place in the

header without re-writing the entire

template. #}

{% block header_fields %}

{% endblock %}

New file

{# Override the header_fields block to put

field_image there because this site needs it

there. #}

{% block header_fields %}

{{ content.field_image }}

{% endblock %}

Extends, Parent

{% extends "base.html" %}

{% block sidebar %} <h3>Table Of Contents</h3> ... {{ parent() }}{% endblock %}

Libraries overridetheme.librarie.yaml

libraries-override:

# Replace an entire library.

core/drupal.collapse: mytheme/collapse

# Replace an asset with another.

subtheme/library:

css:

theme:

css/layout.css: css/my-layout.css

Libraries removetheme.librarie.yaml

# Remove an asset.

drupal/dialog:

css:

theme:

dialog.theme.css: false

# Remove an entire library.

core/modernizr: false

Libraries extend

# Extend drupal.user: add assets from

classy's user libraries.

libraries-extend:

core/drupal.user:

- classy/user1

- classy/user2

Build toolsProblems and approaches

Using Stats

2014 2015 2016 2014 2015 2016

GH Watchers -- 563 617 -- 653 1021

GH Stars 8235 9466 10882 7537 13540 21316

Plugins -- 4663 5730 -- 1561 2431

npm downloads 7794k 15910k -- 2374k 14494k --

Gulp, not Grunt

fastersimpler

code oriented

configuration orientedhard to support

slower

LintersWhy we need it?

Coding Standards

CSS standards

https://www.drupal.org/coding-standards/css

JS standards

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

Have you configured your editor?http://dgo.to/147789#ide

Editors

Atom Komodo Edit

Notepad++ Sublime Text

IDE

Eclipse Netbeans

Komodo IDE PhpStorm

Core linters

CSS LINT

Drupal core

ESlint

CSSlint config - http://dgo.to/2222049

ESlint setting - http://dgo.to/1955232

csslint.net eslint.org

SASS Linters

scss-lint github.com/brigade/scss-lint

sass-lintgithub.com/sasstools/sass-lint

is dead,

Long live the !!!

Your power for build frontend stuff

1. install docker

2. pull or build docker image

3. call build command inside container

Docker based frontend worflow

Frontend trends in Drupal world

TWIG

NO PHP in front-end

Full control for view in Twig

SVG icon in menu without problem

{% set description = item.original_link.getDesctiption()|split(' | ') %}{% set linktitle = description.0 %}{% set svgicon = description.1 %}

{% set svgicon %}<span class="main-menu__icon">

<svg viewBox="0 0 128 128"><use xlink:href="/menu-icon.svg#{{ svgicon }}"></use>

</svg></span><span class="main-menu__title">{{ item.title }}</span>

{% endset %}

Result

Styleguidedriven development

KSShttp://warpspire.com/kss

A methodology for documenting CSS and generating styleguides

check styleguide regarding new

feature

Workflow

rebuild styles and stylesguide

Add new or reuse existing styles

KSS in action1. Add comment by the // for you styles

2. Add styleguide building stepto gulp or grunt

KSS demo

Links

Sessionshttps://events.drupal.org/losangeles2015/sessions/style-guide-

driven-development-all-hail-robot-overlords

https://events.drupal.org/neworleans2016/sessions/six-easy-pieces-

new-front-end-development

kss-node packagehttps://github.com/kss-node/kss-node

Andriy Yun, Kyiv

andriy.yun@gmail.comdrupal.org/u/andriyun

skype: c_cluber

Any questions?

Sergiy Borodulin, Lutsk

hogseruj1@gmail.comdrupal.org/u/hogskype: hog_seruj