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

From Bootstrap to CSS Grid

open.nytimes.com

Post reply on HN
Print view View original

71–80 of 104 posts

Re: From Bootstrap to CSS Grid

#71

Post by brucephillips »

thomascgalvin wrote: post #19
disconnected wrote: post #13

It's about time the web got a decent layout system. Every UI toolkit that I know of (wxWidgets, Tcl/Tk, Qt) has some form of layout mechanism (box layout, grid layout, etc), and they'd had it for years/decades. On the web though, people have been hacking around this omission for ages with tables and assorted "grid" systems (pure css, bootstrap, etc). The needs for layout management was there for as long as I can reme…

Web development is just starting to catch up to where we were fifteen years ago. Things like type safety, unit testing, and dependency management are still fairly new on the Javascript side of the house, and I'd argue that Maven is lightyears ahead of NPM or pack or gulp or whatever the fuck the kids are using these days. The UI side is even worse. When you compare $todays_web_framework to QT or Swing, it's like drop…

Interesting. What's a specific example of how QT or swing is superior to web tech?

Re: From Bootstrap to CSS Grid

#72

Post by colept »

jonnyscholes wrote: post #58
jasonbarone wrote: post #36

So I love CSS Grid very much, but have found myself still wanting/needing masonry-style "Pinterest" layouts, which I haven't been able to do without JavaScript. I've seen many of the CSS column and flexbox hacks, but nothing quite nails it. Anyone have any good ideas here?

CSS grid can do this! Sure not as freedom as a JS implementation but its good enough in 95% of scenarios in my experience! https://codepen.io/balazs_sziklai/pen/mOwoLg (not my code - just one of the examples on codepen)

Sorry, but this is not true masonry because the heights of the items are fixed. Masonry layouts have dynamic height elements.

Re: From Bootstrap to CSS Grid

#73

Post by jcadam »

tnolet wrote: post #17
mrborgen wrote: post #4

"It took about three lines of CSS to write the grid layout I wanted, and I wanted to live in the bright and beautiful future where layout is always that simple." This is so spot on. I've met many developers who tend to think Bootstrap is easier, but that's usually because they haven't experienced this part of CSS Grid. Just add a couple of lines and you have a very powerful grid layout. I wrote an article on Bootstra…

Not arguing the usefulness of CSS Grid, but Bootstrap is a whole bunch more than just a grid. All the components in Bootstrap kinda work together with the .container .row .col classes and that’s still a crazy useful feature.

On my current project, I spent a lot of time fighting with flexbox and could never get it to do exactly what I wanted, in both Firefox and Chrome, at the same time (Firefox was much easier to deal with using flexbox than Webkit/blink, actually)

Then CSS Grid finally became available accross all major browsers. I'd never used it, but decided to try it and managed to have my layout working the way I had always wanted it to in a couple of minutes. In fact, it took more time for me to explain to my concerned wife why I suddenly burst out howling and laughing like a lunatic than it did to actually swap out flexbox for CSS-grid.

Still using bootstrap for a good portion of the UI, of course :)

Re: From Bootstrap to CSS Grid

#74

Post by jrochkind1 »

jonnyscholes wrote: post #57
andrei_says_ wrote: post #48

Earlier quoted context omitted.

Everybody except some companies with systems locked to an older version because of legacy software they need to consume. Which also happen to be amongst your big clients and despite representing 5% in your analytics, represent 20% of your potential business. Now what? Do you make your new site unusable for them? Or do you create a complex intricate fallback css which defies the purpose of using css grids?

Then yeah CSS grid is not right for that project. But not everyone is in that camp - and some are a bit of both. We have clients like yours and then many others that don't even need IE11 based on their stats. The money saved because we can use more efficient tech like CSS grid mean more time to add features! (All our websites work in IE11 - they're just allowed to be "visually different from the approved designs" - i…

Def report back if you try doing stuff with grid that works in both IE11 and up to date browsers. I'm curious to hear how it goes from someone that did it.

I've done that with flexbox, and it worked out fine for me with both IE 10 and 11, even though caniuse notes "large number of bugs" in IE11 flexbox implementation. Wasn't really a problem with my implementation. But it sounds like grid might be a different story, where IE11 implements things to an older spec with significant differences.

Re: From Bootstrap to CSS Grid

#75

Post by stareatgoats »

jasonbarone wrote: post #36

