WHOA NELLY, heaps going on in here! Responsive web design (RWD) courtesy of...
- Bootstrap 3 Navbar and Grid
- Custom responsive tiles in place of Bs3 columns
- Hardware accelerated CSS3 animations
- JS/jQuery for CSS class toggling
The menu bar, grid layout and inner tile contents respond to window width fluidly. One goal is to eliminate horizontal scrolling and pinch/zoom for ALL site visitors. This is the "responsive" in RWD.
More noticeable layout changes occur iteratively at key screen width cut-offs. It mimics the "adaptive" design approach but on the client-side. (See AWD)
- By default, Bootstrap 3 switches to a mobile-friendly menu when width is less than 768 pixels.
- Smartphone screen orientation changes, (landscape vs. portrait), typically occur at 480 pixels.
Row 1, Tile 3: square quarter<
A computer once beat me at chess,
but it was no match for me at kick boxing.
Emo Philips
Custom Responsive Tiles inside Bs3 Grid
Rather than nesting rows and columns, a tile approach is used. Classes are defined as squares and rectangle and used in place of Bootstrap 3 column classes.
This HTML5/CSS3 is more semantic and a little easier to follow then nesting.