is is possible to leave bootstrap to the theme?

[tttp]

Hi,
For what I understand, this extension bundles both

• bootstrap css+js
• civi specific changes to make it play nicely with bootstrap

As most of our themes are already including bootstrap, is there a way to only include the later?

[totten]

tldr

You can probably use other Bootstrap-compliant extensions (such as Mosaico 2.x) without Shoreditch, but there are follow-up questions in this scenario, like:

1. How does one customize civicrm.css with other themes?
2. How does one load the JS files with other themes?

(Extra Thought) In the long-term, some community-of-practice/guidance for CMS themes seems inevitable. However, that will by its nature be a nuanced/exacting problem-space. The aim in publishing Shoreditch as a Civi extension is to provide a good baseline that works with new+old Civi screens across several environments so that a typical implementer doesn't need to master the topic.

General Architecture

I've found it helpful to talk about theming along these lines:

• Look and Feel: This is the visual appearance of the overall site as perceived by a user (colors, spacing, fonts, icons, etc).
• CSS and HTML Providers: A theme (like Shoreditch) outputs CSS documents to define the look-and-feel. An application-module (like Mosaico 2.x or CiviCase 5.x) outputs HTML documents.
• HTML/CSS Vocabulary: This is the the contract between the theme and application. In our situation, we specifically care about two vocabularies: crm-* is the historical/in-app convention for civicrm-core, and BootstrapCSS is a widely used convention in the general webdev community.

If you're a designer/integrator/customizer who wants to change the overall look-and-feel, then your aim is to provide is a pair of CSS files:

• Provide a CSS file for the BootstrapCSS vocabulary (aka bootstrap.css). This will determine the look-and-feel for Mosaico 2.x or CiviCase 5.x. You might address this need by installing Shoreditch -- or by installing a suitable CMS theme.
• Provide a CSS file for crm-* vocabulary (aka civicrm.css). This will determine the look-and-feel for CiviCRM, CiviVolunteer, etc. You might address this need by doing nothing (and relying on the default version in civicrm-core), or you might install Shoreditch, or you might build your own.

If you're trying to implement your own look-and-feel, you can use the Styleguide. It provides some reference material on the vocabularies, and it provides a smoketest (for a general visual of how well your CSS works with conformant HTML).

Additional notes, caveats, monkey-wrenches

• When CMS designers talk about a "Bootstrap-based theme", there's an ambiguity: they could be referring to a theme which complies with the BootstrapCSS vocabulary, or they could be referring to a theme which builds on mixins/variables/utilities from Bootstrap's SCSS/LESS. The distinction is significant:
  • Complying with BootstrapCSS vocabulary means interoperability between applications (eg Mosaico 2.x, CiviCase 5.x) and themes (eg https://bootswatch.com/ ).
  • Building on the same LESS/SCSS tools is less clear -- maybe you follow the same vocabulary, maybe you provide a totally different vocabulary.
• You asked about "civi specific changes to make it play nicely with bootstrap". I don't quite think of it that way. As I understand it, the notable bits in Shoreditch are:
  • Aesthetics -- The Shoreditch designers/developers wanted a specific look-and-feel.
    • If you're trying to use a CMS's Bootstrap theme, then you don't care about this (because you have your own look-and-feel).
  • Guarding/Resetting -- To ensure that Shoreditch is a well-behaved neighbor (coexisting with CMS themes), it only applies when there's a special HTML tag (<div id="bootstrap-theme">...</div>). It won't interfere with other parts of the page, and (within its space) it will take defensive measures to prevent interference from others.
    • If you're trying to use a CMS's Bootstrap theme, then you probably don't care about this -- because you already have full ownership over the page.
  • civicrm.css -- Shoreditch optionally overrides civicrm.css. This is really a separate deliverable which is not part of the BootstrapCSS vocabulary. (As an implementation detail, it is written with BootstrapSCSS.)
    • If you're trying to use a CMS's Bootstrap theme, then you might want to produce your own build of civicrm.css with your look-and-feel. But this is still WIP within Shoreditch, and there's no guide to doing it generally. I'm sure contribution/collaboration is welcome.
• I describe a very CSS-centric worldview. org.civicrm.shoreditch goes a bit beyond this vision by also loading some of the BootstrapJS files. I don't know what to say about that. I suppose it's another area where insight/contribution/collaboration is welcome.

[totten]

Another good person to comment on this is @AkA84.

[xurizaemon]

Thanks Tim, that's really helpful. Hope to follow this up with informed feedback once we've given it a spin.

[gah242s]

Is Backbone.js a current monkey-wrench or does this allow for side-stepping the issue? Or does it not even play into this scenario? (https://issues.civicrm.org/jira/browse/CRM-17352) Selfishly, I'm hoping it's a monkey wrench because of the large-ish amount of WordPress theme/plugin problems.

[totten]

IMHO, Backbone.js should be treated as orthogonal to CSS. (Technically speaking, any permutation of {BackboneJS,AngularJS,EmberJS} x {BootstrapCSS,crm-*} is conceivable -- although obviously one might go insane if they actually worked with every permutation continuously.)

CRM-17352 sounds like a legit-but-separate issue.

[nganivet]

Tim - great write-up, this ought to be transferred to an 'architecture' chapter in the developer documentation so we all work from the same notions/vocabulary.

[jeffcapeshop]

Hi - I wanted to try this out but i have to confess to being a little confused as to how to get it working - if it applies only with id="bootstrap-theme", what creates that markup? is there a specific/default theme?
Thanks!

[AkA84]

@jeffcapeshop well the bootstrap theme is supposed to be used in new pages, so when you create a new page (for example of an extension that you are writing) you will write the markup contained in an element with [id="bootstrap-theme"] and the theme will be applied automatically

<!-- my-extension-template.html -->
<div id="bootstrap-theme">
  <!-- here goes your extension's bootstrap-compliant markup -->
</div>

[jeffcapeshop]

@AkA84 and what about the core theme? if i use custom-civicrm.css option, it only matches visually if i use the Seven admin theme, not bootstrap. What is the expected setup to use this with core?

Thanks

[AkA84]

@jeffcapeshop

if i use custom-civicrm.css option, it only matches visually if i use the Seven admin theme, not bootstrap

Can you show me with a couple of screenshots what you mean?

Currently we are testing the theme only with Seven, not with other themes

[sleewok]

Can you PLEASE add information in the readme about setting the Drupal theme to Seven? That seems like a pretty important detail to be missing...