User Interface

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.

Key resources

Theming guide

https://github.com/totten/civicrm-dev-docs/blob/master-theme/docs/framework/theme.md

UI reference guide

https://docs.civicrm.org/dev/en/latest/framework/ui/

Includes correct markup for accordions, buttons, icons, date picker. Also a guide to usage of post 4.7 FontAwesome icons.

Templating reference guide

https://docs.civicrm.org/dev/en/latest/framework/templates/

Overriding core template features

Current strategy..

The roadmap is for CiviCRM to integrate with Bootstrap.

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

Some docs: https://docs.civicrm.org/sysadmin/en/latest/integration/drupal/bootstrap-css/

2016: Shoreditch

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 crm-* to BootstrapCSS.

Blogs: March 2018

https://civicrm.org/blog/jamienovick/going-shoreditch-civicrms-new-ux-design-comes-to-life-pt-1-of-2

https://civicrm.org/blog/nathan-porter/a-look-a-civicrms-new-user-experience-shoreditch

Shoreditch design guide:

Current admin themes:

Cross-CMS: Haystack

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://lab.civicrm.org/extensions/haystacktheme

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