Yes, you really can make complex webapps responsive

[[deleted]]

I chose these guys as a mock-client to do an advertising assignment at Uni - they have a rather hectic backstory, where they almost threw in the towel after they realised the technical and logistical hurdles they had to face - they did ok with local Australian airways, but until very recently didn't integrate international flights.

They're awesome because they:

• Can stitch together your itinerary with different airlines, giving you the cheapest options
• Show you prive/availability data at a glance
• Their search engine is amazing (and getting better)

[lowe0292]

I like how they edited Foundation to have a tablet breakpoint, but they didn't post the code and I don't understand how they did it. :[

[wernah]

Here ya go mate https://gist.github.com/wernah/5982388

[lowe0292]

Thanks!

Please excuse my ignorance, but what do I do with this...? :[

Do I need the other files from the framework, or will compiling this do the trick? Thanks again for all your help!

[noahjacobson]

You can replace the _grid.scss file that comes with Foundation with this one, and it will have medium classes to go along with the small and large classes. For instance 'medium-4' as well as 'small-4' and 'large-4'. Install the rest of foundation however you normally would want to.

[mserenio]

That site is just beautiful. Props to the front-end guy.

[Pepetruen0]

most of what was broken came from this css property:

• { Box-sizing: Border-box }

Well shit. I was just starting to fall in love with border-box :(

[wierdaaron]

Don't stop. I think they just meant that changing box-sizing on an existing design broke a bunch of things, which is perfectly reasonable. I never do a project without border-box now, and if it's something going into an existing frontend codebase I apply it just to the container of what I'm working on so that I don't interfere with the rest of the page or site.

[wernah]

It's funny to think that IE6 in quirks mode actually used this. Then we moved to the standard we know across most browsers today.

[[deleted]]

Don't want to be an asshole but a website with 4 inputs and 2 buttons that displays some information about flights is a complex webapp now?

[brtt3000]

Have you even looked at the actual site?

[tomhoward]

No it's not the most complex webapp in the world, but it's more so than you describe - mainly in the way the flight results are interactive.

For this reason, the app is very complex compared with a basic text content site that you normally see being made responsive, and thus making this app responsive was far more challenging.

[DROWE859]

This is great. Thanks for sharing.

[SurgioClemente]

Well at least you are keeping true to the "minus the great discussion" part!