Document all CiviCRM Markup patterns in ThemeTest Extension
CiviCRM markup is full of examples of multiple methods to create the same UI element (buttons, accordions, modals, etc). By documenting every variation we can:
- make the process of theme-writing easier as all variations can be tested quickly
- support the process of agreeing a 'canonical' approach for best practice markup in a style guide
- help identify markup patterns that should be deprecated as too obscure, legacy or non-accessible.
This is being done with @artfulrobot's extension ThemeTest, below. To contribute, take a look at the issues. Preferably run a local copy of the extension in a recent Civi setup (any CMS), and work thru open issues or add patterns you've found that aren't documentedfollowing the instructions here: https://lab.civicrm.org/extensions/themetest#adding-patterns.
NB: this is a work in progress extension without release numbering, use the latest Main branch.
FTR, a distinct pattern is one which has its own CSS assigned to it in the default Greenwich theme or in Bootstrap3.css. So, for e.g. <span class="crm-button">
and <button class="crm-button">
as defined by the selector .crm-button
are the same pattern. But if there was a selector in civicrm.css targeting only button.crm-button
(there isn't) then they would be different.
At present UX markup patterns (aka 'snippets') have been written in these categories:
-
Accordions -
Alerts -
Buttons -
Dialogs -
Dropdowns -
Inputs -
Notifications -
Other -
Tabs -
Radios & Checklists -
Select lists (incl. Select2) -
Tables
The main gaps are:
Notes specific to this meta-issue can be added to the related Wiki page.