Responsive Grid

[aabmar]

I make web apps that are cross platform phone/web/tablet. I have made a very easy CSS hack to make the design responsive. The thing I do is change the grid columns to 100% width and no float on small screens. This prevents me from using grids in toolbars.

I propose to make a separate css class that can be added to grids in a standard way to make them responsive.

My CSS hack to make the current grid responsive:

@media all and (max-width: 659px) {
  block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e {
    padding: 0;
    border: 0;
    float: none;
    min-height: 1px;
  }
  .ui-grid-a > :nth-child(n) { width: 100%; margin: 5px 0; }
  .ui-grid-b > :nth-child(n) { width: 100%; margin: 5px 0; }
  .ui-grid-c > :nth-child(n) { width: 100%; margin: 5px 0; }
  .ui-grid-d > :nth-child(n) { width: 100%; margin: 5px 0; }
}

I really hope responsive CSS will make it to the 1.2 release.

Keep up the good work!

[toddparker]

This is a nice, simple way to make things responsive and it might make sense to add a section on the grid page explaining how to use media queries and simple overrides like this to adapt the layout. The issue with all RWD stuff is it's content and design specific so a hard-coded rule like 659px won't work for everyone. Maybe @uGoMobi and myself can whip up some docs info on this and a demo.

[aabmar]

It's true that the 659px may be a little bit spesific for my project.

Bootstrap has got the responsive stuff quite right, and I hope JQM can do something similar. It is possible to make it work for like 90% of the users, because the most important stuff to get right is: "if this is a mobile phone, show under each other, if it is a tablet show it beside each other". Hence the 660 limit, tablets always has more and phones always less (after pixel translation on retina displays).

But, of course, to just write something on how to do it in the docs, is also a good way. Then people will do it the same way, and it is easier to make it into the library later with as little code change as possible for the users.

[toddparker]

Sure. This type of thing is on our rader for the next release or two. BTW - it's better to use EMs for the media queries so they will adapt to the user's font size setting. If you have a 1,200 pixel wide display but have your font size bumped up to 60px, you want to use more of a smartphone style layout.

[serbanghita]

I'm totally for this fix, I will test it in my web app asap. I was using a ui-grid-a with ui-block-a containing 'Total price: [PRICE] [CURRENCY]' and ui-block-b containing the inline button 'Buy now'. I've noticed on Samsung Galaxy I and II (depending on the price) the texts run into each other.

In this case i cannot overflow:hidden; text-overflow:ellipsis; since the user will be highly confused.

This RWD fix comes in very handy in this situation!

[jaspermdegroot]

We have to make this feature optional, because we use the grid CSS for the navbar too and when you use a grid to display icons or something you don't want it to become full width either. Simple solution would be using an additional class (ui-responsive?).

[aabmar]

Agree, it must be an additional class to make a grid responsive.

[toddparker]

Yes, this would have to be an extra class so folks can choose whether we should stack at narrower widths. The issue I see is how to choose a breakpoint for this that will be most useful since this is very dependent on the content and design. We could set this to kick in around 500px (but in ems) so its a smartphone type of thing.

Q: should be offer multiple breakpoints and/or more complex rules (ex. 3 col where the 1st or 3rd stacks under).

Thinking That the simplest approach is best alongside some docs and demos showing custom MQs.

[toddparker]

Worth noting that this is just an overview of how it should work. There is no JS in play and the column chooser popup is hard-coded.

[ryanilg]

Just thought I would drop this here for anyone else that it would prove useful...

https://gist.github.com/3902368

My method was to change the number of columns (4 becomes 2, 5 becomes 3, etc) if you are viewing it on smaller screens. You could also use the additional .ui-block-full that would remove the float, and make the column full width.

This was loaded in addition to the default grid, so it would use the defaults on larger screens.

[toddparker]

@ryanilg - Thanks, those changes look interesting. Could you post up a simple jsbin page illustrating these grid patterns? Template: http://jsbin.com/akudob/1/edit

Working on these now so you input is appreciated.

[ryanilg]

I have updated the jsbin... http://jsbin.com/otunuw/4

This was my use specific case, where as I am using grids inside of listviews, as well as in other areas. The great thing is, the same grid can be used anywhere.

If your window is above 767px, it uses the default grid. If below, instead of squeezing all the columns into the width, it adjusts the width of the grids, and drops the extras below.

1st column uses ui-block-full which forces it to be full width on small screens.

[toddparker]

I just created a simple test page that stacks all the various grids at narrow widths. Since it's impossible for us to pick a breakpoint width for the media query, we are going to handle this as a demo page that people can copy and paste styles and adjust the width on the MQ as needed:
http://jsbin.com/uwafuz/3/edit
http://jsbin.com/uwafuz/3/ (demo)

[scottjehl]

looking good!

On Oct 18, 2012, at 8:54 PM, Todd Parker wrote:

I just created a simple test page that stacks all the various grids at narrow widths. Since it's impossible for us to pick a breakpoint width for the media query, we are going to handle this as a demo page that people can copy and paste styles and adjust the width on the MQ as needed:
http://jsbin.com/uwafuz/3/edit
http://jsbin.com/uwafuz/3/ (demo)

—
Reply to this email directly or view it on GitHub.

[toddparker]

Thanks @scottjehl. I just added another demo showing a more complex media queries and various widths of the grids here. Easy stuff, but having a lot fo good examples will really help people.
http://jsbin.com/uwafuz/10/edit
http://jsbin.com/uwafuz/10

[toddparker]

A much simpler way to do this by using max-width instead
http://jsbin.com/uwafuz/11/edit

[toddparker]

We can refine the docs and breakpoint, but the feature can be previewed here:
http://jquerymobile.com/test/docs/content/content-grids-responsive.html