FRONT-END COMPONENTS IN DRUPAL THEME. "KAIZEN" - DRUPAL 8 THEME FROM SKILLD
0 likes209 views
The document discusses the implementation of front-end components in a Drupal 8 theme called 'Kaizen' using the BEM methodology. It outlines development tools like Yarn and Webpack, the structure of component creation, and migration from SCSS to custom CSS properties. The document also includes details on theming configurations and tasks for ongoing development and testing.
![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,
};
}, {});](https://image.slidesharecdn.com/front-endcomponentsindrupaltheme-190531130323/85/FRONT-END-COMPONENTS-IN-DRUPAL-THEME-KAIZEN-DRUPAL-8-THEME-FROM-SKILLD-9-320.jpg)
![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
},](https://image.slidesharecdn.com/front-endcomponentsindrupaltheme-190531130323/85/FRONT-END-COMPONENTS-IN-DRUPAL-THEME-KAIZEN-DRUPAL-8-THEME-FROM-SKILLD-11-320.jpg)
FRONT-END COMPONENTS IN DRUPAL THEME. "KAIZEN" - DRUPAL 8 THEME FROM SKILLD
- 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
- 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
- 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?