This repository has been archived by the owner on Sep 2, 2022. It is now read-only.
[DISCUSS] Remove packery - replace with css grid #299
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
I don't think we've been using it in correct terms of the license, and I also think it has some performance issues in the browser as it condenses the grid.
This class is to replace packery by doing the tiling at html render time, rather than in JS on the browser. We construct a Tiler with a number of rows and columns. When we add a tile we say what size it is (default is 1x1) and when we layout the tiles the tiler will fit things in and fill up spaces created by adding larger tiles using any future smaller tiles if possible.
h-lame
changed the title
|
My preference would be for CSS grid. I'd like to not rely on JS to arrange the layout (#304) and I don't think the flexbox version works (#300). We might be able to implement a mixture until CSS grid is well supported. We could use |
|
So, I was reading a thing and it said CSS grid was well supported so I checked can i use again and it's effectively 84% supported now so it may be worth revisiting this. Not sure what the IE11 story is though as it's flagged on can i use as using an older version of the spec via |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
We're using the packery library to layout the blog posts in a condensed gird, something that at the time of development was impossible to do with pure css. However, I'm almost certain that we've not paid the license fee to be allowed to do so on the site, so we should remove it. Using CSS grid works, but the stats from "can i use" for css grid are not great (37% Globally, 33% UK) so I'm not sure it's a useful solution (yet).
As an aside, we've introduced a
Tilerclass to arrange the articles into a grid as we render them in HTML, but it's possible that this class isn't needed because css-grid is able to cope. (Perhaps not with the minimal grid implementation in this PR, but maybe with some tweaks)This is an alternative to #300