So I love CSS Grid very much, but have found myself still wanting/needing masonry-style "Pinterest" layouts, which I haven't been able to do without JavaScript. I've seen many of the CSS column and flexbox hacks, but nothing quite nails it. Anyone have any good ideas here?

'Muuri' [0] is a masonry style library that looks promising (I haven't had time to dig deep though). It does however build on some js libraries but claims backward compability to IE9+. Maybe something for your needs (if js is unavoidable anyway)

[0]https://haltu.github.io/muuri/

Re: From Bootstrap to CSS Grid

#76

Post by kilburn »

TipVFL wrote: post #37

It's interesting to now have this, flexbox, and the multi-column module (that I never see anyone talking about). Does anyone know if this can be used for dynamically wrapping columns? Ostensibly flexbox should be able to handle that, but without an explicit height your column will never wrap. I recently needed to implement dynamically wrapping columns and I was able to get 90% of what I needed from the multi column m…

As you found out, the CSS multi-column module is not very well specified, and browser support is severly lacking in both features and performance.

Unfortunately... no, there's no better css only alternative. Grids are not supposed to address that use case. For now you are much better off looking at "masonry" javascript implementations, because they actually work and exhibit better performance than css columns.

Re: From Bootstrap to CSS Grid

#77

Post by chiefalchemist »

tnolet wrote: post #17
mrborgen wrote: post #4

"It took about three lines of CSS to write the grid layout I wanted, and I wanted to live in the bright and beautiful future where layout is always that simple." This is so spot on. I've met many developers who tend to think Bootstrap is easier, but that's usually because they haven't experienced this part of CSS Grid. Just add a couple of lines and you have a very powerful grid layout. I wrote an article on Bootstra…

Not arguing the usefulness of CSS Grid, but Bootstrap is a whole bunch more than just a grid. All the components in Bootstrap kinda work together with the .container .row .col classes and that’s still a crazy useful feature.

Agreed. People too quickly forget it's called Bootstrap for a reason. Perfect? No of course not. But it also doesn't claim to be any more than what it is.

Re: From Bootstrap to CSS Grid

#78

Post by chiefalchemist »

michaelbuckbee wrote: post #24
tnolet wrote: post #17

Earlier quoted context omitted.

Not arguing the usefulness of CSS Grid, but Bootstrap is a whole bunch more than just a grid. All the components in Bootstrap kinda work together with the .container .row .col classes and that’s still a crazy useful feature.

What I think goes unrecognized in the design community is what a tremendous skill it is to be able to put together really disparately styled and designed UX elements into a cohesive whole. Pre Bootstrap / Material / whatever - I'd end up with designs that were just incoherent. You'd look at a modal, or a file upload or something and none of them individually were that awful, but as a whole they didn't fit together.

I think you're part right. But it's only not recognized by those who need to recognize it the most ;)

Re: From Bootstrap to CSS Grid

#79

Post by chiefalchemist »

stephenboyd wrote: post #59
michaelbuckbee wrote: post #24

Earlier quoted context omitted.

What I think goes unrecognized in the design community is what a tremendous skill it is to be able to put together really disparately styled and designed UX elements into a cohesive whole. Pre Bootstrap / Material / whatever - I'd end up with designs that were just incoherent. You'd look at a modal, or a file upload or something and none of them individually were that awful, but as a whole they didn't fit together.

How often can you use Bootstrap components unaltered? I'm either working on things where aesthetics are important enough that I'd have to write custom CSS for every component, or where aesthetics are so unimportant that stylistic coherence is irrelevant. When I use things like Bootstrap it's as a scaffolding in the early stages of development before I write enough of my own CSS. Eventually then I've restyled all the…

FYI - This is why it's called Bootstrap. Why do people insist on knocking it for what it is. It's like whining about water being wet.

Re: From Bootstrap to CSS Grid

#80

Post by chiefalchemist »

Bizarro wrote: post #45
tnolet wrote: post #17

Earlier quoted context omitted.

Not arguing the usefulness of CSS Grid, but Bootstrap is a whole bunch more than just a grid. All the components in Bootstrap kinda work together with the .container .row .col classes and that’s still a crazy useful feature.

The thing about Bootstrap (at least v3) is that the component library is pretty bare bones. But I'm curious to your statement about "working together". Are Bootstrap components "aware" of the layout css/components?

I took that to mean the style was out of the box consistent; that while not unique and perfect you have to work pretty hard to muck it up.
Post reply on HN