Answers.Body: <p>This was covered during CiviCon St. Louis.  I'll try to sum up.</p>
  
  <ul>
  <li>There's no way to write an extension that works with both pre-Shoreditch and post-Shoreditch conventions.</li>
  <li>However, it will be a fairly common site in Civi for some time to come to have extensions that implement Shoreditch operating inside of pages that don't.  Mosaico is a good example of this.</li>
  <li>Shoreditch is just one implementation of a Civi theme - the future may hold others.  However, for practical purposes I think we can assume there aren't any others coming for a while.</li>
  </ul>
  
  <p>So your options are to either a) ignore all this and do things the old way, or b) implement the Shoreditch theme and make it clear that it's a "dependency" in the docs (until we get for-real dependency management for extensions).</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-21T13:37:58.817Z
Answers.Text: I'll add to this that the styleguide extension provides a page which displays common elements -- how to mark them up, and how that markup is displayed in the current theme. This extension was primarily developed to facilitate development of shoreditch, so you'll find that the guide for the "crm-*" theme is basically a stub.
Answers.UserDisplayName: universalhandle
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-15T18:12:12.323Z
Answers.LastActivityDate: 2017-06-15T18:12:12.323Z
Answers.UserDisplayName: Jon G - Megaphone Tech
Answers.Body: <p>So, Shoreditch is a <a href="http://getbootstrap.com/" rel="nofollow noreferrer">Bootstrap</a> based theme, and as such if you want to use it in your extension, you need to have your extension's markup comply to the Bootstrap markup convention (documented in the Bootstrap site).</p>
  
  <p>Given that that convention is different than the one used by "vanilla" CiviCRM, you can't really have your extension look the same with and without Shoreditch, unless maybe if you plan to use the <code>custom-civicrm.css</code> file.</p>
  
  <p><code>custom-civicrm.css</code> is a file that Shoreditch provides that, when used as the value for the "Custom CSS url" field in <em>civicrm/admin/setting/url</em>, will attempt to make all the screens using the old convention (including core ones) look as if they were Bootstrap based. In theory then if you used it you could write your extension using the old convention and having it look good both in a non-shoreditch and in the shoreditch theme. </p>
  
  <p>I'd suggest against it though for a couple of reasons:</p>
  
  <ol>
  <li>The file is far from being finalized and the end result might not look as good as one would hope in certain areas</li>
  <li>One of the reasons for developing  Shoreditch is to push CiviCRM to migrate gradually to Bootstrap, so writing your extension with the old markup convention while still planning to have it work alongside Shoreditch would not align with that goal.</li>
  </ol>
  
  <p>So I'd agree with Jon G that if you want to use Shoreditch, you should then go all the way and write your extension with the Bootstrap markup</p>
  
  <p>There's a big caveat though and a disclaimer I need to give: Shoreditch is still in an alpha stage of (internal) development and as such I would not recommend using it for production, as many things could still be changed in the meantime (style and implementation wise) and break things downstream</p>
  
  <p>Hope this was helpful!
  Alessandro</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-16T13:01:33.020Z
Answers.LastActivityDate: 2017-06-16T13:07:54.143Z
Answers.LastEditDate: 2017-06-16T13:07:54.143Z
Answers.UserDisplayName: AkA84
Body: <p>I am writing an extension and I would like to know the best way to implement form elements, etc. in the most concise and future proof way.</p>
  
  <p>My approach until now has been just to copy from another screen that I consider to look fairly nice, but now that we have projects like <a href="https://civicrm.org/extensions/shoreditch" rel="nofollow noreferrer">https://civicrm.org/extensions/shoreditch</a> in the works, I'd like to future proof my work and would love it if we could start to coalesce around a set of fairly high level rules.</p>
  
  <p>I confess that I haven't yet installed <a href="https://github.com/civicrm/org.civicrm.shoreditch" rel="nofollow noreferrer">https://github.com/civicrm/org.civicrm.shoreditch</a> or <a href="https://github.com/civicrm/org.civicrm.styleguide/" rel="nofollow noreferrer">https://github.com/civicrm/org.civicrm.styleguide/</a> which I suspect may well answer this question. If it does, I have another question: is it possible to write an extension that will look good using our pre-shoreditch theme and the shoreditch theme? Or is the pragmatic approach to just try and make things look nice with Shoreditch?</p>
  
