Skip to content
Snippets Groups Projects

DINO: New theme(s)

Last edited by nicol

A new admin theme:

Nic and Rich proposed creating as a mobile first, fully accessible, REM-sized cross-CMS theme, using CSS variables to empower easy end-user reskinning and tweaking. The planned main structure of the theme in response to these challenges is:

  • civicrm.css - pointing to:
  • _variables-{variation_names}.css - quick customisable values used across the theme
  • _base.css - resets and civi wide styles
  • _cms.css - CMS-specific hacks/workarounds
  • _core.css - components and utility classes
    • components/_accordion.css
    • components/_alerts.css
    • components/_buttons.css
    • components/_form.css
    • components/_icons.css
    • components/_nav.css
    • components/_tabs.css
    • components/_dropdowns.css
    • components/_tables.css
    • components/_dialogs.css… etc
  • _fixes.css - deprecated-Civi handling, hacks/workarounds. One day this should go.
  • bootstrap.css - pointing to:
  • _bootstrap3.css - a subset (ie shrunk version) of Bootstrap 3.
  • _bootstrap5.css - potentially

This structure is designed to address the following challenges and needs:

  • Supporting some of Bootstrap 3 and Bootstrap 5 potentially. We propose doing this through a subset that includes only the parts of Bootstrap 3 Civi currently uses (a small percentage) and some parts of Bootstrap 5 that would be useful.
  • Accessible. Standards in accessibility have evolved fast. Just taking base font-size - the current standard practice is to let the browser define this, with a default of 16px and scale every page font in proportion using Rems. However, in Bootstrap 3: HTML is 10px, body is 14px, all sizes are set in pixels. WordPress and Joomla 3 are worse: both have 13px body size, same as the Seven admin theme on Drupal 7 and 8. Bootstrap 4 & 5, Backdrop, Joomla 4 and Drupal 9 Claro theme get it right: body is 1rem, inheriting pixel size from browser (aka 16px). But it’s an extra complexity for Civi cross-CMS theming. To understand why this is so important, Rich made a demo: https://artfulrobot.uk/lil/about-rems/.
  • Working everywhere (across WordPress, Drupal 7 & 8/9/10 (Claro & Seven theme), Joomla 4, Backdrop & Standalone). To help test one theme across all CMSs, we’re running development environments that use symlink aliases of the extension folder to load one theme into multiple test CMs.
  • Separating the unavoidable CMS and Civi ‘hacks’ from the core style definitions. The theme uses two types of hacks – one to handle quirks of the CMS, and another to support legacy Civi markup. For instance, the latest Claro theme for Drupal 9 brings in a bunch of non-namespaced style definitions that clash with CiviCRM that need overwriting. Over time we’d hope the Civi hacks section vanishes, and the CMS hacks gets smaller as CMS admin themes respond to feedback.
  • Bringing mobile support to table-heavy user interfaces. CiviCRM has had a mobile-friendly window for a long time, but many screens depend on tables, which don’t degrade to mobile view. Change a table layout to a card layout is possible with CSS, but requires some care.
  • Easily re-skinnable. CSS Variables bring a pattern familiar to those used to SASS or LESS where a font, colour or dimension is defined once and then referenced across a style sheet. So if you’re very attached to CiviCRM looking a certain way - be it for client branding guidelines, your agency’s in-house style, the strict clinical requirements of the CRM or that all your documentation was made using Shoreditch, then reskinning should be a 30 minute job. For Civi Standalone during the Antwerp Sprint, a test was made (https://lab.civicrm.org/nicol/standalone-ui/-/blob/main/standalone.css ) for the login screen, using 21 variables to switch between a Shoreditch, Aah, Finsbury Park and a completely different look-and-feel.

Comments

    Please register or sign in to add a comment.