Adapt_framework: adapt-contrib-vanilla: Responsive classes?

Created on 1 Sep 2020 · 6Comments · Source: adaptlearning/adapt_framework

What are peoples thoughts on being able to apply a class depending on Adapt screensize?

I was thinking something like the following attributes to apply screensize specific classes at any level.

    "_screensizeClasses": {
        "_large": "",
        "_medium": "",
        "_small": ""
    }

Of course we can use media queries to create screensize specific styles however with AT users in mind, we already have responsive config in Vanilla giving users flexibility to apply styles per screensize. Is there any appetite for this?

question feature request

Source

kirsty-hames

👍2

All 6 comments

If it's going to make life a bit easier for AAT users to style things without having to amend vanilla then it sounds like a good idea...

Just to clarify: the _screensizeClasses object could be attached to any contentObject/article/block/component?

moloko on 10 Sep 2020

👍1

and that there's no way to achieve something similar using the existing _classes property in combination with the classes that are added to <html> i.e. .size-large, .size-medium, .size-small ?

If there isn't, just say there isn't - I trust your judgement on these things! No need to explain to a css-ignoramus like me ;-)

moloko on 10 Sep 2020

There isn't.

The _screenSizeClasses would get applied and removed responsively, similar to how the _backgroundImage or _minimumHeights work in the theme.

guywillis on 11 Sep 2020

👍1

Then it's a +1 from me

be interested to hear opinions from non-kineo people...

moloko on 11 Sep 2020

No need to explain to a css-ignoramus like me ;-)

.size-small .style-class {
  background: red;
}

.size-medium .style-class {
  background: green;
}

.size-large .style-class {
  background: blue;
}

Why wouldn't the above work?

olivermartinfoster on 15 Sep 2020

The example above assumes you want to add a css property to each screen size. The original post brings up the idea of only applying a class to a particular screen size without requiring custom css.

For example:

"_screensizeClasses": {
    "_large": "block-color black",
    "_medium": "",
    "_small": ""
}

This allows a user to define a black background colour onto a block on the large screenSize. This would then be removed for smaller screens, perhaps because it's being used in conjunction with a partially transparent background image which wouldn't visually work on smaller screens.

guywillis on 15 Sep 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings