___________________________________________________________________ Flexbox and Grids: your layout's best friends 240 points by reneherse https://aerolab.co/blog/flexbox-grids/ ___________________________________________________________________
wolco - 4 hours ago I had the chance to see Rachel Andrew speak at laracon. Great presentation and got me excited about flexbox and grid. I'm still wondering is the browser support wide enough to implement this in production for the average site?
irrational - 4 hours ago It all depends on if you have to support IE or not:https://canius e.com/#search=gridhttps://caniuse.com/#search=flexbox
notahacker - 3 hours ago With only 70% browser support, you're going to have to have a pretty strong reason to believe your audience is different (or not to care) to justify using Grids
dictum - 1 hours ago Grids are most useful in wider viewports (tablets and laptop/desktop browsers).Except for IE11, basically all browsers that don't support Grid are outdated mobile browsers (pre-iOS 10.3 versions of Mobile Safari, Android Browser in older Android, and browsers that are based on Android Browser and have high usage in developing countries, like UC Browser)
wolco - 4 hours ago Has everyone decided to drop ie? For tech related sites that might make sense but I think not supporting ie means turning off support to the users who are older in some cases but more likely to buy.Where are people drawing the line? Bootstrap 3 still supports legacy browsers but version 4 and other popular frameworks like bulma use flexbox.
irrational - 2 hours ago Every website is different. I work for a Fortune 150 company, but the site I work on is so narrow in focus that we have the luxury of deciding that the amount of people using IE/Edge (very very few based on our server stats) is not worth the development/QA efforts to support them.This is especially nice since none of us have a Windows machine at work or at home ;-)
Silhouette - 3 hours ago Has everyone decided to drop ie?Maybe some consumer sites aimed at smartphone-wielding younger audiences can now get away with dropping IE completely. Maybe some sites aimed at very small businesses too.If you're aiming at older individuals or at medium to large organisations, not a chance.
dehef - 2 hours ago When using conditionnal arrival of dom object (I mean like using ngIf in Angular or simply using switching display none/block on some block) flexbox layout seem very difficult to anticipate. For that kind of things I still prefer using inline-block, that is more predictable.A tip: Strangely Safari tend to need flex-basis value everywhere
gsnedders - 53 minutes ago > A tip: Strangely Safari tend to need flex-basis value everywhereMost of the Safari issues should have been fixed in Safari 11, FYI. (The implementation of flexbox was largely copied over from Blink.)
crush-n-spread - 4 hours ago Most everything with CSS Grid is broken on Edge 15, which is what most Edge users are running. Thus Grid is not something you should be putting in production.https://caniuse.com/#feat=css-grid
lostapathy - 3 hours ago I've run it in production, with the ms-prefixed workarounds. It actually wasn't too bad to get that going, but I look forward to not needing that.
michaelmrose - 3 hours ago The same site says virtually nobody, aprox 2-3% is using edge.You either have to go all the way back to supporting IE11 and ignore everything not supported by 2013 microsoft to capture another shrinking single digit percentage of possible users until they progressively die of old age or ignore Microsoft stuff.Alternatively start providing a slightly degraded interface with fewer features and a banner. Our website works best with a modern browser with links to up to date edge, firefox, and chrome at top of page. Preferably with a notice regarding dropping support for internet exploder sometime next year.
nilved - 2 hours ago > The same site says virtually nobody, aprox 2-3% is using edge.What? Do you know how many people that is?
superkuh - 2 hours ago It also doesn't work in the Firefox fork I use. But that's probably an even smaller market share.I noticed this when Mozilla recently resigned their add-ons site and starting using CSS Grid support sniffing to determine weather to show the real site or the gimped mobile site. As it is all browsers without CSS Grid are forced to use the mobile site.It's super annoying.
ch4s3 - 4 hours ago You're making the error of assuming that all web applications in production have the same user base and constraints as yours. For example, I work on an application that is a companion app to some larger domain applications that themselves only work on newer versions of Chrome and Firefox. I defacto don't have to support IE, as none of my users can use it. Additionally if you make a developer focused tool like bug reporting, APM, or log aggregation, you can probably ignore IE, if you don't target Windows devs.
irrational - 4 hours ago Unless, of course, your production site purposefully does not support Edge (or IE) as a matter of policy. Fortunately that applies to me.
JepZ - 1 hours ago I agree that flexbox and grids complement each other, but I doubt that grids are ready for product. I mean it is nice that all major browsers have a decent support in the newest versions, but production ready includes for me that older browsers (without support or major bugs) are not common anymore (~ <5%).As far as I can see it it is currently scored at ~75%: https://caniuse.com/#search=grid
onion2k - 54 minutes ago You don't have to make pages that look identical in every browser. Make something that works for everyone and then use newer browser features to make it as good an experience as possible depending what features are available. CSS even has the "@supports" feature for doing it - https://developer.mozilla.org /en-US/docs/Web/CSS/%40supports
cvsh - 42 minutes ago The problem is that grid is best used for overall page layout... which is part of your CSS least amenable to progressive enhancement.
c-smile - 34 minutes ago Just use
- the best possible Grid layout module out there. Works in all browsers, even IE6.
c-smile - 37 minutes ago If to speak about layout methods @supports will not help you but will force you to do the job twice.If you can do your layout without flex boxes why do you need to create second version with them at all?
raquo - 33 minutes ago Re: CSS Grid, caniuse.com seems to be out of date here.MS Edge 16 was released two weeks ago, and already supports the latest CSS Grid spec (allegedly, I haven't tried it myself).---As for the remaining 21%, depending on your target audience you might not care enough about UC Browser for Android, Samsung Internet, Opera Mini, Android Browser, and even IE11, which btw is no longer the default browser for Windows (Edge is).Especially if you're building a new product, by the time it becomes big enough that browser compatibility starts to matter, it will probably be a non-issue for CSS grid.
jbob2000 - 4 hours ago > If you wish to fully support all browsers (yay!) then I?d highly recommend using feature queries to provide an alternative layout for browsers that don?t support Grids or have an older syntax.So basically, write two versions of your layout: the old way, and the new way. Flexbox and grids aren't ready for production yet.
Waterluvian - 4 hours ago Well, it depends on context. More and more, web tools are being used in a way where you can control what browser they're running in. Not just Electron, but also when making UIs for things like industrial tools, where you control not just the browser, but the hardware it runs on.
alxmdev - 2 hours ago > Not just Electron, but also when making UIs for things like industrial tools, where you control not just the browser, but the hardware it runs on.Wow, is that becoming common these days, using web browser engines to run UIs on specialized devices? Sounds a little off in the context of industrial tools, where I'm thinking embedded systems and relatively low- performance SOCs.
Waterluvian - 4 minutes ago Sorry. I realise that I combined words that will sound frightening to some. I mean non safety critical systems in an industrial environment. For example, mobile robot health and KPI monitoring.
SippinLean - 3 hours ago Flexbox, especially with Autoprefixer, is pretty safe to use in production.Grid support is much spottier, but can be safely used in production depending upon your supported browsers.
andrewfromx - 2 hours ago this is great info, https://gridbyexample.com is also good resource
boubiyeah - 3 hours ago Some quick rants.CSS is almost as bad as PHP when it comes to naming. Most flex related properties are prefixed with flex-; but some aren't (align-items, etc) so you now have tons of non prefixed properties that actually only work within a very specific context (vertical-align, etc) and there are no compilers to tell you which combinations don't make sense or whether you have redundant properties.IE11 has tons of bugs with flexbox; I had to remove a flexbox layout earlier because of that crappy browser (it ignores explicit/inline width/height set on flex children).Otherwise it's a great tool if used sparingly (heavily nested flexbox elements with lots of special properties start to become a bit hard to follow)
soperj - 2 hours ago For me the worst bugs have been in Safari by far.
andrei_says_ - 15 minutes ago Having a significant amount of visitors using ie10 & ie11 rules flexbox out for me.So I use Susy grid system (2) and absolutely love it.
lwansbrough - 3 hours ago I was using VS Code earlier today and used vertical-align in some case where it didn?t make sense and VS called it out. Such things do exist!But I agree with your points. Despite its flaws, it is probably the best thing out there for creating visual layouts from code.
sillysaurus3 - 2 hours ago Webstorm is absolutely incredible. Everyone should try it. Seriously, `cd your-app && brew cask install webstorm && webstorm .`Best IDE ever. Better than emacs. And I've loved emacs for a couple years, and Vim for 10 years before that. Webstorm even comes with a Vim plugin.IntelliJ is really rocking it. Webstorm for webdev, Cursive for clojure (https ://cursive-ide.com/), PyCharm for python (https://www.jetbrains.com/pycharm/)... every one of those IDEs feels amazing out of the box.It sounds dumb, but just try it. You'll get hooked on Webstorm and never want to go back. Example: press shift twice. It pops up a "Search Everywhere" box, and you can type filenames, symbol names, actions (Rename, etc)... it's basically helm M-x, but way better.You won't ever feel like "CSS names are bad!" because you won't ever need to remember anything. Want to center something? Just type "align" and usually webstorm pops up autocomplete with the right thing. And that's true in every context: https://i.imgur.com/jCAAesF.pngAll of these IDEs are specializations of IntelliJ IDEA (https://www.jetbrains.com/idea/download/#section=mac). They specialize it for web and call it WebStorm, for Python and call it PyCharm, etc. But all the plugins and settings work in all the IDEs, so really the underlying awesomeness is IDEA.At this point I trust IDEA enough to know that if I open any codebase, I can start navigating it right away. Doesn't matter if it's C++, ocaml, or VueJS. Typing shift-shift will always let me jump to definitions.Yeah it costs money, but $13/mo is super reasonble. Dropbox was similarly impactful on my life, and that was $10/mo.
donut2d - 1 hours ago You've got a JetBrains IDE working with OCaml? What plugin are you using with which IDE? The only plugin[1] I've seen seems to be 7 years out of date.[1]: https://plugins.jetbrains.com/plugin/4986-ocaml-support
sillysaurus3 - 1 hours ago I saw that https://github.com/sidharthkuruvila/ocaml-ide was pretty recent and assumed that it worked. I haven't tried it though.Amusingly someone made a plugin for pg's Arc 3.1 code back in '08: https://i.imgur.com/Xe7mvIB.pngIf IDEA doesn't support a particular language, it's pretty easy to fork an existing plugin and throw together some lexer rules.
sillysaurus3 - 1 hours ago I just built and installed https://github.com/shawwn/ocaml- idehttps://i.imgur.com/hhnvIhT.pngIt looks like it was written for 2016.1, but the latest is 2017.3. It's throwing an exception, so some of the features are disabled. Still, the lexer rules seem to work, and it's pretty straightforward to debug the problem.(This is actually a great example: Intellij community is open source, and that's what's being used to build this plugin. Meaning you have access to all the relevant code. Debugging is really simple.)
SippinLean - 2 hours ago >a "Search Everywhere" box, and you can type filenames, symbol names, actions>Just type "align" and usually webstorm pops up autocomplete with the right thingVS Code does both of these things, and is FOSS
Viper007Bond - 2 hours ago VS Code is indeed nice (I use it as my quick file editor) but can't quite match the IntelliJ products, although it can get decently close.
sillysaurus3 - 1 hours ago Here's a more persuasive demo: https://news.ycombinator.com /item?id=15514285https://imgur.com/z2euynIhttps://imgur.com /vb4uDMwhttps://imgur.com/4Xv4BMbIt's not so much that it has X feature or Y widget, but rather that the whole ecosystem feels cohesive. With emacs you sort of cobble together your configurations until you're happy with it, and that's very powerful -- it's why it's so successful. But there's something to be said for having "awesomeness out of the box". It's why Spacemacs was so popular.I hear you about FOSS. I was reeeeally hesitant to throw my time into yet another closed source clusterfuck. I grew up as a gamedev, and back in 2000 that meant you had to use Visual Studio. All of my VS skills are now completely obsolete. And whenever I ran into VS issues, I couldn't debug it since it was closed source.Two things convinced me IDEA is probably worthwhile:1. They're partially open source. https://github.com/JetBrains/intellij-community You can build that from source and run it, so you can at least see how most of the system is architected. You won't be able to extend some of the closed-source plugins, but you get some of the benefits of FOSS.2. Their tooling is their primary business model. When Microsoft lost their VS monopoly, Microsoft didn't die. JetBrains' sole focus is making the tooling ecosystem work; they're the Adobe of tooling.
amatecha - 1 hours ago I've been using WebStorm (and IntelliJ IDEA) for the past couple years and love it. I have no intention of swapping to any other IDE unless I really have to. Can definitely speak to the extreme convenience of instantly finding usages/definitions, "intellisense" of func params, plugin architecture, super customizable settings, built-in language support and linting/evaluation, refactoring assistance, live templates... Just a godsend, to be frank.
teleclimber - 1 hours ago I like Webstorm, it's my primary dev environment.But I can not praise its abilities as you do. My experience has been mixed. Sure it's cool when it works well, but then its bugs are all the more painful. You expect intelligence and you get the opposite.Take this bug I reported two years ago: https://youtrack.jetbrains.com/issue/WEB-19183It thinks "y" is a global if I put "x.y = ..." anywhere in my code. Genius!Also, It's lacking in its support for Vue Js. I get lots of red squiggles all over my code for perfectly valid Vue props, and PostCSS within single-page Vue component also is weak (no $variables support).
sillysaurus3 - 1 hours ago Hmm, FWIW Vue is my primary stack and I haven't run into similar issues. Try this:git clone https://github.com/vuejs /vue-hackernews-2.0 && cd vue-hack* && yarn && webstorm .shift-shift "Item" should show https://i.imgur.com/AV1bbXG.pngAnd `this.$store.` should show the proper completions:https://imgur.com/a/pjcNsIt's possible that I've been getting along without the features that some other editor provides. Does VSCode have better Vue integration?
Frizi - 13 minutes ago VSCode is indeed awesome for Vue. It supports pretty much any lang in any block properly, due to its support for embedded language contexts. If you have template lang="pug" and pug grammar plugin, it just picks it up. Also Vetur extension adds a lot of autocompletes and typescript support.
teleclimber - 38 minutes ago My problem is more with CSS and template support.Here is Webstorm complaining about in a legit Vue v-for statement in a .vue single-page component.And second image is what it does when I try to use PostCSS variables.https://imgur.com/a/BNAa8
sillysaurus3 - 26 minutes ago Aha! I see. Do you happen to have a repo I can clone to reproduce the problem? I'm interested in fixing that.Vue's tooling is context aware. It knows when you're within a tag. I see that there's a PostCSS plugin: https://i.imgur.com/JTPlIEk.pngTheoretically, the tooling should be able to use that plugin's lexer rules. PostCSS already registers itself as a language (pcss) so Vue's tooling logic should be: "are we within a scoped> tag? search for PostCSS tooling; if if none found, use vanilla CSS."It already does this for lang="scss">, so postcss should definitely work. The logic happens in https://github.com/JetBrains/intellij- plugins/tree/master/vu... if you want to explore it.
yscik - 1 hours ago It also has 6000+ unresolved issues reported, a lot of them open for 3-4 years with little hope of getting fixed. They keep rolling out half-baked support for the trendiest new JS frameworks, while basic parts of the IDE are falling apart every day. (For example, when opening the mentioned "Search Everywhere" dialog, sometimes it just doesn't receive focus. Good luck with that productivity.)Meanwhile, after launch, the IDE grabs focus about six times while loading. Symbol navigation sometimes picks up random unrelated functions from ignored folders instead of the one sitting right beside the file, because it has the same name. Want autocomplete for that vertical-align's value? It just throws up every possible value for any CSS property.Pretty bad when code editors running in a browser engine are getting more usable than your paid product.
sillysaurus3 - 57 minutes ago Yeah, the unresolved bug reports are pretty annoying. I ran into similar problems trying to get Live Edit working with AngularJS.Symbol navigation sometimes picks up random unrelated functions from ignored folders instead of the one sitting right beside the file, because it has the same name.Even after excluding a directory? If you have autogenerated build folders (e.g. dist/, out/, etc) you have to mark them as Excluded: https://i.imgur.com/E2uXJzu.pngOdd. I haven't noticed that, but I'll watch out for it.
yscik - 25 minutes ago This usually happens from node_modules, marked as a library folder, so it's indexed and might even be relevant, but it shouldn't really be a better match than the one in the source. And it's not even consistent.Hope they'll get their shit together, it used to be a pretty great IDE before these annoyances started piling up.
sillysaurus3 - 19 minutes ago Ah yeah, I've always excluded node_modules. That's true though, it should probably be indexed.
acdha - 1 hours ago How's performance? I've used PyCharm about once a year historically and kept going back to TextMate 2 or (now) VSCode for UI responsiveness.
sillysaurus3 - 1 hours ago Mm, good point. WebStorm performance is good, but IDEA is noticeably slower. I haven't used PyCharm yet, so it's possible performance could be a pain point there. I find myself firing up Webstorm instead of IDEA due to slower IDEA indexing.FWIW Cursive is a bit sluggish to start, but after it's done indexing it feels like the best Lisp development environment ever made.
acdha - 1 hours ago I liked PyCharm's feature list but the index-the-world behaviour definitely like it going back to the pre-SSD era. Not a show-stopper for my biggest project but the cost for everything else definitely left me hesitant to switch.
scoggs - 9 minutes ago Sorry, this may be a silly question, but is it possible for PyCharm (and other IntelliJ IDE products) to define a specific working folder / path for the file index-the- world feature to stay within or does it always permeate through the entire computers hard drives, just in case?
sillysaurus3 - 1 hours ago I had the same experience with a Vim plugin called Jedi. It was great, but typing "pdb." would freeze Vim for 5 seconds. IDEs can definitely try to do too much.
pfooti - 2 hours ago I just assumed the naming thing was for properties shared between grid and flexbox (such as align-items). It is still pretty frustrating to remember that kind of stuff though.
anon335dtzbvc - 3 hours ago "and there are no compilers to tell you which combinations don't make sense"well thats not quiet true, in purescript you can write type-safe CSS checked at compile timehttps://pursuit.purescript.org/packages/purescript- css/3.3.0...
kccqzy - 2 hours ago Does it tell you that align-items by itself doesn?t make sense regardless of the value, of the element isn?t otherwise set to use display: flex or grid?
teleclimber - 1 hours ago I don't know the answer, but I'd be surprised if it did.I've also been very frustrated by CSS due to 1) its lack warnings and debug errors as mentioned above, and 2) that so many properties have side-effects (like setting an element to display:flex changes the auto value of min-width for all its children[1]).I've started working on something to help with this, but it's a long way off (and it may not work at all).[1] https://www.w3.org/TR/css-flexbox-1/#min-size-auto
c-smile - 4 hours ago "flexbox horrors":"flex-basis" - defines mysterious "main width" (WTF is wrong with just width?)"flex-grow" and "flex-shrink" - grow and shrink relative to what?How to define flexible margins? Like I want left margin to be twice larger than right one and all this to be flexible: |---m:2*-------|--1*---|--m:1*-| ?Effectively flexbox breaks CSS box model that postulates only width/height to define box dimensions.Why I cannot say just this: { width: 1fr; margin-left: 2fr; margin-right: 1fr; } ?Where 'fr' are flex units introduced in CSS Grid https://developer.mozilla.org/en- US/docs/Web/CSS/flex_valueWhy two specifications define the same entity (flex weight) by two different mechanisms - by property and by unit?CSS looks like Christmas tree where each passer-by (Google and Microsoft here) adds its own shiny stuff ...Is this what we name as modularity of CSS?
dangerlibrary - 3 hours ago In the face of ambiguity, guess.There should be N-- and preferably only N --obvious ways to do it.
c-smile - 2 hours ago "obvious" is key point here.This { width:100px; margin-left:1fr } has clear and obvious physical meaning: solid block with the spring of strength 1 on the left of it.So the block is attached to the right side of its container. And so you don't need all those aligns - flex units can do alignment in more flexible ways.That's obvious indeed.But those flex-shrink/grow ...
joshribakoff - 3 hours ago Your margin scenario is exactly what css grid handles nicely (grid gutters)
c-smile - 2 hours ago Yes but flex units can be used not just in grid context.Consider this:
Foo bar.
That will span free space left in the p element from "Foo " and " bar."
Mystrl - 3 hours ago Do you mean something like https://jsfiddle.net/Mystrl/9uj40kam/1/
c-smile - 2 hours ago Close but without those artificial DOM elements.Here is an illustration of the idea of flex units:https://sciter.com/docs /flex-flow/images/flex-springs.png
sillysaurus3 - 2 hours ago Just use Bulma. You can drop it into any project. https://bulma.io/documentation/columns/sizes/Your example can be accomplished like this: class="column is-half">m:2* class="column">1* m:*1 There's a good reason to limit yourself to 12 columns: the layout is consistent across all common screen sizes, whether it's tiny mobile screens or huge desktop screens. If you have sizes like 1.374fr, you lose a lot of that automatic layout functionality.
c-smile - 1 hours ago Bulma, as any other grid systems based on % units, is quite limited in real life.Check this: https://sciter.com/images/wt- langs.png You see the same HTML markup there but in different languages. Text in most of European languages is longer.This is HTML/CSS Sciter UI that uses flex units and flow property: https://sciter.com/docs/flex-flow/flex-layout.htm
sillysaurus3 - 1 hours ago Hmm, why is it limited? I'm interested in hearing your experiences.
c-smile - 1 hours ago Check screenshots above. There is a block having 4-columns layout. Each column there a) is flexible and b) uses min- content constraint. So widths of columns are unknown upfront - determined by actual content in grid cells.That last part (use of actual content) is what you cannot reproduce using % units in principle.
amatecha - 1 hours ago Be careful using CSS Grid - IE11 supports only an old version[0] of the spec, and thus is missing many major CSS Grid features like repeat(), grid-gap and span.[0] https://www.w3.org/TR/2011/WD-css3 -grid-layout-20110407/
amatecha - 1 hours ago These "Grid by Example" videos by Rachel Andrew are an excellent intro to CSS Grid:https://www.youtube.com/watch?v=Dz9BzY21Zks&list= PLQkVA6z3dF...Highly recommended for anyone who's not familiar and wants a quick introduction -- each video is just a few minutes long. :)
fauigerzigerk - 1 hours ago >If you wish to fully support all browsers (yay!) then I?d highly recommend using feature queries to provide an alternative layout for browsers that don?t support Grids or have an older syntax.How does that not translate into "Just do all your work twice!"?
IgorPartola - 2 hours ago Is it now possible to do a responsive CSS-only layout a la Masonry/Pinterest, with the correct order of elements using this?: [1] [2] [3] [4] [5] [6]
sorrymate - 2 hours ago I too would like to know! I have yet to find a way display flex rows that are different heights and that align left to right. It seems the only options are to align by column, or use Masonry.js which seems like overkill. Even Bootstrap 4 only supports column layout.Anyone been able to accomplish this with CSS-Grid or Flexbox?
IgorPartola - 2 hours ago From what I can tell, it hasn't been done with Flexbox alone. To get the order right, you have to specify a fixed height for each element, making it non-responsive at best. I am wondering if grid somehow helps.There is also of course the order property, which with some cleverness can re-order elements from 1, 2, 3, 4, 5, 6 to 1, 4, 2, 5, 3, 6. You'd have to get awful clever with it though to figure out how to do this right, so still might rely on JS.
akrigline - 1 hours ago Sort of https://codepen.io/akrigline/pen/qVaWQoYou can't simulate the way items can extend into other rows easily with CSS Grids, but the default behavior for children of a display:grid element is to flow horizontally into cells until they have to start wrapping.
gsnedders - 59 minutes ago No, you can't, because the position of each item depends on all the previous items.Flexbox only deals with a single row at a time, whereas masonry doesn't really have a notion of a row (given the 4th item in each column can be at very different places, depending on the sizes of the items above). Grid requires you to bind things to an actual grid, so you still can't do masonry (for similar reasons). The closest you can do is using multicol, but that's then top-to-bottom then left-to-right instead of left-to-right then top-to-bottom.Note that this is mostly thinking about unequal height items (which is the common case of masonry); equal height you can do with floats yet alone more recent layout modes.
couchand - 55 minutes ago What's the correct order of elements?
smash33 - 40 minutes ago Every page doesnt have to look the same in each browser.
chobo2 - 3 hours ago The article does not really say what to use if something does not support grids? should your fallback be flex box? Also IE 11 does not support the @support.
HaoZeke - 3 hours ago My personal favorite is lazy loading a traditional grid system with Javascript if there's no css grid support...
joshribakoff - 3 hours ago A common technique is fallback to mobile first layout
purple-dragon - 4 hours ago I was able to finally start using grid in production for a new project a couple of weeks ago. It made page layout a breeze and my html and scss are so much tidier and easier to read. Flexbox still has its place as the article points out, but abusing it to do 2-dimensional layout didn't feel any better than doing the same with older techniques.
irrational - 4 hours ago My understanding is Grid is designed for whole page layout, while Flexbox is designed for sub-page or component layout.
lostapathy - 3 hours ago Yeah - they do solve different problems. We recently switched our production app to using both (from strictly bourbon/neat grids) and it's made life so much simplier.
purple-dragon - 4 hours ago Yes, but before grid was available people did some funky things to build responsive grids (like using a flexbox column containing flexbox rows or using a lot of repetitive media queries).
chrisweekly - 4 hours ago Fantastic piece. Clarity, breadth, depth, working examples... this is what ?howto?-style, practical posts should look like.
CamperBob2 - 1 hours ago I agree, it's a nice piece of work. It makes a better flexbox tutorial than most flexbox tutorials.