1 / 45

Yun&Borodulin

World is changed. I feel it in the FrontEnd

drupalcamp
Download Presentation

Yun&Borodulin

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 as modular system - Gulp -- settings.js -- scripts.js -- lint.js -- bower.js -- styles.js - gulp.js

  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. Gulp file in project hub(settings.core.hubpath); gulp.task('injectFiles', function () { });

  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. Links http://macr.ae/article/splitting-gulpfile- multiple-files.html https://www.npmjs.com/package/gulp-hub https://www.npmjs.com/package/gulp-inject

  13. Reuse templates

  14. Twig

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

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

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

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

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

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

  21. Build tools Problems and approaches

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

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

  24. Linters Why we need it?

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

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

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

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

  29. is dead, Long live the !!!

  30. Your power for build frontend stuff

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

  32. Frontend trends in Drupal world

  33. TWIG

  34. NO PHP in front-end

  35. Full control for view in Twig

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

  37. Result

  38. Styleguide driven development

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

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

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

  42. KSS demo

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

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

More Related