Canvas themed CSS for LTI tools?

[John_Lowe]

Does anyone have a simple CSS stylesheet that you'd be willing to share that mimics the basic style of the Canvas UI that you use in your own in-house LTI tools?  I just need something that'll make a basic in-house LTI tool look and feel a little more like a native Canvas tool.  david_taylor lance_grigsby‌

[jpoulos]

Canvas LMS 
I think this is what you are asking for ^

Jesse Poulos

Partner Integrations Specialist

Instructure

[John_Lowe]

Thanks, Jesse.  Unfortunately not in this case.  That shows me what classes to use if I were doing pages and things within the existing Canvas CSS, but using the full Canvas stylesheet in an LTI frame really jacks with the formatting and page scrollling. I am really just looking for a simple stylesheet that mimics the native Canvas one for basics like font family, colors, sizes, lists, and tables. 

[ag3811 · Accepted solution]

Most of the Canvas style uses Bootstrap.  We've found that simply using Bootstrap gets us most of the way.

[bro16111]

One of the things I use to get the styling of Canvas is to use a Chrome extension CSS Used. This will copy the relevant CSS for a given page in Canvas

[ismail_orabi]

Try adding the $Canvas.css.common variable to your LTI config and you will get the url of the css file passed to you on launch. 

If you start using React in the future, InstructureUI provides a great library of components

[dlyons]

I came here to say exactly this, @John_Lowe ‌.  

The nice thing about use the LTI variable method is that your LTI will consume changes to the stylesheet automagically, instead of you having to maintain a copy/fork/whatever of it.

[matthew_buckett]

Although pulling in the common.css file allows you to style the LTI to look similar to Canvas you will be missing all the CSS variables that are set through the theme editor. You either need to get the LTI launch to pass these through as well or hardcode a copy of them. In my testing if I didn't pull in the brand variables I found form buttons won't be the right colour and some elements (eg radio buttons lose their selection toggle) aren't very useable.

[pklove]

We do this by including $com.instructure.brandConfigJS.url in the launch and run a bit of JavaScript to set the styles from CANVAS_ACTIVE_BRAND_VARIABLES.

Is this the approach you are using?

[matthew_buckett]

I just added $com.instructure.brandConfigJSON to be included in the launch and then converted to CSS serverside, to test that it worked. But the effect is the same as you pklove.

It would be helpful if Instructure would add support for $com.instructure.brandConfigCSS.url so that I didn't need todo as much work. I know they see their React UI as the way forward, but supporting this would just make people's live easier.

[matthew_buckett]

Actually you can just edit the URL sent in $com.instructure.brandConfigJSON and replace the .json with .css and it works fine (although as this isn't documented I'm guessing it may stop working in the future).