Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS Gridish

github.com

Post reply on HN
Print view View original

11–20 of 28 posts

Re: CSS Gridish

#12

Post by ssalka »

braindongle wrote: post #10

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 sc…

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.

Re: CSS Gridish

#14

Post by seejamescode »

franga2000 wrote: post #3

The "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...

You’re right, flexbox is not that old. It was just a requirement for a lot of our experiences that still support IE11.

Re: CSS Gridish

#15

Post by seejamescode »

jarym wrote: post #5
baus wrote: post #4

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.

Re: CSS Gridish

#16

Post by seejamescode »

Scarbutt wrote: post #9
rcdmd wrote: post #6

Earlier quoted context omitted.

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

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.

Re: CSS Gridish

#17

Post by seejamescode »

rcdmd wrote: post #6
franga2000 wrote: post #3

The "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.

Re: CSS Gridish

#18

Post by djabatt »

endergame wrote: post #2

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 ....

Re: CSS Gridish

#19

Post by acobster »

braindongle wrote: post #10

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 sc…

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.

Re: CSS Gridish

#20

Post by Ndymium »

acobster wrote: post #19
braindongle wrote: post #10

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 sc…

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/
Post reply on HN