World is changed. i feel it in the front end

1. World is changed.
I feel it in the FrontEnd
SERGIY BORODULIN
FrontEnd developer, Skilld
ANDRIY YUN
FullStack developer, Skilld

2. Nestings in Drupal themes

3. Big nestings in projects.
Why we need it?

4. Scheme
Drupal Core
Theme (Omega, Zen)
Subtheme (Projects theme)

5. What we have at first
- Drupal Core
-- Omega, Zen theme
--- Project theme
---- Subdomain theme with nesting styles
and variables

6. Core theme - what is this?
Submodule

7. Structure in core & projects themes
SMACSS Gulp Folder

8. - Gulp
-- settings.js
-- scripts.js
-- lint.js
-- bower.js
-- styles.js
- gulp.js
Gulp as modular system

9. 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']);
});

10. hub(settings.core.hubpath);
gulp.task('injectFiles', function () {
});
Gulp file in project

11. Problems & possible solutions
bulky for small projects
transfer gulp options from project to
core tasks
gulp as git submodule
move gulp from core theme to project
theme

12. http://macr.ae/article/splitting-gulpfile-
multiple-files.html
https://www.npmjs.com/package/gulp-hub
https://www.npmjs.com/package/gulp-inject
Links

13. Reuse templates

14. Twig

16. 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 %}

17. 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 %}

18. Extends, Parent
{% extends "base.html" %}
{% block sidebar %}
<h3>Table Of Contents</h3>
...
{{ parent() }}
{% endblock %}

19. Libraries override
theme.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

20. Libraries remove
theme.librarie.yaml
# Remove an asset.
drupal/dialog:
css:
theme:
dialog.theme.css: false
# Remove an entire library.
core/modernizr: false

21. Libraries extend
# Extend drupal.user: add assets from
classy's user libraries.
libraries-extend:
core/drupal.user:
- classy/user1
- classy/user2

22. Build tools
Problems and approaches

23. 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 --

24. Gulp, not Grunt
faster
simpler
code oriented
configuration oriented
hard to support
slower

25. Linters
Why we need it?

26. Coding Standards
CSS standards
https://www.drupal.org/coding-standards/css
JS standards
https://www.drupal.org/node/172169

27. Have you configured your editor?
http://dgo.to/147789#ide
Editors
Atom Komodo Edit
Notepad++ Sublime Text
IDE
Eclipse Netbeans
Komodo IDE PhpStorm

28. Core linters
CSS LINT
Drupal core
ESlint
CSSlint config - http://dgo.to/2222049
ESlint setting - http://dgo.to/1955232
csslint.net eslint.org

29. SASS Linters
scss-lint
github.com/brigade/scss-lint
sass-lint
github.com/sasstools/sass-lint

30. is dead,
Long live the !!!

31. Your power for build frontend stuff

32. 1. install docker
2. pull or build docker image
3. call build command inside container
Docker based frontend worflow

33. Frontend trends
in Drupal world

34. TWIG

35. NO PHP in front-end

36. Full control for view in Twig

37. 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 %}

38. Result

39. Styleguide
driven development

40. KSS
http://warpspire.com/kss
A methodology for documenting CSS
and generating styleguides

41. check styleguide
regarding new
feature
Workflow
rebuild styles and
stylesguide
Add new or reuse
existing styles

42. KSS in action
1. Add comment by the // for you styles
2. Add styleguide building step
to gulp or grunt

43. KSS demo

44. Links
Sessions
https://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 package
https://github.com/kss-node/kss-node

45. Andriy Yun, Kyiv
andriy.yun@gmail.com
drupal.org/u/andriyun
skype: c_cluber
Any questions?
Sergiy Borodulin, Lutsk
hogseruj1@gmail.com
drupal.org/u/hog
skype: hog_seruj