Responsive Grid layout

ionic-v1
1

I know that Ionic ships with grid system based on flex box but how does that fit in as a responsive layout? Basically at a certain size (most likely min/max width of 480px) the columns collapse and become a single column layout. Is this in the works or best something that I would need to write up?

2 Likes
2

At this time the grid doesn’t do any response column change depending on viewport size. We haven’t ruled it out at all, but right now we’re focusing on phones and not tablets (we’ll get there).

3

Alright let me know if need a basic responsive grid built out, I would be more than will to work something out and submit it to you guys

4

Yes, the basic responsive grid needs to be built out. But I would like to point out it won’t need all the bells and whistles that Twitter bootstrap uses: http://getbootstrap.com/css/#grid

Before you get coding, what features of a responsive grid were you thinking about implementing?

5

I was planning on playing with the flex-direction and working out how things will go from a flex-direction: row to flex-direction:column. It shouldn’t be anything to crazy I don’t think

6

Cool, go for it. Forking the repo and submitting a pull request would be easiest. But keep the pull request to just one feature, like the grid improvements. Once pull requests become large and changing many things throughout the framework it gets difficult to merge it in.

And if interested, this is a related issue too I probably won’t get around to for a while:

Thanks!

7

Before I submit a pull request, I just wanted to see what people opinions are. This example, on the about page, works for any non-explicit column widths. Let me know what you think. Demo is on the about page

Here’s a demo

8

Cool, seems simple enough. Out of curiosity, where did the 650px from the @media (max-width: 650px) come from?

9

@adam The 650px came from what I felt worked right in my demo. This could be changed into a sass variable that could be adjust to fit a specific case.

A default value of 724px (iPad width) could be set but it should be up to the developer to decided where that break point should be depending on their content.

10

Cool, I created an issue for us to add it in, thanks!

11

Whatcha think? https://github.com/driftyco/ionic/commit/1cdb999e5672391fbe02719eef060e28ea72871d

12

@adam Looks great!

I like the addition of the small, medium, and large break points. I think this will work out great when making apps that can take advantage of the large screen area on tablets.

13

Sorry, I should elaborate.

You can now set a row to have each column break at various widths. For example, if you want a row of columns to turn in to stacked columns when the viewport is less than 568 pixels, it’d look like this:

  <div class="row responsive-sm">
    <div class="col">
      <div>
        column 1
      </div>
    </div>
    <div class="col">
      <div>
        column 2
      </div>
    </div>
  </div>

The three built in classes are:
.responsive-sm = smaller than landscape phone
.responsive-md = smaller than portrait tablet
.responsive-lg = smaller than landscape tablet

Also, each class uses a sass variable that can be changed to your liking, and there’s also a responsive-grid-break mixin you can use to create your own.

1 Like
14

Ah gotcha, so you can choose the break point your self based a few presets or make your own. Simple and easy.

15

Responsive grid docs:

3 Likes
16

I’m trying to work out whether it’s possible with the current responsive grid implementation and some nesting of html/css styling to combine more than one breakpoint per row group. so that for example you can specify a way of breaking content at a small and medium breakpoints to effectively allow a 1/2/3 column layout within the same row definition.

What I am trying to achieve is similar to Foundation where you can specify small to be 1 column wide, medium to be say 2 and large to be 3 and the content fitting accordingly using small-12, medium-6, large-4 for example.

There are a couple of ways I could work round this and something like foundation could be included but would prefer to try and solve it without repetition of markup and media queries /including a non-ionic layout library if possible.

any tips appreciated.

thanks dan

17

Something like this?

18

exactly like that :slight_smile: thanks a lot…

very glad i can do this directly with ionic and don’t have to add any additional libraries or hack about with some custom css.

i’ll keep an eye out in the future for your codepen samples - are there other ionic team members codepen’s i should also keep an eye on / can really useful stuff like this be added to the main ionic codepen repo? … i’m finding these snippets are very useful for pulling together quick working mockups/prototypes, so the more the better :slight_smile:

cheers, dan

19

In Bootstrap, you can do things like:

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

Which the community finds to be extremely helpful.

Is there an Ionic equivalent?

20

Actually using this build: http://getbootstrap.com/customize/?id=11477931

Which is a template of the:

  • Grid system
  • Basic utilities
  • Responsive utilities
  • @grid-gutter-width: 0px

This looks like it plays really nice so far with Ionic… May be worth considering taking out the responsive classes to keep a separation of concerns.

I’m including this CSS after Ionic.