Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017

692 Aufrufe

Veröffentlicht am

Our colleagues Nesta -Front-End leader in La Drupalera- and Enno -Front-End Drupal developer- teach in Drupal Dev Days Seville 2017 how to create your Sass/JS/CSS themes in case you have styles with common basic elements but different layouts, structures and contents in your multi-site installation. Such a challenge!

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017

  1. 1. Efficiently theming a multi-site Drupal 8 portal How a single Drupal theme can be used for a complex multi-site Drupal installation
  2. 2. Hello everyone, we are... Nesta (@Nesta_) Technical Architect and QA 8+ years working with Drupal Enno (@langelotz) Frontend Developer, SEO specialist 7+ years working with Drupal La Drupalera (@ladrupalera) One of the premier Drupal agencies in Spain with headquarters in Seville.
  3. 3. Drupal 8 Multisite 3 Considering using a single theme for a Drupal 8 multisite environment Critical points: ● similar branding and styles? ● common navigation elements? ● overlapping content? Drupal 8 Multisite 2 Drupal 8 Multisite 1 Shared code Theme 1 Theme 2 Theme 3
  4. 4. Drupal 8 Multisite 3 Similarities for the individual sites can justify the use of a single theme Critical points: ● similar branding and styles ● common navigation elements ● overlapping content Drupal 8 Multisite 2 Drupal 8 Multisite 1 Shared code Theme 1
  5. 5. Real life example: Sevilla FC Highly visible futbol portal > 500k visits/month 3 portals in a multisite installation 13 different languages
  6. 6. Functional requirements for our single theme Customer 1: “We want everything to look the same, but portal 1 has an additional sidebar.” Customer 2: “We have a general company branding, but each department with its own subsite has its own logo and colors.” Customer 3: “One of our portals has special content, which has its own design different from our general style guide.”
  7. 7. Technical requirements ● Create custom CSS/JS for each portal of the multisite installation ● Don’t create unnecessary or duplicate CSS ● Have a technical solution for whatever design exception is thrown at us during the development cycle ● Be able to modify styles for any region/page/node/block in any site at any point in time without being worried about side effects
  8. 8. Rules, that help the team work together and create a better product ● Empower your frontend developers to allow them making informed decisions ● Separate general components (your style guide) from block/page specific design ● Have a specific task for the theme setup that solves basic theme foundations such as grid, typography, variables, theme structure and common elements ● Talk to each other, so you can help each other out with reusable code
  9. 9. The Theme basis we work with ● Gulp/Grunt for CSS/JS creation ● No predefined framework like Bootstrap - we use individual external libraries as needed. Examples: ○ Susy ○ Breakpoint ● Sass as our preprocessor of choice ● Sass archive hierarchy loosely based on SMACSS, but Drupal specific
  10. 10. Sass to the rescue Sass allows us to import or write our Code in small chunks and different archives and then put it all together for the final compilation into css. For a single site installation, everything is brought together in one central file: main.sass @import external libraries @import utilities @import base styles @import layout
  11. 11. Using a strict Sass archive hierarchy The theme defines the basic approach: ● Hierarchical structure of folders ● Archives for basic components ● Order of compilation ● Imported code The frontend developer decides: ● Level of implementation: Page, view, block, node, etc. ● Use of mixins and extends Sass External Utilities Base Components Layout Blocks Views Pages Nodes
  12. 12. Code example 1 Drupal 8 Sass Folder structure in Editor
  13. 13. Questions for the frontend developer Main Content Sidebar Header Static Block View Node Footer Decision Tree Example Project Manager: “Apply the necessary styles to the sidebar!” What is my content in the sidebar? Custom block and view. -> Divide the tasks Is my custom block used anywhere else on the portal? No -> Create Sass file for the block, insert the styles. Is my view using nodes or fields? Node teasers. Are the node teasers used anywhere on the side in a different context? No -> Create node teaser twig template and Sass archive. Node
  14. 14. Workflow in abstract form 1. Receive the task 2. Analyze the situation 3. Define and create necessary Sass files to work on 4. Create/adapt mixins/extends/functions/variables 5. Create the specific styles
  15. 15. Creating and using the individual Sass archive Example: Drupal Search block Folder for the block Sass file: layout/blocks .search-block-form = _block-search-block-form.sass Important rule for determining the right context: No styles allowed that cannot be inserted by using “.search-block-form” as the first css class. .page-node-15 .search-block-form <- We don’t want that!
  16. 16. Code example 2 Example Sevilla FC - Block Pasion Sevillista Identifying and changing a Sass file
  17. 17. Taking care of the multisite optional styles We will need optional styles for each subsite. Our main.sass file stops being the all-including style file. main.sass - Contains all basic styles layout-default.sass - Contains the default layout styles site1.sass - Contains only site-specific styles The layout folder is duplicated for each subsite.
  18. 18. Where to put the code on multisite? Decision Tree Example Project Manager: “Apply the necessary styles to the sidebar!” What is my content in the sidebar? Custom block and view. -> Divide the tasks Are the styles specific to one/several subsites or generally applicable ? Specific to one side -> Use the Sass folder for the specific site Is my custom block used anywhere else on the portal? No -> Create Sass file for the block, insert the styles.
  19. 19. Further theme preprocess changes for multisite Additional css classes for the <body> element can help adding specific styles more easily. <body> CSS class for: ● Subsite ● Language ● Node ID
  20. 20. Code example 3 a) Multisite folder structure example. b) Adapted theme.libraries file to create the necessary multisite css. c) Preprocess changes in the theme to add body classes
  21. 21. Room for optimization - get feedback from frontend Don’t wait with the Sass/CSS until after Sitebuilding is finished! Your frontend developer can help to shorten the process by pointing out simple HTML changes that can be achieved by: ● Changing views to use global fields ● Creating custom node displays ● Adding css IDs/classes ● Changing the order of blocks/panels/paragraphs ● Adding or removing containers that are set with DS, Panels or similar
  22. 22. Thank you very much for your attention. Questions?

×