Hacker News Reader

Comment by nailer | Hacker News Reader

I genuinely don't understand CSS 'grid systems' in a world of border-box and flex by default.

If you want to put things beside each other, make them whatever widths you want and have a flex row.

What do 'grid systems' add apart from visual classes in HTML and negative margin hacks?

Agreed. I used to use grid systems, but being able to wholeheartedly embrace flexbox and border-box has meant that I really don't need to use them these days. Want to do percentage width and fill the rest of the container? Easy-peasy. Want to not specify specific widths but make one thing bigger than another in a relative way, that adapts to the viewport powerfully? No problems.

Hell, the only reason I use Bootstrap is for it's buttons and forms, etc. which nowadays I've replaced with PureCSS; and the best part about PureCSS is that I can use the bits I want and ignore the rest. Bootstrap can also do that, but requires a preprocessor like Sass or Less (v4 and v3 respectively).

its button etc.,

For clarity sass and less are not required locally to run bootstrap, if you wish to build it from source then they are required.

Not really. You can customise Bootstrap online and download the compiled CSS:

http://getbootstrap.com/customize/

Just untick the boxes for the stuff you don't want, and hey, Bob's your uncle. No Less or Sass required.

Sure! But using Bootstrap as a dependecy via "npm" makes that a bit more annoying; and PureCSS does that out of the box via that route, which is great.

The "grid" is a graphic design principle [1] that existed long before CSS. You can implement this in CSS with flexbox or something else. If you don't care about vertical alignment of elements at different heights on your page then you probably don't need a grid framework.

[1] https://en.wikipedia.org/wiki/Grid_(graphic_design)

I'm familiar with grids as a design profile. My point was that most 'grid system' libraries add no value and make some things worse.

Browser support. Desktop Safari's flex support was notoriously buggy, but I see that they've fixed it with El Capitan. The next major release of Bootstrap will have a flexbox mode AFAIK.

http://caniuse.com/#feat=flexbox

There's still some pretty nasty flexbox bugs in Safari that are fixed in WebKit nightly, but not released yet. I hope 10.11.4 and 9.3 fix these issues.

I'm not yet sure if we should abandon grids completely. I've tried flexbox-only with one project, but I found it to be repetitive and more time consuming than starting with a grid based on flexbox. A simple flexbox grid is my way to start a project now as you need a lot of it anyways.

I started out with simple flex, then moved to a flex based grid library because it solves subtle gutter/margin alignment issues that appear with out of the box flex rows.

Easy vertical centering.

You might wanna look at this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Yes, the whole point of Flex was to replace grid systems. I really don't see the point for a CSS library to wrap flexbox - All it does is dumb down flexbox for people who are too lazy to learn it.

There are enough common patterns and frequently used combinations to make a flex box based library a good idea. It's DRY

Reply on news.ycombinator.com