About the Home Page

Additional Design Musings

“People aren’t angular, why should they live in rectangles?” Charles Deaton, American architect

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 .