About the Home Page

• Animating a CSS Grid is really just for fun. To catch the animation on a mobile device, slowly switch between portrait and landscape; it's subtle and sort of cool! To observe on bigger displays, tinker with the window/viewport width.
• Forcing square CSS Grid items/children is seemingly impossible without knowing this little trick!
• Buttery smooth CSS Grid animation is tricky without a FLIP library. I used the animate-css-grid by Alex Holachek. It's easy to configure and lightweight (about 27 KB). The lib uses:
  • the FLIP animation technique for super smooth animations of multiple properties; for grid container and top-level children
  • the MutationObserver API to watch for changes in the grid. So, instead of media queries, I use the Window resize event to add/remove CSS classes, which sets off the animations. At viewport width 520px, a CSS width/height change occurs in the grid's first-child, this triggers the remaining grid items to smoothly resize and reposition. Also, small changes to the viewport's width (not demonstrable on mobile devices), create smooth mini-animations. This occurs because dummy CSS class changes are "observed" (by the library), and in turn, trigger the animation.
• Of course there are other ways to animate a fully responsive layout. Here are a few cool ideas:
  • Animated Media Queries , uses float, not grid.
• The backend is basic ASP.NET MVC with Razor views. I incorporate a custom MVC model named DynoTile. It instantiates an object that generates 3 junks of content (via 3 sub-classes):
  • RandomQuote: pulls one random quote from a database of quotes
  • RandomBannerImage: pulls one random photo from a pool of high resolution photos.
  • RandomKenBurnsEffect: pulls four random photos from a pool of lower resolution photos. These photos cycle through a Ken Burns effect animation (using complex keyframes).
  Eventually, I'll probably build an AJAX version of this back-end logic.

Additional Design Musings

Squares are simple, symmetric and efficient. And square corners are everywhere, rooms, sidewalks, computers and of course the viewport; the window that encapsulates our design. So why not embrace it, round its sharp corners and allow it to resize with fluidity and grace? My home page probably won’t win any awards for design, but it is an interesting exercise in CSS Grid. There is no particularly good reason to use squares and eventually I'll introduce some rectangles...shocking! Seriously though, the idea goes way beyond the Pinterest-ish masonry layout.

We all know that variety is the spice of life. That's what the home page is attempting, not by being square, but by being random. Although not there yet, the idea is to make ever page refresh 100% unique (in layout and content), without being disorienting; i.e. still look reasonably professional. I also like the idea of fully responsive, complex layouts that do more than simply snap to common device breakpoints; small/big phone, tablet, desktop, etc. In other words, use animation to visualize the flow of layout elements as the viewport’s width changes. It is really cool, far from necessary, and a great way to learn about CSS Grid. And given its vast API, there are perhaps an infinite number of layout patterns that can be visualized with just a small set of child items.

My CSS Grid-based home page is a new stab at an old look. The first design was based on the Bootstrap 3 Grid system, and lots of jQuery. It was responsive back in 2015, way before responsive, “mobile-first” design became ubiquitous. The price paid of course was that it was a hog, both in terms of initial load time as well as performance! An example of my old design approach; a “tile” tweak of the Bootstrap 3 grid system can be viewed here .