CSS Gridish
github.comThe "fallback to flexbox" part makes me feel like a dinosaur. It wasn't that long ago when we were falling back to tables and floats...
Indeed. But it's worth pointing out "falling back" to flexbox isn't a solid backup plan-- most versions supporting flexbox also support grid, or are evergreen.
https://caniuse.com/#search=flexbox https://caniuse.com/#search=grid
Truth. It was really just put into place for IE11. Hopefully usage rates will continue to shrink and PMs will let go of the requirement.
I just want to chime in and share that IE10 also supports flexbox (and thus this tool, I suppose)
Assuming you can target browsers that support both, when does one pick flexbox over grids and vice versa? or does grids entirely replaces flexbox use case?
The community has been saying to use flexbox when you are only working with one axis, but I am not too sure that is true. Grid has adapted so many of flexbox’s rules, browser support seems to be the only differentiator.
I have a site in flexbox and planning to move it to grid to learn.
There are typical 1D places (stacks of divs, basically), so typical for flex. But since I can do the same with grid I wonder if I should use flex anywhere now (even for 1D).
Note: browser compatibility does not matter for this site
Flexbox for 1-dimensional layout, and Grid for 2-dimensional layout
This is the traditional answer but I wonder why. What does flex have that one cannot do with grid?
I guess if you really try, you can probably do all/most things flex can do with grid. However grid isn't really meant to have flexible responsive grid-cells, e.g. "how will the item1 grow in relation to item2 if we have additional space available?". Grid is more meant for scenarios where you wan't to completely change the layout of components of the site when you cross breakpoints, and when you have to do 2d gride-like layout (...duh!).
Sounds to me like this would be useful for React Native, where only flexbox-based layout is supported.
I doubt it - React Native's implementation of flexbox is different enough to make it very difficult to produce the same layout using the same out.
It's almost like an uncanny valley effect - its similar enough to lure you into a false sense of security, until you realise that defaults for flex-direction are reverse, or it implements flex/flex-grow/flex-shrink/flex-basis completely differently.
haha, yes.
I first used flexbox with RN and was kinda baffled when using it on the Web later
You’re right, flexbox is not that old. It was just a requirement for a lot of our experiences that still support IE11.
Interesting. This project is by IBM.
IBM still have a lot of talented and dedicated engineers despite the questionable management decisions.
I would guess this probably started off as an unofficial endeavour by a single or small group of employees and the beancounters agreed to publish it as OSS.
I had been working on all of this build process for our own grid design. Then in the last month I realized I could move all design decisions to a config file to make it compatible for other people’s design systems.
IBM is also behind the very nice Carbon design system and its React component library.
http://carbondesignsystem.com/ https://github.com/carbon-design-system/carbon-components-re...
Is this an efficient doorway into understanding CSS grid, one that has the bonus of giving you useful code? Or, is this more of a crutch, the output of which will not educate you about the grid goodness?
I'd like it to be the former, so that I can be productive out of the gate and figure out what I'm doing as I go. That may be unprofessional, but I make quick-and-dirty prototypes for academics; nothing that has to scale. Plus, I'm lazy.
This is the best resource I've found about making your own grid goodness, if that's what you're after: http://j4n.co/blog/Creating-your-own-css-grid-system
This tool seems oriented at abstracting away a lot of detail, and to be aimed at solutions that have to scale. If I wanted to learn as I go, I'd start without the abstractions.
That has nothing to do with CSS Grid, though, which is what the IBM tool is about. CSS Grid being the new way to layout in CSS: https://www.w3.org/TR/css-grid-1/
I think you'd be best placed to at least familiarise yourself with the concepts of CSS Grid first.
I had a bunch of my colleagues work through http://cssgridgarden.com/, which seemed to be a good first start for them. There are tons of other resources out there, so it depends what you're after.
Wes Bos has a free video course: https://cssgrid.io/ which he says is about 4 hours long - might be a good balance? I haven't took this course yet, but I've took enough of his others to know I won't regret recommending it. :)
There are definitely some patterns you can abstract away for making CSS grids, but to me they're so simple (and fun to implement) that in most cases it's just easier to do it yourself.
Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension. https://ibm.github.io/css-gridish/
i can't find how to get the Sketch artboards to magically appear :) Sounds cool ....
i am also a little surprised, when finding it from IBM