How we use front-end components in Drupal. Docker container in Kaizen theme. https://drupalcampkyiv.org/node/69

1. FRONT-END COMPONENTS IN DRUPAL THEME. "KAIZEN" -
DRUPAL 8 THEME FROM SKILLD
DRUPALCAMP KYIV'19

2. Sergiy Borodylin
Skilld - Drupal front-end developer
DevCompany - Co-founder
● https://www.facebook.com/hog.seruj
● https://www.drupal.org/u/hog

3. Problem with Implementation BEM
components to Drupal render

4. Components + BEM

5. Patternlab
● Atoms
● Molecules
● Organisms
● Helpers
● Layouts
BEM
● Block
● Element
● Modifier
block-name__elem-name_mod-name_m
od-val

6. Block - main rules
● Block is fully independent
● Block can be placed in any place of the page
● Block shouldn't influence its environment, meaning you shouldn't set the
external geometry (margin) or positioning for the block.
● You also shouldn't use CSS tag or ID selectors when using BEM.

7. Yarn + webpack
Gulp removed

8. "scripts": {
"build": "cross-env ./node_modules/.bin/webpack",
"dev": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --config
webpack.config.dev.js",
"debug": "cross-env NODE_ENV=debug ./node_modules/.bin/webpack --config
webpack.config.dev.js",
"lint": "cross-env ./node_modules/.bin/run-p lint:*",
"lint-fix": "cross-env ./node_modules/.bin/run-p "lint:* --fix"",
"lint:js": "node ./node_modules/eslint/bin/eslint.js .",
"lint:css": "cross-env ./node_modules/.bin/stylelint "**/*.css"",
"lint:sass": "cross-env ./node_modules/.bin/stylelint "**/*.scss" --config
./.stylelintrc.sass.json",
"browsersync": "yarn run browser-sync start --proxy '127.0.0.1:8888' --files ./dist",
"watch": "cross-env ./node_modules/.bin/webpack -w",
"watch:bs": "cross-env NODE_ENV=development ./node_modules/.bin/run-p browsersync watch",
"icons": "svg-sprite --config ./scripts/icons/svg-sprite.json ./images/svg/*.svg",
"cc": "node ./scripts/create-component.js"
}
package.json

9. webpack.config.js
const glob = require('glob');
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const breakpointsImporter = require('./scripts/importers/breakpoints-importer');
const options = require('./kaizen-options');
const mapFilenamesToEntries = (pattern, globOptions) =>
glob.sync(pattern, globOptions).reduce((entries, filename) => {
const [, name] = filename.match(/([^/]+) .scss$/);
return {
...entries,
[name]: filename,
};
}, {});

10. Stylelint

11. Stylelint replacing csslint in core - https://www.drupal.org/node/2868114
.stylelintrc.sass.json
{
"extends": [
"./.stylelintrc.json",
"stylelint-config-recommended-scss"
],
"rules": {
"plugin/no-browser-hacks": null,
"order/order": [
"custom-properties",
"dollar-variables",
{
"type": "at-rule",
"hasBlock": false
},

12. We create front-end components from
console

13. node ./scripts/create-component.js
? Please enter component name test_example
? What type of component? (Use arrow keys)
❯ Atom
Molecule
Organism
Template
Helper
? Create elements instead default COMPONENT__content? (y/N)
? (QUESTION PLACEHOLDER. NOT WORKING YET)Create record in *.libraries.yml?
(y/N)
? Create twig template? (y/N)
? Enter element name content
? Want to enter another element (just hit enter for YES)? No

14. @import '../../../init';
$name: 'a-test-example';
.#{$name},
%#{$name} {
display: inherit;
}
<div class="a-test-example">
<div class"a-test-example__content">{{ content.content }}</div>
</div>
@import 'a-test-example';
// .DRUPAL-SELECTOR {
// @extend %a-test-example;
// }

15. Module color and css vars

16. :root {
--color-1: #000;
--color-2: #b9bab9;
--color-3: #fff;
--color-4: #37B480;
--color-5: #52C998;
--color-6: #353535;
--color-7: #1b1464;
}
:root {
--color-bg: var(--color-7);
--color-text: var(--color-6);
--color-link: var(--color-3);
--color-link--hover: var(--color-4);
}

17. Breakpoints

18. theme_name.breakpoints.yml
theme_name.mobile:
label: mobile
mediaQuery: 'all and (max-width: 639px)'
weight: 0
group: name
multipliers:
- 1x
- 2x
theme_name.narrow:
label: narrow
mediaQuery: 'all and (min-width: 640px) and (max-width: 1023px)'
weight: 1
group: name
multipliers:
- 1x
- 2x
theme_name.wide:
label: wide
mediaQuery: 'all and (min-width: 1024px)'
weight: 2
group: name
multipliers:
- 1x
- 2x
@include respond-to(wide_1x) {}

19. Migrate from scss to post css - causes
and disadvantages

20. Done
● Removed sass and its dependencies.
● Moved variables to custom css props.
● Added nested plugin to make css sass like
● Added import plugin
● Added drupal custom plugin breakpoints
● Added test examples of variables/colors/breakpoints/components/nested
Things to do
● Fix linter issues After compiling.
● Rework create component task
● Check watcher and other tasks.
● Test with docker.
● Check sourcemaps generation

22. No jQuery. ES6
You don’t need jQuery

23. Style guide integration

26. theme_name.components.yml
info-box:
label: Info Box
type: twig
description: Info Box
group: 02 Theme Molecules
content:
items:
- <div class="m-info-box__field-wrapper"><div class="m-info-box__field-title">Field
title</div><div class="m-info-box__field-content">Field content</div></div>
- <div class="m-info-box__field-wrapper"><div class="m-info-box__field-title">Field
title</div><div class="m-info-box__field-content">Field content</div></div>
- <div class="m-info-box__field-wrapper"><div class="m-info-box__field-title">Field
title</div><div class="m-info-box__field-content">Field content</div></div>
- <div class="m-info-box__field-wrapper"><div class="m-info-box__field-title">Field
title</div><div class="m-info-box__field-content">Field content</div></div>
modifiers:
background-one: m-info-box__title--background-1
template: /src/sass/components/molecules/info-box/m-info-box.twig

27. Theme for developer VS theme for
customer

28. Questions?