Demo(If the page loads slowly just reload it, the server could be idle for low traffic)
This is the first iteration of a project I started after having discovered the BLOGThESIGN site.
So, ideally this would be a template for a blog home page, with a fixed-on-viewport ‘cover’ with some site info on the left and the main content on the right consisting of an irregular grid of post teasers, arranged in a Pinterest/masonry-like layout. The whole viewport width is partitioned in equal sized columns, where the first column is for the cover and the remaining ones are for the posts.
Initially this computation is delayed after all the posst images are loaded, to get the final height of each post. During this phase the masonry layout is approximated with Flexbox, obtaining the same effect/behaviour along the horizontal axis but with post arranged in same-height rows, as can be seen in the first shot:
Note that there are a lots of posts on page to test the performance of the custom layout code. One of the next items on the TODO list is to implement an infinite scrolling solution.