This repository has been archived by the owner on Sep 2, 2022. It is now read-only.
[DISCUSS] Remove packery - replace with flexbox #300
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
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 flexbox works to a degree - there are still holes in the grid where packery would shuffle things up (e.g. a small followed by two large and another small would leave a hole under the first small one:
When what our Tiler would give us, and what we'd want is:
We still have two slots, but they can be filled by other tiles in the 2nd example, but won't be in the 1st example.
I'm not 100% sure I've got the flexbox stuff correct, so we might be able to tweak some more and get better results.
This is an alternative to #299