12 Column CSS Notes

From MCDP Tech Wiki
Jump to navigation Jump to search

For our static WordPress pages, we recommend using a 12-column format similar to, but more limited than, BootStrap. For example, the following would produce a three-column static page (so long as the "wpautop" plugin is not disabled:

<div class="row"><div class="col-4"><center><a class="button">Donate</a></center>

Your donations ensure that the Multnomah County Democratic Party will continue to be a progressive voice in Oregon politics.</div>
<div class="col-4"><center><a class="button">Get Active</a></center>

The Multnomah County Democratic Party is an all-volunteer operation, from knocking on doors and making phone calls all the way to the party officers. Want to get involved? Let us know how we can put your time to good use!</div>
<div class="col-4"><center><a class="button">Become a PCP</a></center>

The Precinct Committee Person (PCP) represents their community at the Party's Central Committee, and also represents the Party to the Community. As a PCP, you will have an opportunity to guide the direction of the Party.</div>
</div>

The col-4 class div indicates that the enclosed content takes up four columns (or one-third of the available space). Columns can be collected in row class divs to have several layer of columnar content.

The actual CSS for this is below. It should already be included in your WordPress site starting with Site 3.0.

/* responsive twelve column formatting */
.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
   /* for desktop */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%}
	
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.67%}
	
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%}
}