This is an attempt to aggregate key resources, docs, links, files, etc related to the CiviCRM User Interface (UI) and User Experience (UX) - so please edit this page in the wiki if you can add to it or correct something.
UI reference guide
Includes correct markup for accordions, buttons, icons, date picker. Also a guide to usage of post 4.7 FontAwesome icons.
Templating reference guide
Overriding core template features
A brief history..
2004.. CiviCRM launches
2009: Templating changes (3.1)
Following the NYC dev sprint was an increased focus on improving markup, moving from tables to divs with more care over CSS specificity (details).
This led to a few docs outlining a bunch of problems:
- Some guidelines: https://wiki.civicrm.org/confluence/display/CRM/Interface+design+guidelines
- Usability issues: https://wiki.civicrm.org/confluence/display/CRM/Usability+-+Layout+and+CSS
- Form layout: https://wiki.civicrm.org/confluence/display/CRM/Layout+Standards
This had some progress with an update in 2010 (https://civicrm.org/blog/kylejaster/civicrm-31-templates-theming-css-bonanza) - and which inspired development of the theming engine still in existence today.
2014: CiviCRM & Bootstrap
This began as a GSoC project in 2014. It is listed as goal 2 on the CiviCRM Roadmap.
Forum thread: https://forum.civicrm.org/index.php%3Ftopic=31534.0.html
Bootstrap based and developed by Compucorp in response to slow rollout of the CiviCRM/Bootstrap project, built for Drupal 7. https://github.com/compucorp/org.civicrm.shoreditch
At time of writing, Shoreditch is the only theme which implements a consistent look-and-feel in both vocabularies. It is intended to be a bridge that provides a consistent look-and-feel while other parts of the application transition from
Blogs: March 2018
Shoreditch design guide:
Current admin themes:
Matthew Wire turned CAU into an early extension that can run across all CMSs, with CMS-specific overrides and some user-config. It uses responsive tables to considerably improve the mobile and tablet behaviour of Civi admin pages. https://github.com/mattwire/civicrm-haystacktheme
Cross-CMS: Finsbury Park
Drupal-only: Shoreditch (see above)
WordPress-only: CiviCRM Admin Utilities (CAU)
With funding from Tadpole, CUNY and Greenleaf, Christian Wach created a set of WordPress CiviCRM admin utilities that, amongst other things, made CiviCRM's look and feel much closer to that of WordPress admin. https://wordpress.org/plugins/civicrm-admin-utilities/
Single file / cross-CMS: Shelford
A single css file running on top of civicrm.css, loaded through the admin paths page. The advantage of a single file is you can create a multi-cms test environment and load the same file in each so can test changes across all CMSs) https://github.com/vingle/civicrm-shelford
Old/deprecated solutions https://github.com/andy-walker/com.uk.andyw.styler
What's in a name? CiviCRM themes traditional follow the name of where they were created