Using color as shown in the style guide

[george_hatsidim]

Greetings all,

I wish to incorporate the colors shown in the Canvas style guide Canvas LMS  but not clear on how to modify/embed the code into the HTML editor. In particular I wish to show different background colors for boxes constructed according to the Grid (flexboxgrid). With the help of a colleague I have managed to construct different grid designs but not clear on how to change the background colors according to the specifications shown in the style guide. Also if anybody has some creative ideas regarding changing other variables of the grid boxes (e.g. margins, borders etc.) and can show by example with codes or point me to some resources, would be much appreciated.

thanks,

George.

[Stef_retired]

 @george_hatsidim ‌, I've shared your question with the https://community.canvaslms.com/groups/designers?sr=search&searchId=cb4ea73e-1014-4cf0-b5dd-a8bc9d65...‌ group to get some experts' eyes on it. Their responses will appear directly under your prompt, and you won't need to join the group to see them—but if you'd like to join the group, you can easily do so by clicking on the link to the group and selecting Join Group from the Actions dropdown that appears at the upper right of the group home page.

[Stef_retired]

I've also flipped the format to a discussion in that the prompt is unlikely to elicit a single uniquely correct response; let's keep the conversation open-ended.

[rosemary_saul]

Stefanie, can you provide a direct link to the page in the Instructional Designers group? I'm in that group and can't find the discussion you posted. 

[Stef_retired]

 @rosemary_saul ‌, you're in the right place; this is the discussion. It's shared to Instructional Designers‌ . When we "share" a question or discussion to a group, it means that the members of that particular group have been alerted to its existence. That allows us to keep discussions streamlined and prevent parallel comment threads from forming.

[rosemary_saul]

George, the code looks like SASS. I think it's been put in the style guide so that institutions can use the styles in the css at the institutional level. We can't use the code inline. If you want to use the styles, right-click and go to inspect and copy the hex colours and use them inline. For example, to pick up the text colour of this message and its background colour, right-click on this text, choose 'inspect element' [Firefox] in the menu that appears. A pane will appear to the right or below this web page. Scroll through the css till you see 'color:' then copy it the hex value [#58595B]. The background colour is probably white [#ffffff] and so may not be defined in the css; however, if it was, you'd have to look for 'background:' or 'background-color:'. Once you've got those colours, add them to an existing html tag, e.g. <div style="color: #58595B; background: #ffffff">

[george_hatsidim]

Thanks Rosie,

given the lack of compatibility of flexbox grids with mobile devices I haven't gone ahead with using them in my designs. But I appreciate the answer and may revisit it if issues surrounding the use of grids are resolved.