Developer guide for the Common Design in Non-Drupal implementations
The Common Design repo https://github.com/UN-OCHA/common_design is specifically a base theme for Drupal 8/9. The demo site https://web.brand.unocha.org is a Drupal 8 implementation of the base theme, and specific Drupal configuration.
There is not a non-Drupal repo that includes the header and footer. Most of what is available in the base theme repo, when used with the frontend output from the demo site as reference, will be adequate to implement the CD in non-Drupal projects.
All the code is there, but requires “assembly” details that are specific to each implementation, and awareness of the pieces that come together to make the Common Design header and footer.
The Common Design implementation notes is a good starting point, although Drupal-specific, and will give a good background to the general intent of the CD base theme. Also read the common_design repo README
The Common Design Checklist is used to ensure standard CD requirements are met.
Markup
The dev-only demo site https://demo.commondesign-unocha-org.ahconu.org (ask us for credentials) includes Twig debug information (View Source or enable web developer tools) that shows where each template is located in the Drupal site directory. This provides the information as to how the twig templates in the repo are assembled for the final page composition (see screenshot).
The markup for the layout and main page elements https://github.com/UN-OCHA/common_design/tree/main/templates (See directories: cd, layout and content) will help provide the right markup.
Drupal has a lot of markup that is not crucial to the design. The extraneous Drupal markup might be hard to recognise for those not familiar with Drupal, and the CD does depend on some specific markup Drupal’s templating system uses; for example regions, blocks and navigation.
Javascript
The dropdown behaviour comes from cd-dropdown.js - a file that has Drupal-specific code and will not work in other contexts unless the Drupal portion is removed. More info
Refer to https://github.com/UN-OCHA/common_design_system/blob/main/cd-dropdown/cd-dropdown.js for the non-Drupal cd-dropdown.js (this might still need work per implementation)
CSS
The compiled styles are here https://github.com/UN-OCHA/common_design/tree/main/css, specifically styles.css
Adding brand.css to your project allows the Common Design colour palette to be overridden with your project's brand colours, using CSS custom properties.
Some of the individual components might be useful for page designs https://github.com/UN-OCHA/common_design/tree/main/components Refer to the Components README.
Assets
Drupal has its own way to manage libraries and attach CSS and JS files to templates. The “global” libraries are added to each page and are the minimal requirement. Depending on the page, other libraries can be added too.
The SVG icons sprite can be added directly to the HTML page in non-Drupal implementations. For more info on SVG icon sprites technique refer to https://github.com/UN-OCHA/common_design#icons
Support
Any questions or feedback, join the #developers channel or email the Digital Services team.