A little while ago the team here at Compucorp wrote about Shoreditch, the first CiviCRM “theme’ extension. Over the past few months, we’ve been hard at work on a series of updates and changes ready for the theme’s release in a few weeks time! With much of the work on this first stage now completed we’re pulling back the curtain to give a peek at what’s in store.
We’ll be following up shortly with more technical details about what this means for developers and how to migrate to Shoreditch or start using the new Bootstrap styles (yay!) but in the meantime let’s take a little look!
Colours / Colors...
So, what’s changed? Well, the most obvious difference is the adoption of a new colour palette which significantly improves both the overall look of Shoreditch and also the readability of screens on a wide range of monitors. The new colours all meet WCAG AA contrast standards for usability and accessibility to ensure that we’re not just making CiviCRM better looking, but more accessible for everyone, too.
Menu:
Another huge change is the design of the menu, which is now bigger and easier to use. The new menu introduces icons to improve usability and make lists glanceable, meaning it will be easier and quicker to find the right menu item when you need it.
Other improvements:
We’ve also been working to improve the layout of some of the core elements, such as page titles and improvements to padding and margins for tables. Arrows have been moved, icons realigned and fields fixed widths. Information messages are more consistently placed and coloured, buttons are better separated from contact. The result of this is condensed and cleaner screens for CiviCRM which are much easier on the eye.
Sounds good… when can I get it!
We’re currently working hard to complete Shoreditch to cover the entirety of CiviCRM core*. We estimate this should be done in the next 2 weeks… so were tantalisingly close.
If you’d like to try Shoreditch for yourself, it can be downloaded here. Simply download and install the extension as you would any other CiviCRM extension. To enable the theme for the whole of CiviCRM you should go to CiviCRM > Administer > System Settings > Resource URLs and change the custom css URL to the "Shoreditch" option.
Give it a go and let us know what you think!
*Note: The current plan is that Shoreditch will not cover the legacy mailing and cases module at launch and instead will only be designed for the newer Mosaico and CiviCase extensions (see below).
Shoreditch with Mosaico (Drag and Drop malings) and the new CiviCase extensions:
Although the Shoreditch theme is currently in alpha, it is already being used by both the new Mosaico and CiviCases extensions.
If you are not ready to use Shoreditch for your entire CiviCRM install (i.e. all screens) it can be enabled for just the Mosaico and new CiviCase extensions without enabling the theme for the entire CRM site. The new interfaces for Mosaico and Cases will load the Shoreditch theme just for their pages leaving the rest of your installation to load your normal CiviCRM look and feel.
To do this simply download and install Shoreditch and enable the extension. Do not change the CiviCRM CSS url as per the instructions above.
If you do wish to enable the theme for the whole of CiviCRM you can also go to CiviCRM > Administer > System Settings > Resource URLs and change the custom css URL to "Shoreditch" as mentioned above, but this is not required for Mosaico (Drag and Drop malings) and the new CiviCase to work.
Shoreditch as a design system:
The next step for Shoreditch is for the theme to evolve into a fully fledged design system. A design system is a collection of reusable components, guided by clear standards, that can be assembled to build the desired user interfaces whilst retaining a common design language.
Using this method means that as Shoreditch feeds back into the CiviCRM community we can support extension developers and new developments for CiviCRM to follow the new Shoreditch look and feel and to ensure a crisp and inviting interface for the future!
More than just a theme… (Disclaimer: Technical stuff below… feel free to skip if you just came over to see the new screenshots!)
Shoreditch is more than just a new look and feel for CiviCRM’s existing pages. It’s also designed to usher in support for the Bootstrap HTML markup framework - a commonly used HTML framework for page development which facilitates responsive (mobile friendly) design.
As such Shoreditch is actually 2 themes in 1… A theme (set of CSS classes) which restyles all the original CiviCRM screens written in CiviCRM’s less well defined markup, and also a second theme which styles new screens written in Bootstrap markup (such as Mosaico and the new CiviCases extensions).
Once all the work on the theme is complete, as a user or administrator you shouldn’t notice this at all, all screens will look “Shoreditch”; but from a developer point of view, this will allow those who adopt Shoreditch to move over to using the Bootstrap markup…!!
We’ll be following up shortly with more technical details about using Shoreditch to create new Bootstrap based screens in your extensions with the help of the “style guide” extension list of components so watch this space!
Next steps - Make it happen for Phase III - Wordpress and Joomla full compatibility:
We've mainly tested this initial Shoreditch release on the Drupal user interface but we'll shortly be putting up a make it happen for full testing for Joomla and Wordpress compatibility. Whilst we believe that Shoreditch should mostly work on Joomla and Wordpress, we'd welcome feedback and bug reports for when we do start that work. We've also got a lot of work to complete the styling for the new cases interface and finalising the style guide, but we'll be reporting updates more frequently as we go!
We’re super excited about what Shoreditch can mean for CiviCRM and are looking forward to hearing feedback!
Have a great weekend!
Jamie
PS: And for those who were wondering what Shoreditch means... it's our little pocket of East London where the Compucorp team are based and hangout. You'd be very welcome to visit us someday! You can find out more about Shoreditch the place here.
Comments
Amazing work! We're planning to base a new CiviCRM Major Events extension on this design framework. Can't wait for the Make it Happen campaigns to launch!
Hi
This is really beautiful work. Thank you!
When you say "the new CiviCase extensions" what are you referring to? I don't see anything obvious in the extensions directory. I assume you must be referring to more than just enabling CiviCase.
Maybe it is this? https://civicrm.org/working-groups/civicase-ui
So .... when it part two of this artice coming? Been patiently waiting for ages.