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 MutationObserver API to watch for changes in the grid. So instead of media queries, I used the Window resize event to add/remove CSS classes to trigger animation. One breakpoint, (at 520px) triggers a structural change to the Grid's first-child. The gentle animating of the width/height of child tiles occurs because animation is always triggered on Window resize; the event triggers mod's to CSS classes.
  • the FLIP animation technique for super smooth animations of multiple properties; for grid container and top-level children
• 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 (via 3 sub-classes) that generates 3 junks of content:
  • 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, (and preferably) Ajax will be used to return the random quote and images

Additional Design Musings

Squares are simple, symmetric and efficient. 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? It certainly won’t win any design awards but it's 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 .