I need a grid having 1 columns for phones 2 columns for ipads and 3 columns on 1080p screens. I will also need more distinction for devices between 1000px and 3000px in screen-width. How to do that with vanilla SLDS?
What I've tried so far on the grid elements so far is
slds-col slds-size_1-of-1 slds-medium-size_2-of-4 slds-large-size_1-of-3
Works to distinct phones. But the breakpoint for large is to small. ipad will end up as being "large".
a) I need the ipad different of desktop b) i need to distinct between small desktop (e.g. width 1024 to 1400px) screen, bigger screens (eg. width 1400 to 1920px) and huge desktop screens (>1920px).
Actually the 3 sizes give me control over
- small < 768px
- medium < 1024px
- large >= 1024px
By far not enough.
So I thought there should be something like x-large and xx-large. Is that stuff existing and usable?
I've tried without success:
slds-col slds-size_1-of-1 slds-medium-size_2-of-4 slds-x-large-size_1-of-3
this fails, too
slds-col slds-size_1-of-1 slds-medium-size_2-of-4 slds-x_large-size_1-of-3
and this fails, too
slds-col slds-size_1-of-1 slds-medium-size_2-of-4 slds-xlarge-size_1-of-3
how to use x-large and xx-large?
how to extend it if xx-large would not be enough? eg. if I would need xxx-large or xxxx-large to distinct between the super huge screens?
CURRENT WORKAROUND
My current workaround is to calculate my desired column-count in the controller and to apply it via the class-attribute dynamically like this
class = "{!''
+' whateverClassName '
+' slds-large-size_1-of-' + v.layoutLargeColumnCount + ' '
}"
It works, but I hate this approach and would love to replace it by something else.
SCREENSHOTS
'slds-size_1-of-'+v.layoutColumnCount
- but I still think that is poor design provided by salesforce. Now I have to take care of rerenderings, window-resizings and other stuff always applying my custom "How-Many-Cols-Do-I-Have?-Logic" and that's error-prone. Delivering good and distinctive UX for super huge screens is IMHO exactly as important as providing good UX for phones or tablets. Any-Device-First, so to say... – Uwe Heim Oct 19 at 15:24