Styling web resources in Dynamics CRM 2016 support

Question

What is the recommended and supported way to style CRM web resources to look consistent with regular CRM forms, views and dialogs?

Presumably you would not reference the same styles that CRM is using as that would be unsupported, however are there a set of styles that can be referenced out-of-the-box to save time over writing yourself.

Answer 1

The CSS's used by Dynamics CRM/365 depend on the (rather messy) HTML layout of its web pages. This makes them less suitable as a foundation for a clean layout framework.

Some years ago I chose Bootstrap as my preferred layout framework and configured it to resemble the Dynamics CRM layout as close as possible. This still works great for me.

Answer 2

It's not CRM specific, but if you are looking into a framework, OfficeUI fabric might be a good choice or starting point: http://dev.office.com/fabric

And there are AngularJS 1.x directives and React components for OfficeUI farbic, in case you use one of these frameworks.

Answer 3

You can now use Stylus plugin, and it will work on phones to. With this you can add your own style to.

https://userstyles.org/styles/160949/dynamics-crm-365-custom-css-8-2-2-112-exclusive

On phones only Firefox right now.

Type Ex URL https://crm2016.domain.local/ORGANISATION/main.aspx

main.aspx is the important part.

Answer 4

If you are using anything before CRM 2013 you can find style sheets provided in the SDK downloads, otherwise have a look at: Microsoft Dynamics CRM 2013 CSS Style Reference using Browser Developer Tools.

Microsoft Dynamics CRM designers and developers may have noticed that a Style Guide for Microsoft Dynamics CRM 2013 was not released in the CRM 2013 SDK (Software Development Kit), though Style Guides were sometimes released in prior versions of the Dynamics CRM SDK.

Developers want to have reusable CSS files (Cascading Style Sheets) that they can reference to achieve the same look and feel as our application. The product does not provide these resources. We also do not support referencing the CSS files used in our application, because these files can change without notice via Update Rollup or Service Pack installations, or major version upgrades, and affect the UI of anyone referencing (reusing) them.

Here we describe a technique which allows you to create a reference page which includes copies of CSS files used in the application.

The article then describes how you should use a web debugger to basically copy/paste the CRM style implementations.