viewport:
test
m
b
l
Row 1, Tile 1: square half
Call it "Responsive AWSOMENESS"! (circa 2015)

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
Try it out on your mobile device, an emulator, or simply by changing the width of your browser window. Toggle the viewport monitor to track changes in viewport size.

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 2: square quarter
This is a "link" tile.

Row 1, Tile 3: square quarter<

Row 1, Tile 4: square quarter

A computer once beat me at chess,
but it was no match for me at kick boxing.


Emo Philips
Row 1, Tile 5: square quarter
Row 2, Tile 1: rectangle half

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.

Row 2, Tile 2: square quarter
Row 2, Tile 3: square quarter
Row 3, Tile 1: square quarter
Row 3, Tile 2: square quarter
Row 3, Tile 3: square quarter
Row 3, Tile 4: square quarter
Row 4: rectangle full
Row 5: square full