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;
/* fallback for non-calc() browsers */
width:calc(100% / 4);
For the two column layout:
margin-left:3.125%; /* 20 / 640 */
For a pure CSS3/HTML drop down menu, this code worked really well.
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