feat request: make grid responsive by screen size

[Bandito11]

Hi,

This is not an issue more of a suggestion. I am doing a Windows 10 desktop app, and I was thinking "If I decided to do an app that worked for desktop and mobile I would have to make the grid work on different screen sizes".

So my suggestion is that the grid works on different screen sizes like:

width for mobile: width < 600px
width-m for tablets: width > 600px
width-L for Desktops: width > 1200px

or something similar. Same with the offsets.

[adamdbradley]

These sizes should be configurable. Specifically which lines of code would you liked changed?

[Bandito11]

No I know how to do that. (In fact I think you guys did it in a similar way I did in the past in sass). I've meant like add it to a future installment.

[adamdbradley]

Do you mean for ionic1 or ionic2? So far these numbers have been working great for us: https://github.com/driftyco/ionic/blob/2.0/ionic/components/grid/grid.scss#L13

[Bandito11]

This would be for ionic 2. I don't meant to change it, but like add option so that the grid is implemented for different sizes. Like this grid will be implemented if the screen size is large.

In other words if I do this:
d for desktop and t for tablet

<ion-row>
<ion-col d-width-10 t-width-30>
<ion-input></ion-input>
</ion-col>
</ion-row>

The grid will just act different depending on the screen size.

[dylanvdmerwe]

As per my suggestion else where, I believe Ionic's grid needs to be enhanced at some point in the future. I would highly recommend basing it off something like bootstrap 4.

[mikewagz]

+1 for a responsive grid system a la Bootstrap!

[brandyscarney]

@mikewagz Please add a thumbs up on the original comment, we can sort issues by these. :)

[seanmavley]

@brandyscarney I came across this answer: http://stackoverflow.com/questions/36018146/ionic-2-responsive-grid

Is there somewhere in the ionic 2 docs that mention the use of the responsive-sm attributes?

[brandyscarney]

@seanmavley Unfortunately it probably isn't documented. I am currently working on improving the grid system and with the improvements I'll be writing new documentation for it. I'll update this issue once I have something for you all to try. Thanks!

[brandyscarney]

Hey everyone, I have been working on the new grid system based on Bootstrap 4. Here is a stand alone example of it: grid.zip

I've released a nightly if you'd like to try it out, using this nightly should still work with the old system:

npm install --save [email protected]

And here is a document (a work in progress) where I have written up some information on it: Ionic Grid API

The old grid system will eventually go away, but for now it should still work. If you see your current grid completely break or if you have feedback on the new system please let me know. Thanks! :)

[mikewagz]

@brandyscarney - I really appreciate the work you're doing on the grid system, it has the potential to make Ionic much more flexible for various devices. I personally can't wait to upgrade our startup's iPad version to take advantage of this.

I checked out the doc you posted and had a question with how you're implementing the columns. If we're going for Bootstrap-style syntax, I'm not sure how to interpret the example:

<ion-col col-12 col-sm>col</ion-col>

Wouldn't it make more sense to have the various column specifiers by screen width, such as:

<ion-col col-sm-12 col-md-6 col-lg-4>

This example would indicate a 100%-column on small screen, 50%-column on medium screens, and a 33%-column on large screens. Also, offsets would accompany these if needed, like:

<ion-col col-sm-12 col-md-6 col-offset-md-3>

This example would be a full row on small screens and a centered 50% column on anything larger.

This methodology seems like the way we're all used to using a grid, as popularized by Bootstrap, Materialize etc. Any chance that is desirable/doable?

Thanks for building an awesome framework!

EDIT: After looking at the .zip it looks like this is how it is implemented, with the col-* being the default "xs" size and the col-smet al being a flex-grid equal-width column. I like it!

[brandyscarney]

@mikewagz I'm glad you like it! To explain the following example:

<ion-col col-12 col-sm>col</ion-col>

I am adding col-12 so that it will take up 100% width from xs screens up, and then col-sm will change back to auto or equal width columns for sm screens and up. This is a replacement for our responsive-sm attribute. I just wanted to make sure it was still possible to do everything our old grid could do in our new grid.

Thanks for the feedback. :)

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.