In JobTrain’s Web Developer Coding Bootcamp, we received our forth assignment. Take these wireframes and turn them into CSS/HTML sites.

— I added the gradient because I think they add a little pizazz for little effort.

I was initially intimidated when I received the wireframes because I was used to using row-divs to separate rows and going from the three column layout to the two column layout would have meant violating one of those rows. (I was also a little irritated because the assignment violated the “content is king” paradigm that was so instilled in me.)

Using the nth-child pseudo selector, I was able to control the right margin on the boxes to give them the spacing the divs needed when and where they needed them.

I coded a few websites two years ago for graphic design school, so a lot of this is review, but there are also some new features/best practices that I was excited to utilize, like HTML5 semantic selectors (ex. article, header, footer, etc.).

I used this code for the nav bar.

border-right:1px solid #ccc;
width:24.8%;
/* fallback for non-calc() browsers */
width:calc(100% / 4);
box-sizing:border-box

For the two column layout:

article:nth-child(odd) {
margin-left:0
}

article:nth-child(even) {
margin-left:3.125%; /* 20 / 640 */
}

For a pure CSS3/HTML drop down menu, this code worked really well.

Links:

Dirty Markup clean that code!
Google Calculator for calculating column widths ((formula: total width minus (margin-width times margin occurence) answer divided by number of columns)) ex. 960px wide layout with 20px margins and three columns (two margins). (960-40)/3= column width.
CSS helper for converting pixel widths into percentages