Add support for col-xl-[1-12], col-2x-[1-12]

[shifatul-i]

Hi, this will be a nice addition for widescreens

Here is a sample css

@media screen and (max-width: 1600px) {
  .col-2x-12..........

@media screen and (max-width: 1280px) {
  .col-xl-12....

[alexandremjacques]

Agreed! That was my point on issue #115

[picturepan2]

@ThunderRoid @alexandremjacques Do you think 1600px width is a must-have one?

[shifatul-i]

@picturepan2 Yes, definately, nowadays most computer monitors are atleast 1920px

[alexandremjacques]

I agree. 1920px is a common resolution. Thanks a lot!

On Sun, Nov 20, 2016 at 7:20 AM Shifat Denocyte notifications@github.com wrote:

@picturepan2 https://github.com/picturepan2 Yes, definately, nowadays most computer monitors are atleast 1920px

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/picturepan2/spectre/issues/119#issuecomment-261767477, or mute the thread https://github.com/notifications/unsubscribe-auth/AB3OEvfbVAZ3kg0FP16xok5g_Zj45LRnks5rABDUgaJpZM4KwO5b .

[shifatul-i]

@picturepan2 add 1600px and close this issue please...

[mateosantosdev]

Any update on this ?

Thanks!

[picturepan2]

@Klian I don't add 2x breakpoint yet. No idea how many people need it.

[alexandremjacques]

@picturepan2 please take a look in tables like this one: http://www.rapidtables.com/web/dev/screen-resolution-statistics.htm

IMHO, you really should reconsider... 😄

By the way, loving the new and experimental stuff! I really think the only flaw in Spectre is this issue. 😉

[picturepan2]

@alexandremjacques Yes, I know there are about 16.58% browser resolutions larger than 1440px wide (Source: http://gs.statcounter.com/screen-resolution-stats). What makes me hesitate is I have no idea how many Web dev will need to 2x to responsive apps or websites.

Thanks.

[alexandremjacques]

@picturepan2 To be fully responsive, a website/app must provide a good experience in every resolution. You'll never know what your clients are using to access your app. That's why other frameworks opt to use min-width instead of max-width in breakpoints. At least the website/app keeps its proportions/layout right (unfortunatelly it's not the case with Spectre. See #125). I'm talking out of my experience with Spectre and an corporate app I am building. I have clients with resolutions as small as 1024x768 and clients with resolutions 1680x1050 and over. And believe me, those wide resolutions are becoming really common these days (almost all new notebooks have wide screens and 1080p resolution).

It's not that I cannot adapt Spectre CSS to my needs. I actually have to do it because of my scenario. It just adds an extra step in my build process that is error prone.

Again, thanks keep up the great work!

These are just some considerations I have when using Spectre.

[picturepan2]

@alexandremjacques Great. And what do you think for the 2x breakpoint, 1440px or 1600px? Or other resolution?

[alexandremjacques]

I would use something like this as a reference for breakpoints:

I guess it would cover the whole range of devices.

[maxstrebel]

@picturepan2 would it be possible to solve these with a scss map? This way everybody could extend, name and/or minimize this by their own.

Where does the naming "x2" come from?

[seakrebel]

Actually responsive css rules should use min-width instead of max-width. That is called mobile-first approach. But not using this approach is totally fine, and since you already covered screen sizes up to 1280px, you don't need to add any extra rules. Because even for screens that are 1920px, most developers still prefer having containers not wider than 1200px. Containers that are larger than 1200px could look bad and mostly require a LOT of text so they don't look as bad.