2

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

enter image description here

enter image description here

  • 1
    Unfortunately, grids only support the three breakpoints, 480, 768, and 1024. If you want any other type of design, you'll have to build your own. – sfdcfox Oct 19 at 14:57
  • @sfdcfox I see, and I did. Basically I'm down to '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
1

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.

TRUE! it will be too complicated with slds-size_1-of-'+v.layoutColumnCount' approach.

So, you can use media queries for fully custom/simple yet powerful solution. You can use this guide to begin with.

I also created this playground link for you.

When width is > 700px: enter image description here

When width is < 700px: enter image description here

When width is << 700px: enter image description here

  • I agree that this looks like a way cleaner approach, but I would need a lot more to get something like the grid system with a bottom-up approach. Would feel like reinventing the wheel. My guess is, that there is a way to extend the grid system with additional breakpoints. But I think salesforce should do that for us to encourage and support us to create an exceptional UX for huge screens in a way that the display "real estate" is used dynamically and smoothly. With the given 3 breakpoints focusing mainly mobile devices, that is simply not powerful enough. – Uwe Heim Oct 19 at 17:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.