12 is the Magic Number

I recently saw a great TedTalk by Brad Frost about creative exhaust, and how byproducts of a design process can be beneficial to other designers. So, along that theme, I want to share a somewhat simplistic resolution I have implemented many times for displaying multiple block elements in a responsive website.

Most all of us are aware of http://www.responsivegridsystem.com/, I know I have used it at least once before, which seem like can be a hectic solution. Also, with using SASS or other people’s fluid grids (http://codepen.io/cfarm/full/yslnF), it seems like you still altering a lot of code to get what you want.

Recently as a side project I redesigned the WVU Employees’ Federal Credit Union for fun, and I again utilized the magic number twelve to display multiple block elements in a responsive website. As you can see in the middle of the webpage under the “What We Offer” section, I have twelve different buttons for products.

Using 12

Using the number twelve gives you the ability to divide block elements into a grouping of 12, two lines of 6 block elements, three lines of 4 block elements, four lines of 3 block elements, six lines of 2 block elements, and twelve lines of 1  block elements, if you’re so inclined.

It may seem simplistic, and basic common sense, but more and more in commercial websites designers are having to deal with responsive block elements. So for example, here is my HTML structure:

    Savings

This is my CSS structure for desktop resolutions:

.pbox {
   display:inline-block; 
   float:left; 
   border-radius: .75em; 
   overflow:hidden; 
   position:relative; 
   min-height:150px; 
   width:16%; 
   margin:0 .8% 1% 0;
}
   .pbox:nth-child(6n+6) {
   margin:0 0 1% 0;
} 

And here is my CSS for responsive resolutions:

/* 1200px- */ 
@media screen and (max-width:1199px) {
   .pbox {width: 24%; margin:0 1.33% 1% 0;}
   .pbox:nth-child(6n+6) {margin:0 1.33% 1% 0;}	
   .pbox:nth-child(4n+4) {margin:0 0 1% 0;}
}
/* 768px- */ 
@media screen and (max-width:767px) {
   .pbox {
      width: 32%;
      margin:0 2% 2% 0;
   }
   .pbox:nth-child(6n+6) {
      margin:0 2% 2% 0;
   }	
   .pbox:nth-child(4n+4) {
      margin:0 2% 2% 0;
   }
   .pbox:nth-child(3n+3) {
      margin:0 0 2% 0;
   }	
}
@media screen and (max-width:479px) {
   .pbox {width: 49%; margin:0 2% 2% 0;}
   .pbox:nth-child(6n+6) {
      margin:0 2% 2% 0;
   }	
   .pbox:nth-child(4n+4) {
      margin:0 2% 2% 0;
   }
   .pbox:nth-child(3n+3) {
      margin:0 2% 2% 0;
   }
   .pbox:nth-child(2n+2) {
      margin:0 0 2% 0;
   }
}
/* 360px- */ 
@media screen and (max-width:359px) {
   .pbox {
      width: 100%;
      margin:0 0 2% 0;
   }
   .pbox:nth-child(6n+6), 
   .pbox:nth-child(4n+4), 
   .pbox:nth-child(3n+3), 
   .pbox:nth-child(2n+2) {
      margin:0 0 2% 0;
   }
}