Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
•
2 likes•1,019 views
This document discusses strategies for creating lean and maintainable Drupal 8 themes. It explains some of the complexity that can arise from Drupal's flexible theming system and powerful configuration options. It then provides recommendations for limiting complexity, such as being consistent, recognizing unnecessary complexity, considering maintainability, adding documentation, and refactoring existing complex themes. Specific techniques recommended include using libraries and view modes appropriately, limiting the use of templates and preprocess functions, and writing clean and reusable CSS/Sass code.
Report
Share
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
- 1. CREATING A LEAN, MEAN DRUPAL 8 THEME evolvingweb.ca @evolvingweb
- 2. Drupal Consulting, Development, and Training evolvingweb.ca Suzanne Dergacheva, Co-founder @suzanne_kennedy
- 4. • Introduction to Drupal 8 (1 day) • Drupal 8 Site Building (2 days) • Drupal 8 Module Development (2 days) • Drupal 8 Theming (2 days) • Zero to Hero Drupal 8 Training (5 days) training@evolvingweb.ca evolvingweb.ca/training Drupal 8 Training
- 5. Drupal Themes Can be Complicated
- 7. Configuration for Display and Layout
- 8. • Why are Drupal themes complex? • Looking at our Drupal 8 theming toolset • Managing and limiting the complexity Creating a Lean, Mean Drupal 8 Theme
- 9. Where Does the Complexity Come From?
- 10. Design Flexible Theme System Powerful Configuration Log in name password Login Log in name password Login Joe joined... Lisa joined... Peter joined... Mary joined... Who's new? Ever wondered? Great news Fantastic offer for you CSS Functions ViewsPanels Display Suite Templates Layout Typography Regions Branding
- 11. The Drupal Theme System is Flexible
- 12. Need Lots of Different Layouts?
- 13. We Can Add Templates!
- 14. Need to Add Display Logic
- 15. We Can Add Preprocess Functions!
- 16. Specific Design Specs? Comic Book Tourist Brochure Corporate
- 17. We Can Write Tons of CSS and JavaScript segment of _blocks.scss
- 19. Add a Byline to the Page Title
- 20. Create a View
- 21. Need to Group Fields?
- 23. Varying Content Displays Featured Menu Listing GridFeatured Grid
- 24. Use View Modes
- 26. Panels or Display Suite
- 27. Designers…
- 28. Designers Can Create Lots of Variations
- 29. The Designer Can Create Lots of Variations
- 30. Look at all the Fancy Layouts!
- 31. Everything is Unique! FAQ About Us Board of Directors
- 32. Landing Pages
- 33. Design Flexible Theme System Powerful Configuration Log in name password Login Log in name password Login Joe joined... Lisa joined... Peter joined... Mary joined... Who's new? Ever wondered? Great news Fantastic offer for you CSS Functions ViewsPanels Display Suite Templates Layout Typography Regions Branding
- 34. Enter Drupal 8
- 35. • Libraries for loading CSS/JS • Twig Templating • More Templates! • Core Base Themes: Classy and Stable • Breakpoints Drupal 8 Theming
- 36. • No Javascript by default • SMACSS-style categorization of CSS • HTML5 Markup • Stable theme • Better accessibility • De-coupled Drupal is possible D8 Theme Improvements
- 37. Does that mean that Drupal 8 solves all our theming problems?
- 39. Stable Classy
- 42. Libraries
- 44. Attaching Libraries libraries: - ‘mytheme/global-styling’ Globally in mytheme.info.yml
- 45. Attaching Libraries {{ attach_library(‘mytheme/search-styling’) }} Contextually in page--search.html.twig
- 46. Attaching Libraries Contextually in mytheme.theme
- 47. Contextual CSS • Use libraries when there is a significant body specific CSS + JS Search CSS + JS Global CSS Store CSS + JS
- 48. Too Many Libraries? Only create separate libraries for sections of the site that are separate + specific Search Store Front Page User ProfilesLanding Pages
- 49. CSS in Libraries Don’t make your selectors too specific Search Store
- 50. CSS + SASS
- 51. Don’t nest your selectors when you don’t have to Writing Good SASS
- 52. Don’t use IDs if you can avoid it Writing Good SASS
- 53. Name and use your variables consistently Writing Good SASS
- 54. Writing Good SASS • @extend should always appear before properties • @include should appear second • Review the CSS that gets generated https://github.com/anthonyshort/idiomatic-sass
- 55. Templates
- 56. Core Templates More Core Templates
- 58. Use Twig Blocks {% extends 'node.html.twig' %} {% block nodeheader %} <p>This is an article node.</p> {% endblock %} node--article.html.twig {% block nodeheader %} <p>This is a generic node.</p> {% endblock %} node.html.twig
- 59. No Field Left Behind {{ content|without('links') }} {{ content.links }} {{ content.links }}
- 61. Customize the Display Logic
- 62. Preprocess Functions: The Good! • Transform content before it gets rendered in templates • Link one field to another • Change the format of the submitted text • Add new variables to the render array
- 63. Preprocess Functions: The Ugly! • Formatting field types • Overrides that depend on a node ID • Database calls to style past events and ‘on tour’ events differently • Commerce line item calculations for currencies • Hiding results of a view
- 64. Preprocess vs. Template • Preprocess • Adding logic • Adding new variables • When the output depends on the context ! ! • Templates • Adding classes • Wrapping fields in different markup • Bundling fields together
- 65. View Modes
- 66. Varying Content Displays Featured Menu Listing GridFeatured Grid
- 67. It’s easier than ever to create view modes Adding View Modes in D8
- 68. Don’t Use View Modes as a Switch
- 69. Theme Settings
- 70. Theme Variations
- 71. Theme Settings Alternative to creating multiple themes Main theme Sub-theme! different branding Main theme mytheme.settings.yml +
- 72. Regions
- 73. Only the Regions You Need Header Hero Navigation Content Content Bottom Footer
- 74. Your Mission: Limit the Complexity of the Theme
- 76. 1. Be consistent • Make choices and stick with them • If you’re using view modes, define and use them consistently • If you’re using the Bootstrap theme, apply the Bootstrap classes for all layouts
- 77. 2. Recognize Complexity • Adding template suggestions to create more templates • Adding a lot of classes and IDs • Adding view modes for each content type • Adding a lot of theme settings • Using Node IDs in your preprocess functions • You have a library for every page • You have a node template for each content type
- 78. 3. Ask: How hard will this be to maintain? • How much work will it be to apply this to a new content type? • What will happen if the client wants to add a field? • What if the branding changes? • Will your colleague, client, or future self understand this?
- 79. 4. Documentation • What to document: • Regions that don’t get displayed everywhere • Preprocess functions that are complex • Templates - to indicate what you changed • Comment your libraries to say why you added them
- 80. 5. Refactor • If you come across a theme that’s very complex, refactor it before it’s too late! • Tools to use: • Site diff: github.com/evolvingweb/ sitediff • Visual diff tool like backtrac.io
- 81. • Introduction to Drupal 8 (1 day) • Drupal 8 Site Building (2 days) • Drupal 8 Module Development (2 days) • Drupal 8 Theming (2 days) • Zero to Hero Drupal 8 Training (5 days) training@evolvingweb.ca evolvingweb.ca/training Drupal 8 Training
- 82. DrupalNorth June 16-19 drupalnorth.org