The top row is code I am examining that is being taught in a web development class this year (2015). The bottom row is the initial workings of how I think it would be optimal to define HTML.

When working on Project 4 of the coding program I’m currently in, I was initially stumped by the wireframe that goes from a 3 column layout (for desktop) to a 2 column layout (for tablet) and then a single column layout (for smart phones). Lately, I’ve been pondering creating a simple framework that makes the developer work a little smarter.

I think defining a div with a class that is named for its desktop orientation is biased towards desktop being the primary viewport. I also think it’s limiting if you want to have a different distribution for the tablet mode.

Creating a CSS/HTML5 system that uses pseudoclasses to select the last item in each row without defining rows  seems like the way to go. Using exact math via Flexible Math, you can use only the classes you need and be able to control the divs without extra classes.

I would also propose to work this into a HML/SASS formula that will generate the same code only faster.

This is a working theory and as I continue with Bootstrap (in an aside–the version bootstrap I downloaded is not HTML5 compliant, so ideally, I’d like to create a new framework that utilizes these features, too…)