Tags: <ui>
Title: Where is the CiviCRM UI styleguide / reference?
ThreadText: # Where is the CiviCRM UI styleguide / reference?
  
  (Asked by: username_0 on 2017-06-15)
  
  I am writing an extension and I would like to know the best way to implement form elements, etc. in the most concise and future proof way.
  
  My approach until now has been just to copy from another screen that I consider to look fairly nice, but now that we have projects like <https://civicrm.org/extensions/shoreditch> in the works, I'd like to future proof my work and would love it if we could start to coalesce around a set of fairly high level rules.
  
  I confess that I haven't yet installed <https://github.com/civicrm/org.civicrm.shoreditch> or <https://github.com/civicrm/org.civicrm.styleguide/> which I suspect may well answer this question. If it does, I have another question: is it possible to write an extension that will look good using our pre-shoreditch theme and the shoreditch theme? Or is the pragmatic approach to just try and make things look nice with Shoreditch?
  
  **Tags:** ui
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2017-06-15. Score: 3
  
  This was covered during CiviCon St. Louis. I'll try to sum up.
  
  * There's no way to write an extension that works with both pre-Shoreditch and post-Shoreditch conventions.
  * However, it will be a fairly common site in Civi for some time to come to have extensions that implement Shoreditch operating inside of pages that don't. Mosaico is a good example of this.
  * Shoreditch is just one implementation of a Civi theme - the future may hold others. However, for practical purposes I think we can assume there aren't any others coming for a while.
  
  So your options are to either a) ignore all this and do things the old way, or b) implement the Shoreditch theme and make it clear that it's a "dependency" in the docs (until we get for-real dependency management for extensions).
  
  > **Comments:**
  > **username_2**: I'll add to this that the styleguide extension provides a page which displays common elements -- how to mark them up, and how that markup is displayed in the current theme. This extension was primarily developed to facilitate development of shoreditch, so you'll find that the guide for the "crm-*" theme is basically a stub.  
  
  ---
  
  ### Answer by username_3 on 2017-06-16. Score: 3
  
  So, Shoreditch is a [Bootstrap](http://getbootstrap.com/) based theme, and as such if you want to use it in your extension, you need to have your extension's markup comply to the Bootstrap markup convention (documented in the Bootstrap site).
  
  Given that that convention is different than the one used by "vanilla" CiviCRM, you can't really have your extension look the same with and without Shoreditch, unless maybe if you plan to use the `custom-civicrm.css` file.
  
  `custom-civicrm.css` is a file that Shoreditch provides that, when used as the value for the "Custom CSS url" field in *civicrm/admin/setting/url*, will attempt to make all the screens using the old convention (including core ones) look as if they were Bootstrap based. In theory then if you used it you could write your extension using the old convention and having it look good both in a non-shoreditch and in the shoreditch theme.
  
  I'd suggest against it though for a couple of reasons:
  
  1. The file is far from being finalized and the end result might not look as good as one would hope in certain areas
  2. One of the reasons for developing Shoreditch is to push CiviCRM to migrate gradually to Bootstrap, so writing your extension with the old markup convention while still planning to have it work alongside Shoreditch would not align with that goal.
  
  So I'd agree with Jon G that if you want to use Shoreditch, you should then go all the way and write your extension with the Bootstrap markup
  
  There's a big caveat though and a disclaimer I need to give: Shoreditch is still in an alpha stage of (internal) development and as such I would not recommend using it for production, as many things could still be changed in the meantime (style and implementation wise) and break things downstream
  
  Hope this was helpful!
  Alessandro
  
  
  ---
  
  