Grid Classes Vs. Class Definition

my-code-vs-his-code

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…)

Advertisements

About KC

I am Katarina Countiss, a multimedia designer. I like blogs, games, art and technology. I am curious about how things are made.
This entry was posted in Web Design. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s