From Bootstrap to CSS Grid
open.nytimes.com
open.nytimes.com
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:
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.
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.
If it was user facing, I'd typically use a theme built on Bootstrap.
But I'm curious to your statement about "working together". Are Bootstrap components "aware" of the layout css/components?
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.
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 :)
If grid has a way to address these unpredictable divs (not knowing how many there will be) then my last use case is closed.
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 :)
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.
`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 want to do that. Workaround with bootstrap or flexbox that don't really do _quite_ what I want as well as grid does... are still better than having to do the workaround _and_ grid, to get all browsers.
> You’re absolutely ready to declare display: grid if you’re the only person contributing code.
I think it's the other way around. If you have a team big enough to do grid _and_ fallbacks with flexbox or float or whatever, you're ready for grid. If you're one person... you probably don't got time for that! If I got to do the good enough fallback anyway, I'd rather just be done then. At least if you're me. Sadly, so goes CSS improvements. In a couple years I can probably use grid. Hey, at least I can finally use flexbox, which is awesome too!
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 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.
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.
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?
(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!)
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.
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.
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 remember, and this isn't a particularly tough problem to solve (Tcl/Tk has had "pack" since the late 90s, IIRC).
Why the hell did it take so long for the web to come up with a decent layout mechanism?
Because CSS wasn't originally intended to handle layout (got knows what was but there you are), the W3C was historically a bit of a shit-show (one would argue it still is) and had internal competitors to CSS (hello XSL-FO), then people finally accepted the inevitable but started with something which wasn't quite actually sufficient (flexbox) and still took multiple years to get it not-completely wrong, then there were multiple competing alternatives for whole-page layout (the XUL-derived Template Layout and Microsoft's Grid).
And so we reach 2018, having spent the last 20 years or so doing ad-hoc bits-and-pieces reinventions of half of DSSSL. But it doesn't use S-Expression so I guess that's great.
The UI side is even worse. When you compare $todays_web_framework to QT or Swing, it's like dropping into some terrible alternate timeline where the size of a thing on-screen can only be divined by spraying the proper mixture of cattle bones and chicken entrails on a ouija board beneath a blood moon.
Swing is on a whole other level of verbosity. For anything more complex, you actually need a GUI editor.
Need an actually good looking set of widgets or even simple customizations? You have way less options than what's available in CSS and have to resort to Graphics2d drawing.
And Maven sucks, use Gradle instead.
Would you? You think a build system that’s so pointlessly convoluted and verbose that you’re literally encouraged to resort to copy-pasting blocks of XML and using fucking Eclipse to accomplish even the most basic tasks is somehow superior to package.json or Gulpfile.js setups?
If I recall correctly, the initial grid spec was supported by IE10 and IE11, and those were released quite a while ago.
Making big changes on the web is difficult because it requires multiple independent parties to agree and it cannot break backwards compatibility. So you need to define how it all interacts with all the legacy stuff and additionally consider how things will evolve.
Another issue is that CSS has many poor defaults for applications, so developers end up fighting it often.
There's ongoing work to make things better in the future by allowing you polyfill things. Check out the Houdini spec stuff, which lets you define custom styles, layout, etc.
Anyways, I think the demand for more sophisticated layout systems didn't emerge in earnest until browsers started to experience the paradigm shift from "dynamic text document renderer" to "application runtime environment". If I had to put a date on it, I'd say that this happened during the 2005-2007 period, during which we saw the first big wave of Javascript libraries (including Prototype, jQuery, and MooTools), as well as the launch of the original iPhone _without_ Flash support.
As for the length of time it's taken to release Grid, it looks like W3C has at least been aware of the problem for quite some time- the first "Advanced Layout" Working Draft was published in 2005, but it looks like it didn't stabilize into the current Grid layout until about 2015.
The current Grid layout is largely the same as that proposed by MS at the August 2010 F2F in Oslo.
Note that many of the early/mid-2000s specs essentially got paused while CSS 2.1 was finished (because it's hard to define new things clearly until you define the existing things clearly), and while waiting for more implementer interest.
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.
In the past I would have lazily used bootstrap as I've used that for over three years and know the grid inside out.
It was a touch intimidating at first. No framework!
But it is really quite expressive. It took me 12 lines of CSS to get a traditional blog layout that collapsed on mobiles.
Code here:
https://github.com/GrilloPress/grillopress.github.io?files=1
The idea behind my blog is every major article I style slightly differently.
Have an upcoming design kanban one where I've played about a bit more with grids to create the boards
Anyone have any good ideas here?
PS I think Smashing Magazine have an overview of Houdini with a masonry layout as an example...
Did the writer hand make the individual polygons or generate it from an image of themselves?
Considering you are already writing Bootstrap due to compatibility concerns why not just keep using that? I feel like adding another dependency like this would just create a risk of having design differences pop up over time.
Mind you, I don't hate CSS Grid. I really enjoyed learning it, and I look forward to be able to use it in a few years.
Generous interpretation: graceful upgrade when CSS grid has sufficient browser support.
Realistic interpretation: to work with the 'new hot' and not the 'old stodgy'
Use both and you'll get the best of two worlds.
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 module. However it seems to be really buggy at this point, it often ended up with elements sliced in half or missing. Also, the biggest issue for me was no way to target the columns and prevent reordering. I had sections of text that could be expanded or collapsed, and that would trigger a complete rearrangement of columns. Nasty.
I ended up coding my own column system for vertical wrapping, and it was so helpful I was thinking about open-sourcing it, but I'm not sure if CSS grid obviates the need.
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.
https://medium.freecodecamp.org/heres-my-free-css-grid-cours...
To create complex layout you need both and should be familiar with both anyway.
I think we are so familiar with css/html pain that we can't believe to see light in the end of the tunnel. :)
I've seen fallback CSS and JavaScript polyfills used.
https://www.smashingmagazine.com/2017/11/css-grid-supporting...
This comment is from two years ago:
But I think I found a solution for everyone:
We support Grid by default. If Autoprefixer see that your CSS is too complicated for IE, it will warn you to disable Grid support and use some JS polyfill.
"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."
A good way to bring a client round is to explain that the time saved on making IE11 pixel perfect is better spent adding features elsewhere.
I have used it in one project and it's awesome. What I struggled to do with Bootstrap for almost a week, I could do the same with CSS Grid in an afternoon.
For example I'm using quite a bit of semantic-ui today. Makes the job of building interfaces really simple and easy.
(I don't have anything else to add, just found this interesting.)
[0] - https://open.nytimes.com/the-new-york-times-ranks-as-a-top-c...