Extending custom classes available in AAT

[kirsty-hames]

Subject of the enhancement

In earlier PRs we exposed some of Vanilla pre-bundled classes in the AAT Theme settings config (block spacing and component alignment as seen in the screenshot below).

Expected behaviour

The more classes we expose in the tool the easier theming AAT courses becomes for users who aren't as familiar with CSS classes. Firstly, I don't think all classes should be exposed in the tool as this isn't necessary and could become overwhelming with the amount of class options and potentially troublesome. I think the application of background colours is a separate topic that needs considerate thought but there a couple of commonly used block classes I think would be useful to make available in the tool. I'd like thoughts on adding the following block config options:

Width: default (no class applied) | increase block width (applies extend-content-container class) | fill course width (applies extend-container class)

Layout: default (no class applied) | reverse desktop component order (applies reverse-desktop-order class)

By creating the width and layout configurations it means future classes can be added as options rather than creating a new config for every class which could get very long potentially. I think particularly the layout config gives scope for classes created for custom themes to be added too. Note, I'm not wed to the naming/wording but you get the gist. Thoughts?

[swashbuck]

I like this idea. 👍

Agreed that we need a solution for background colors. Having to type bg-color some-client-color is difficult for course creators to remember.

Are the column classes (ex. col-md-8) currently included in the AAT options? That could be a nice addition. However, there are a lot of options we would need to include in the dropdown. Could be split up into 4 dropdowns for xs, sm, md, and lg?

[kirsty-hames]

Are the column classes (ex. col-md-8) currently included in the AAT options? That could be a nice addition. However, there are a lot of options we would need to include in the dropdown. Could be split up into 4 dropdowns for xs, sm, md, and lg?

Hey @swashbuck, column classes aren't officially supported in the AAT mainly due to the limitations of the AAT Page structure UI. You can't add more than two components to a block and the component display is limited to left, right and full layout. There's a discussion for the support for more than two components and column layouts in Core here.

However, with the current limitation of two components per block, there's no reason why you couldn't use column classes e.g two components at 5 and 7 columns to break up the default 50/50 display. Note, this wouldn't be reflected in the AAT Page structure UI so you would have to preview your course to see the classes take effect.

In addition, column support for Boxmenu item widths is now supported in Vanilla.

I think until we have a user friendly approach to supporting column layouts within AAT, I can only see technical course authors using this.

[kirsty-hames]

Relates to adaptlearning/adapt-contrib-core#389 (comment)