Responsive design is a critical approach to making sure your content is useful and readable on the increasingly large array of device sizes in use today. Tune in as Chris and Ryan discuss the ins and outs of responsive design, sharing the techniques, workflows, and thinking we use here at thoughtbot.
Great overview. I was especially glad to see flexbox use for layout combined with media queries. I need to migrate to using flexbox too.
Iāve noticed that your example is based on desktop first approach. Are you using desktop first rather than mobile first approach @Thoughtbot on a daily basis as well? I wonder because Iām using mobile first approach for several years in production and find it easy to maintain. Usually design is more complicated on wider viewports rather than on smaller viewports so by using mobile first approach I write simple stylesheet first and only add & overwrite some styles for wider screens while if Iād go with desktop first approach Iād have to write complicated stylesheet first then overwrite & disable more styles for smaller screens which resulted in larger stylesheets and lower maintainability overall in my previous experiments (before Iāve chosen the mobile first approach as a way to go). What is your experience with both approaches and why do you prefer one to another? Thanks
Btw here is your codepen with mobile first approach (stylesheet got only smaller by one line but thatās because we donāt have real design here, just layout): http://codepen.io/sergeylukin/pen/vLVJKm
As it turns out, Firefox (tested in v43.0.4 in OS X) ignores flexbox children height values in column direction so if child container does not have content it will not be visible even though it has fixed height value assigned. So, small screen version of your codepen does not display main content and featured tiles. However, using min-height property instead of height property fixes that. Try it out.
Hi folks, thatās a really nice example of how to setup flexbox with SCSS. Thanks!
One thing that bothered me by the demo is the fact the 75%/25% row does not line up correctly with the 4 boxes at 25% (in the wider view.) This is because the gutter space is 3 times larger in the row of four elements than is on the row with the two elements of 75%/25%. (For example, if you reduce the margin everything lines up perfectly.)
The code looks nice and simple but I could not use this layout technique in practice (imagine there were photos in there with a decent contrast against the background, I think this would not look so good.)
So aside from the fact that you were almost certainly keeping things simple for the purposes of the lesson, it there a nice elegant way to solve this with flexbox? Ideally without creating some kind of nested wrapper divsā¦ This is the very thing we strive to avoid with the promise of flexbox.
Thanks.
Thatās simply because they used SCSS syntax to remove last iconās right margin without actually enabling SCSS preprocessor in the codepen. So, codepen uses plain CSS parser and ignores &:last-child from line 42. To fix that quickly you can enable preprocessor manually.
Hi Sergey,
Thanks for that, you are right, that fixes another issue I had with this layout. However my question was about getting the gutter between .intro and .sidebar under the .main-content divs to line up with the four .tile divs under the .featured-tiles div.
Iād basically be happy if there was a way to solve this in flexbox without resorting to fixed widths for the containers or without being obliged to add special wrapper divsā¦ But Iām not actually sure itās possible in which case itās putting us back into the realm of non semantic markup, the very thing we are trying to avoid.
You got any ideas? :-o
I can only imagine that we have to correct the percentages so that things line up. This is an easy calculation, but starts to get messy when you want to add in a fixed with gutter based on px etc. Not to mention dealing with responsive design.
Perhaps I should look at how this achieved in burbon neat or bulmaā¦
In any case, thanks for your answer! 
Would love to hear any thoughts, pointers from the community,
Cheers,
Brian.
Hi Brian,
No problem. As per the elements gutter and line up, Iām afraid it all looks perfect to me and all rows / columns are lined up perfectly fine as to how I see it.
Iāve attached a screenshot of how main-content and featured-tiles are rendered in codepen for me. Check it out. Doesnāt it look the same as whatās rendered in codepen for you? If it looks the same, then could you show me what exactly doesnāt line up correctly?
Regards,
Sergey
@sergeylukin It depends on the designer as well as the project specifications. There are some advantages and disadvantages to both. I personally will start with desktop first, some other designers will go with mobile first. Typically the type of project based on how itās used will steer you in one direction over the other.
Thanks for supplying the mobile first approach! Itāll great for other developers to see how that is implemented.
Thanks for sharing your vision. Itās always interesting to hear different opinions. I may even try desktop first approach again in the future and see if my evaluation will be different from previous trials.
Could you please share the codepen for the .scss version that youāre displaying here? It would be a great help not to have to stop and type all the code outā¦ deadlines 
