Responsive Service Levels Table
The challenge on this project was to craft a responsive comparison table in (almost) pure CSS that used check boxes in its full-width view, but an additive solution in responsive view. Shift the viewport to see what that means. The solution was to
use DIV elements, then build the actual table code back up with the CSS and shift context as required
Dynamically Adjusted Water Schedules
It adjusts dynamically. So dynamic.
Access and Control from Any Device
I have authoritah.
Wireless Network Connectivity (3G)
It sucks for video, but is great for water.
Automatic Weather Based Adjustments
We think AccuWeather is the best.
Dynamically Adjusted Water Schedules
It adjusts dynamically. So dynamic.
Access and Control from Any Device
I have authoritah.
Includes all Basic features
Wireless Network Connectivity (3G)
It sucks for video, but is great for water.
Includes all Basic features
Includes all Basic+ features
Automatic Weather Based Adjustments
We think AccuWeather is the best.
Concluding Notes
There were some additional steps to take in the production version of this object, which aren't apparent in the Codepen demo. If enough people are interested, I'll put it up on my blog. For Google's sake, that label field shouldn't exist in the raw
source. Using PHP, I populated a JSON object in the footer, which I then used to append data to the "labels" elements, keeping the whole thing in sync with a couple counters. That keeps the raw source, which gets spidered, nice and clean. Finally,
you can still break this version with lazy formatting - more CSS error traps will be needed in a CMS environment.
