Hacker News Reader

Comment by mrborgen | Hacker News Reader

"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 Bootstrap vs. CSS Grid a few weeks ago btw. Feel free to check it out:

https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881c...

And here is a link to my free CSS Grid course, in case you're interested in learning it:

https://scrimba.com/g/gR8PTE

View on HN

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 agree. Bootstrap has wide range of ui components, sass/less, ability to customize, mixin, etc. ability to customize easily via tinkering with variables.less/sass, or customizing the hell out of it by messing with mixin and component less files.

Plus, it's not like you can't use CSS Grid on a page that uses Bootstrap.

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.

Isn't that the whole point of Bootstrap? It "bootstraps" your design to get you to a minimum coherent design with the least amount of fuss, and then allows (some would say forces) you to build on top it to customise as you see fit.

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.

Overriding Bootstrap variables gets you 80% there. You can do a lot with changing padding, colors and fonts. I was very sceptical of Bootstrap from a design perspective but changed my mind after some deep diving into customization.

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.

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

I know a few shops that have been using bootstrap just for grids. Idk why, but they do.

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.

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.

Working together as in consistent styling. Margins, padding, font sizes etc. are consistent and scale when you use their xs, sm, md and lg formats...up to a degree.

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

I feel the extra padding and margin classes like mb-3, px-md-5 make up for a lot of the rigidity that the .container .row .col system insists on. Not perfect, but a whole lot better than anything I could come up with for a medium to large web app.

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 :)

I read everywhere that both are complimentary. I am a complete amateur in web dev but the only place where I can imagine flexbox in an otherwise grid display is when divs are stacked and we do not know how many divs there will be.

If grid has a way to address these unpredictable divs (not knowing how many there will be) then my last use case is closed.

I'm definitely more of a backend developer myself, but of course I have to do the frontend work on my own projects.

For my use case, I'm using CSS Grid on this project (https://www.contabulo.com) to manage the layout of 'cards' on a 'board', where the number of cards is variable. I was originally using flexbox, which proved to not be.. flexible enough to manage it properly (and there were some annoying behavioral differences between browsers).

I was worried I was going to have to resort to some Javascript-hackery when I happened upon CSS-grid being mentioned in an HN post a while back. Luckily, support for grid was added to all of the major browsers not long after I discovered it :)

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.

One of the compelling things for me is the ecosystem of bootstrap-based "themes". As a developer with enough design sense to realize I can't do design, I love I can work with a simple markup format and more or less drop in a theme to get a decent look, without having to think a lot about design or have an actual designer. For the internal tooling I primarly work on, bootstrap has meant a vastly improved look and feel over what I would have done before.

From this perspective, Bootstrap is basically an API you can develop against.

For customer-facing products and websites (where you can have actual designers involved) it's maybe not as compelling, or even a negative ("oh look, a bootstrap site"), but it's fundamentally not a worse choice than any other framework or programming language.

would it be possible to use bootstrap-themed components with css grid? It appears you don't have to use bootstrap positioning to use bootstrap theming.

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

The grid is perhaps 5% of what Bootstrap does, and as a whole it's a lot more convenient than starting from scratch every time.

Flexbox made me stop hating CSS. Grid is making me love it. I can finally get exactly what I want in a manner that's intuitive and obvious.

Reply on news.ycombinator.com