From Bootstrap to CSS Grid(open.nytimes.com)
open.nytimes.com
From Bootstrap to CSS Grid
https://open.nytimes.com/bootstrap-to-css-grid-87b3f5f830e4?pagewanted=all
103 comments
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.
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.
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.
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 ;)
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.
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.
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 :)
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.
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 :)
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 :)
> 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.
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.
Plus, it's not like you can't use CSS Grid on a page that uses Bootstrap.
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?
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.
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.
I believe "working together" would be more about aesthetics than technical in this instance.
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.
I still use bootstrap components in my projects. Just the layout is done using CSS grid. Its actually a very powerful combination.
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.
I know a few shops that have been using bootstrap just for grids. Idk why, but they do.
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.
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 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!
`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!
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
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?
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!)
(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!)
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.
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.
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.
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.
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?
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.
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.
IE 10 is at 0.1% in the US and 0.16% globally, so no.
Very relevant if you want to include China in your user base.
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 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?
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?
> 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.
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.
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 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.
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.
We intentionally moved from Qt to Electron for desktop app development. Electron apps look better generally and are far easier to maintain than Qt-based apps. CSS has its warts but it's very expressive these days. Don't even get me started on Swing versus React. A decent set of React components are more declarative, easier to maintain, and faster to develop with than Swing. You also have powerful testing tools in React like Jest snapshots and Enzyme, which allow you to inspect and test the output of your UI in ways that are not straightforward with Swing.
Swing has been obsolete for quite some while, if anything, compare with JavaFX
> I'd argue that Maven is lightyears ahead of NPM or pack or gulp or whatever the fuck the kids are using these days.
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?
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?
Interesting. What's a specific example of how QT or swing is superior to web tech?
It is not, at least in 2017. Qt5 is great, specially with QrQuick, but you need to commit to C++ and that's a problem in itself. (No, the Python binding are unholy with restrictive license and poor docs)
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.
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.
This comment is overly dramatic and immature.
Well, some specs have been around for a while, but nobody implemented em. For example, I think the first version of flexbox was being proposed at least 10 years ago, but it took a few years for it to get picked up.
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.
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.
Because Web browsers originally operated under a document-focused paradigm rather than an application-focused paradigm. (The CSS box model spec makes much more sense if you dig through it with this in mind.) Even after Javascript came out, there wasn't really a notion of a Web application in the modern sense- if you wanted to deliver rich content, the primary way to do it was via Flash or Java applets. I would hazard to say this was the case from around 1995 to 2005?
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.
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.
> 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.
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.
The question is why it was deemed necessary to morph the document-centric Web into a Frankenplatform, and for what price. The complexity of CSS has already driven Opera (who once employed the original inventor of CSS) out of the business of producing a web renderer.
It’s a de facto platform driven by 3.5 billion users. No one “deemed” anything necessary, it just became. And it wasn’t for lack of trying, either (see Java, Adobe AIR, et. al.).
Because there is demand for on-demand, networked applications.
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.
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.
And it makes sense. That is define the properties of the container, not the individual items within it.
I'm a recent convert to CSS grid, absolutely love it. There's no dilemma between flexbox + grid; they're complimentary. Just looking forward to full devtools support in Chrome (although Firefox's grid devtools are mighty fine).
I recently converted my blog to CSS grid.
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.
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.
Do you have a link? I am thinking about converting my blog to CSS-Grid, but would like some inspiration.
It is a touch hacky but here it is: https://grillopress.github.io
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
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
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?
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/
[0]https://haltu.github.io/muuri/
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/
https://codepen.io/Kseso/pen/ZJbEMe/
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...
PS I think Smashing Magazine have an overview of Houdini with a masonry layout as an example...
I’ve explored the same issue and masonry is the only solution I’ve found.
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?
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.
Can someone illuminate me as to what are some of the reasons that would make someone style with CSS Grid with a Fallback to Bootstrap?
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.
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.
Grids don’t support transition animations yet. One of the reasons I “downgraded” to bootstrap.
> Can someone illuminate me as to what are some of the reasons that would make someone style with CSS Grid with a Fallback to Bootstrap?
Generous interpretation: graceful upgrade when CSS grid has sufficient browser support.
Realistic interpretation: to work with the 'new hot' and not the 'old stodgy'
Generous interpretation: graceful upgrade when CSS grid has sufficient browser support.
Realistic interpretation: to work with the 'new hot' and not the 'old stodgy'
It's not just "the new hot". Using pure CSS over a JS + CSS library like bootstrap has performance implications for your code. Besides avoiding yet another dependency, native CSS grid renders faster. Also, CSS grid being a native feature, you can use those skills in any project, anywhere, even one that isn't using Bootstrap.
What is the advantage of using CSS Grid instead of Flexbox? The Bootstrap v4 already uses Flexbox for its grid system.
Flexbox is built for one dimension layouts (e.g. a header), while Grid is built for creating two-dimensional layouts (e.g. an entire page).
Use both and you'll get the best of two worlds.
Use both and you'll get the best of two worlds.
CSS Grid can handle 2D layout requirements. 1D layout requirements in the 2D layout is managed by the flex-box, though the same can be easily be done with a nested CSS Grid.
The question is not Grid or Flexbox. You can (and will) use both.
Let alone using CSS Grid. Here in India, I can't even use Flexbox. Thanks to UC Browser having a 30% market share. Sigh, back to those IE 6 days.
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 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.
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.
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.
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.
Here's a full-length CSS Grid tutorial posted to HN a few days ago.
https://medium.freecodecamp.org/heres-my-free-css-grid-cours...
https://medium.freecodecamp.org/heres-my-free-css-grid-cours...
Just to add what others always mention: CSS Grid and Flexbox are compatible, CSS Grid lays elements in grid, while flexbox handles one dimensional layouts.
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. :)
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. :)
What are the preferred solutions for people that are forced to support IE11?
I've seen fallback CSS and JavaScript polyfills used.
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."
"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."
+1 This is a great solution that doesn't take a huge amount of time to implement. Esp if you only use CSS Grid for 2d layouts and use flex for which has decent IE11 support for laying out components (where mobile is often just stacked 100% width components).
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.
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.
Will there ever be a time when MSIE won't be the limiting factor; seriously thought we'd gotten past "but what about IE".
i'm wondering this too. we need to support down to IE11 but i wanna use grid.
This article on the subject is really good:
https://www.smashingmagazine.com/2017/11/css-grid-supporting...
https://www.smashingmagazine.com/2017/11/css-grid-supporting...
Was wondering the same thing. I wonder if postcss and autoprefixer supports it? https://github.com/postcss/autoprefixer/issues/603
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.
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.
I would give PostCSS with Lost Grid[1] a try (though I haven't used Lost Grid extensively).
[1] http://lostgrid.org
[1] http://lostgrid.org
There were some good links in the article but my no. 1 resource for CSS grid is https://css-tricks.com/snippets/css/complete-guide-grid/
What I love about the CSS Grid is that it does a really good job of separating content from presentation.
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.
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.
CSS Grid blew me away the first time I saw it. I didn't realize it was ready on the latest browsers. I switched from bootstrap recently to tachyons, this is just another reason to not miss it.
[deleted]
what's the deal with IE11 and CSS Grid? Is it partial support or MS specific notion of CSS Grid? I keeps seeing both sentiments represented with regard to IE.
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.
For example I'm using quite a bit of semantic-ui today. Makes the job of building interfaces really simple and easy.
Completely off-topic: All five people mentioned as experts on CSS Grid towards the end of this post are women.
(I don't have anything else to add, just found this interesting.)
(I don't have anything else to add, just found this interesting.)
I welcome our female overlords :). Maybe this might be css that speaks to women.
In another blog post they inform us that they have been ranked a Top Company for Women in Technology[0]. I'm not familiar with the Anita Borg Institute that did the ranking, but I think it's great to see anyways.
[0] - https://open.nytimes.com/the-new-york-times-ranks-as-a-top-c...
[0] - https://open.nytimes.com/the-new-york-times-ranks-as-a-top-c...
Is frontend development generally more dominated by women or just CSS? Any companies driving this in particular?
It feels like artificial inclusion via exclusion.
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