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

51–60 of 104 posts

Re: From Bootstrap to CSS Grid

#51

Post by ty___ler »

My breakthrough moment for grid UI development was realizing that all of my layout code for a component is contained in the parent – rather than spread around the children.

For example, in bootstrap or some other older layout framework every "column" would need to contain some class or id to style it correctly. So for a 3 column grid you would need to give each element a class setup of something like "column-third".

With grid, all that layout logic is moved into a single container "display: grid" element, making it so much easier to add/remove/edit grid items. Even padding is declared in the container element with the "grid-gap" property! It's a small improvement that has immensely increased my developer experience building grid-like UI.

Re: From Bootstrap to CSS Grid

#52

Post by jjp »

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 believe "working together" would be more about aesthetics than technical in this instance.

Re: From Bootstrap to CSS Grid

#53

Post by drb91 »

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.

> All the components in Bootstrap kinda work together with the .container .row .col classes and that’s still a crazy useful feature.

Actually, this has come to be the part of bootstrap I like the least. Individually the components are extremely useful, but as a layout engine I've constantly struggled to get it to comply with anything but layouts that look a lot like the ones in the bootstrap examples. CSS Grid and flexbox have proven to be more flexible at composing bootstrap components.

Re: From Bootstrap to CSS Grid

#54

Post by pbhjpbhj »

caffodian wrote: post #21

What are the preferred solutions for people that are forced to support IE11? I've seen fallback CSS and JavaScript polyfills used.

Will there ever be a time when MSIE won't be the limiting factor; seriously thought we'd gotten past "but what about IE".

Re: From Bootstrap to CSS Grid

#55

Post by buovjaga »

caffodian wrote: post #21

What are the preferred solutions for people that are forced to support IE11? I've seen fallback CSS and JavaScript polyfills used.

Here's a simple approach: https://www.smashingmagazine.com/2017/06/building-production...

"Rather than using fallbacks and shims to ensure a design and layout look the same across all browsers, we’d provide the mobile vertical single-column layout to all browsers and then serve up advanced functionality to those browsers and viewport widths that can take advantage of them."

Re: From Bootstrap to CSS Grid

#56

Post by spiralx »

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?

Until Houdini is available everywhere so that you can hook into the CSS engine and provide your own custom layout managers, I think masonry layouts will always require some JS. Using CSS grids might make the code simpler though.

PS I think Smashing Magazine have an overview of Houdini with a masonry layout as an example...

Re: From Bootstrap to CSS Grid

#57

Post by jonnyscholes »

andrei_says_ wrote: post #48
Bizarro wrote: post #46

Earlier quoted context omitted.

As I said in another post in this thread, I'm hoping Postcss and the autoprefixer plugin will work with at least IE11. Is IE 10 even relevant these days? It seems that except for very outdated systems, everybody should have been autoupdated to IE 11 by now

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" - it's a pretty good compromise for many clients!)

Re: From Bootstrap to CSS Grid

#58

Post by jonnyscholes »

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)

Re: From Bootstrap to CSS Grid

#59

Post by stephenboyd »

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.

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 Bootstrap components and I only keep it included to avoid spending 10 minutes re-implementing modals in JS.

Re: From Bootstrap to CSS Grid

#60

Post by gsnedders »

jrochkind1 wrote: post #47
Bizarro wrote: post #46

Earlier quoted context omitted.

As I said in another post in this thread, I'm hoping Postcss and the autoprefixer plugin will work with at least IE11. Is IE 10 even relevant these days? It seems that except for very outdated systems, everybody should have been autoupdated to IE 11 by now

If it works compatibly just with prefixes, that'll be fine. Heck, I don't mind writing the prefixes myself. If it implements an incompatible old version or proprietary standard with too many edge and not-so-edge case differences, that's another story. Anyone have experience? I also did not know that most IE10 users should be auto-updated to IE11, def gonna look into that more thanks.

> If it implements an incompatible old version or proprietary standard with too many edge and not-so-edge case differences, that's another story. Anyone have experience?

It implements a much earlier draft of the Grid spec, with a number of differences. You can't just throw prefixes on and expect it to work. That said, it might be possible to map 99.9% of cases automatically and have it work.

Post reply on HN