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

91–100 of 104 posts

Re: From Bootstrap to CSS Grid

#91

Post by chairmanwow »

Bizarro wrote: post #46
jrochkind1 wrote: post #44

Does Grid work in IE 10 or 11? `caniuse` says "partial" support with prefixes in 11. Anyone have experience of how well it works, with prefixes, how "partial" or compatible the support is? > I implemented this CSS Grid progressive enhancement on The New York Times Watching media card component. Users on old browsers see Bootstrap, but users on browsers that support the display: grid property Okay... yeah, I don't wan…

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

Very relevant if you want to include China in your user base.

Re: From Bootstrap to CSS Grid

#92

Post by michaelbuckbee »

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…

Actually a fair bit. When I was consulting, the apps were data entry/reporting type backend systems and Bootstrap was mostly sufficient.

If it was user facing, I'd typically use a theme built on Bootstrap.

Re: From Bootstrap to CSS Grid

#93

Post by spaceseaman »

pavel_lishin wrote: post #90

Not relevant to the article, but her avatar is very cool - and apparently she generated it with SVG and stylesheets: https://codepen.io/tallys/pen/mPBBXr

Does anyone have a link to how to go about generating an image like this?

Did the writer hand make the individual polygons or generate it from an image of themselves?

Re: From Bootstrap to CSS Grid

#94

Post by sandGorgon »

Bizarro wrote: post #42
sandGorgon wrote: post #16

is there a ui toolkit for react based on CSS Grid ?

Currently, probably not. I'm using ant design right now and it uses Flexbox as its underlying layout engine. I think Bootstrap 4 is the same. Once they ditch support for IE11, then they'll probably move to CSS Grid, but at that point you really don't need a UI toolkit to be based on CSS Grid. You either just use the css directly, or have a UI toolkit-independent component wrappers around the grid.

Well, I'm looking for component wrappers.

For example I'm using quite a bit of semantic-ui today. Makes the job of building interfaces really simple and easy.

Re: From Bootstrap to CSS Grid

#95

Post by chickenfries »

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…

This comment is overly dramatic and immature.

Re: From Bootstrap to CSS Grid

#96

Post by aeosynth »

spaceseaman wrote: post #93
pavel_lishin wrote: post #90

Not relevant to the article, but her avatar is very cool - and apparently she generated it with SVG and stylesheets: https://codepen.io/tallys/pen/mPBBXr

Does anyone have a link to how to go about generating an image like this? Did the writer hand make the individual polygons or generate it from an image of themselves?

It's possible to generate svgs from images, see https://jmperezperez.com/svg-placeholders/

Re: From Bootstrap to CSS Grid

#97

Post by kumarvvr »

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.

I still use bootstrap components in my projects. Just the layout is done using CSS grid. Its actually a very powerful combination.

Re: From Bootstrap to CSS Grid

#98

Post by andrei_says_ »

jrochkind1 wrote: post #74
jonnyscholes wrote: post #57

Earlier quoted context omitted.

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

In a similar situation (support for ie11 and a usable site in ie10) I’ve found the susy grid system (v.2) indispensable.

Incredible flexibility and precision with just a few lines of scss. I know that in a few years I’ll be writing pure css for grids, but until then it’s susy for me. I just don’t have the time or will to write multiple layers of redundant css.

Re: From Bootstrap to CSS Grid

#99

Post by jonnyscholes »

colept wrote: post #72
jonnyscholes wrote: post #58

Earlier quoted context omitted.

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.

Sorry I just linked to the first one that looked right as I was on the move. Flexible height is definitely possible as we're using it that in prod. Here's another examplei found with working flexible height :)

https://codepen.io/Kseso/pen/ZJbEMe/

Re: From Bootstrap to CSS Grid

#100

Post by pavel_lishin »

aeosynth wrote: post #96
spaceseaman wrote: post #93

Earlier quoted context omitted.

Does anyone have a link to how to go about generating an image like this? Did the writer hand make the individual polygons or generate it from an image of themselves?

It's possible to generate svgs from images, see https://jmperezperez.com/svg-placeholders/

That's really cool, but the results don't look much like her avatar. I'm guessing it's really hard to do this without a lot of human input.
Post reply on HN