New Section: Drupal theming

[theodorosploumis]

General theming

• The Drupal theme anatomy
• Create subtheme
• Regions
• Twig templates (organizing, naming, inheritance)
• Frameworks we prefer (and how to choose them)
• Setup CSS (CSS variables, postcss, scss, node-sass etc)
• Setup JS (ES6, jQuery)
• Fonts/typography
• Setup compiling (grunt, gulp, npm etc)
• Browsersync, autoreload etc
• autoprefixer and browser support, polyfills
• npm utilities (eslint, normalize, husky, prettier, stylelint etc)
• External libraries used (JS utilities, cookies etc)
• Enable twig and cache debug (+devel module)
• hooks (how to add custom classes, theme suggestions, in-twig libraries)
• IDE setup, basic vcs (git) workflows
• Utility CSS/JS/HTM frameworks
• Storybook
• Should we include compiled assets to vcs?
• Best practices to write, organize and reuse SCSS and JS
• Chrome extensions for theming
• Browser Devtools (how to, common tasks, addiotional tools etc)
• "Translating" design systems into styleguides
• e2e testing, visual regression etc
• Drupal themes we prefer or avoid
• Drupal layout builder
• Drupal theme breakpoints
• BEM, SMACSS and other CSS methodologies within Drupal
• Above the fold CSS
• A11y validations, tools and analysis
• Local dev tools (eg ddev) to get a running Drupal instance

See also https://github.com/theodorosploumis/notes/blob/master/drupal/theme-validator.md.

---

Theming lessons

Business logic versus presentation logic

Twig

Theme hooks

• Theme hook suggestions

  Render arrays

• The structure of a render array
• The render pipeline

  Assets and libraries

• Libraries

  Common theme hooks

• Lists
• Links
• Tables

  Attributes

  Layouts

• Defining layouts
• Rendering a layout

  Other/General

• Get Drupal themes
• The theme anatomy
• Base themes and inheritance
• Create a new theme
• Theme settings
• (Theme) layouts and breakpoints
• Twig templates
• Render arrays
• Controllers
• Theme templates and theme hooks
• BEM, SMACSS and other CSS methodologies within Drupal
• Attach CSS and JS (internal, external) with libraries
• Working with JS (behaviors etc)
• Useful modules for theming (kint, webprofiler, twig related etc)
• Twig basics (render, loop, sub-values, conditions, arrays)
• Twig functions
• Twig filters
• Twig macros
• How to theme
• Modules we use for theming
• Base themes we prefer
• Themes we avoid
• Theming philosophy
• Compiling assets
• Performance needs and testing
• Browsers we support
• A11y testing
• Using paid themes

---

Theming problems quastionaire

Theming process standards

Trying new things on theming

---

Drupal + TailwindCSS theme

• tailwind version (CDN usage)
• unset Drupal core CSS files
• tailwind CSS variables
• tailwind compiler
• Drupal config values (php --> twig) on admin UI
• fonts
• colors
• width & layout
• twig templates
• twig template suggestions (by bundle, field type, view_mode, combinations of)
• email twig templates
• use laravel mix
• Drupal modules (ui_patterns, entity_class_formatter, block_class, layout_builder, CKEditor tailwind buttons)
• Other CSS/JS libraries (hover, animate, icons etc)

[theodorosploumis]

Lessons: Theming (new)

• Base theme and inheritance
• CSS libraries
  • which
  • external/internal
  • (core) overrides
• JS libraries
  • which
  • external/internal
  • (core) overrides
• Theme Breakpoints
• Theme settings (config)
• Asset bundle
  • grunt
  • bundle
  • gulp
  • phpstorm watchers
• SCSS structure
• Twig
  • functions
  • filters
  • loops
  • macros
  • conditions
  • values
  • folders
  • suggestions
  • embeds
  • extends
  • templates
  • variables
  • debug
• Admin theme
• Theming methodology
  • Twig templates
  • Patternlab
  • Storybook
• Styleguides
• .theme file
  • functions
  • hooks
  • includes
• Related modules
  • ds
  • components
  • ui_patterns
  • paragraphs
  • layout_builder
  • twig_tweak
  • twig_field_value
  • field_formatter_class
• Browser
  • which
  • extensions
  • profiles
  • local sources
• Node version (for npm packages) with nvm
• Git
  • .gitignore
  • exclude compiled (CSS/JS) files?
  • pre commit hook
• Mockups and design
  • Sketch
  • Figma
  • InvisionApp
  • XD
  • Zeplin

[theodorosploumis]

See also https://github.com/aleksip/component-based-theming

[theodorosploumis]

See also the new 2023 Book:

• https://www.packtpub.com/product/modernizing-drupal-10-theme-development/9781803238098
• https://github.com/PacktPublishing/Modernizing-Drupal-10-Theme-Development