Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme

903 visualizaciones

Publicado el

Back in the Drupal 7 days (aka last year), we came across some pretty large, hard-to-maintain Drupal 7 sites. The theme was often responsible for a lot of the cruft. We saw themes with excess code, too many template files, and not enough documentation.

The Drupal 8 theme layer provides new features like libraries and Twig blocks that can help us to build cleaner, better-organized themes. So now is a good time for themers to re-visit which theming techniques to use to create themes that are smaller, maintainable, and well organized.

Publicado en: Internet
  • Inicia sesión para ver los comentarios

Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme

  1. 1. CREATING A LEAN, MEAN DRUPAL 8 THEME evolvingweb.ca @evolvingweb
  2. 2. Drupal Consulting, Development, and Training evolvingweb.ca Suzanne Dergacheva, Co-founder @suzanne_kennedy
  3. 3. • 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
  4. 4. Drupal Themes Can be Complicated
  5. 5. CSS Templates mytheme.theme or template.php Regions
  6. 6. Configuration for Display and Layout
  7. 7. • Why are Drupal themes complex? • Looking at our Drupal 8 theming toolset • Managing and limiting the complexity Creating a Lean, Mean Drupal 8 Theme
  8. 8. Where Does the Complexity Come From?
  9. 9. 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
  10. 10. The Drupal Theme System is Flexible
  11. 11. Need Lots of Different Layouts?
  12. 12. We Can Add Templates!
  13. 13. Need to Add Display Logic
  14. 14. We Can Add Preprocess Functions!
  15. 15. Specific Design Specs? Comic Book Tourist Brochure Corporate
  16. 16. We Can Write Tons of CSS and JavaScript segment of _blocks.scss
  17. 17. Drupal Configuration is Powerful
  18. 18. Add a Byline to the Page Title
  19. 19. Create a View
  20. 20. Need to Group Fields?
  21. 21. Use Field Collections!
  22. 22. Varying Content Displays Featured Menu Listing GridFeatured Grid
  23. 23. Use View Modes
  24. 24. Layout Variations
  25. 25. Panels or Display Suite
  26. 26. Designers…
  27. 27. Designers Can Create Lots of Variations
  28. 28. The Designer Can Create Lots of Variations
  29. 29. Look at all the Fancy Layouts!
  30. 30. Everything is Unique! FAQ About Us Board of Directors
  31. 31. Landing Pages
  32. 32. 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
  33. 33. Enter Drupal 8
  34. 34. • Libraries for loading CSS/JS • Twig Templating • More Templates! • Core Base Themes: Classy and Stable • Breakpoints Drupal 8 Theming
  35. 35. • No Javascript by default • SMACSS-style categorization of CSS • HTML5 Markup • Stable theme • Better accessibility • De-coupled Drupal is possible D8 Theme Improvements
  36. 36. Does that mean that Drupal 8 solves all our theming problems?
  37. 37. Using Your Front-end Toolset
  38. 38. Stable Classy
  39. 39. Stable html.html.twig
  40. 40. Classy html.html.twig
  41. 41. Libraries
  42. 42. mytheme.libraries.yml global-styling: css: theme: css/styles.css: {} search-styling: css: theme: css/search.css: {}
  43. 43. Attaching Libraries libraries: - ‘mytheme/global-styling’ Globally in mytheme.info.yml
  44. 44. Attaching Libraries {{ attach_library(‘mytheme/search-styling’) }} Contextually in page--search.html.twig
  45. 45. Attaching Libraries Contextually in mytheme.theme
  46. 46. Contextual CSS • Use libraries when there is a significant body specific CSS + JS Search CSS + JS Global CSS Store CSS + JS
  47. 47. Too Many Libraries? Only create separate libraries for sections of the site that are separate + specific Search Store Front Page User ProfilesLanding Pages
  48. 48. CSS in Libraries Don’t make your selectors too specific Search Store
  49. 49. CSS + SASS
  50. 50. Don’t nest your selectors when you don’t have to Writing Good SASS
  51. 51. Don’t use IDs if you can avoid it Writing Good SASS
  52. 52. Name and use your variables consistently Writing Good SASS
  53. 53. 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
  54. 54. Templates
  55. 55. Core Templates More Core Templates
  56. 56. Don’t Create Templates
  57. 57. 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
  58. 58. No Field Left Behind {{ content|without('links') }} {{ content.links }} {{ content.links }}
  59. 59. Preprocess Functions
  60. 60. Customize the Display Logic
  61. 61. 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
  62. 62. 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
  63. 63. 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
  64. 64. View Modes
  65. 65. Varying Content Displays Featured Menu Listing GridFeatured Grid
  66. 66. It’s easier than ever to create view modes Adding View Modes in D8
  67. 67. Don’t Use View Modes as a Switch
  68. 68. Theme Settings
  69. 69. Theme Variations
  70. 70. Theme Settings Alternative to creating multiple themes Main theme Sub-theme! different branding Main theme mytheme.settings.yml +
  71. 71. Regions
  72. 72. Only the Regions You Need Header Hero Navigation Content Content Bottom Footer
  73. 73. Your Mission: Limit the Complexity of the Theme
  74. 74. 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
  75. 75. 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
  76. 76. 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?
  77. 77. 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
  78. 78. 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
  79. 79. • 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
  80. 80. DrupalNorth June 16-19 drupalnorth.org

×