ZURB Foundation Customizations – 28 Blogs Later, Day 3

ZURB Foundation 5 is the best CSS framework I’ve come across. For my money, it beats the pants off Bootstrap. I use it on every new project where applicable. Its CSS class names are easier to use and its documentation is miles ahead of everyone else. I’ve found a few key elements missing from Foundation, however.

I’ve come up with these ZURB Foundation customizations for my own projects. Maybe they’ll be helpful to you too. First I’ll explain how these Foundation add-ons work, then I’ll cover why I think they’re necessary. Remember those awful “Windows 7 was my idea” commercials? Someday, when this little proof-of-concept gets rolled out as a main Foundation feature, you better believe I’m taking credit.

[stripe html_class=”light-grey”] [/stripe]

Applying Logic to Other Rulesets

If I can use viewport size or other factors to selectively hide or show an element, why can’t I selectively align an element left, right, or center? Why not selectively apply all of Foundation’s utility classes? Admittedly, this would increase file size. So if the functionality doesn’t interest you, you may be better off without the added code, but ZURB already lets users create custom downloads. Why not add this?

Here are a few examples of how I apply selective logic to things like float, text alignment, and display properties. I should mention a few things:

1. I frequently use ZURB Foundation for WordPress, so these rules contain a few redundant class names to be sure they cover WordPress’ default alignment classes.
2. I chose 40 and 64 em as my breakpoints. Your mileage may vary. Adapt your CSS accordingly.

Float Left

@media only screen and (max-width: 40em) {
   .left-small-only,
   .alignleft-small-only {
      float: left;
   }
}
@media only screen and (min-width: 40.063em) {
   .left-small-up,
   .left-medium-up,
   .alignleft-small-up,
   .alignleft-medium-up {
      float: left;
   }
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
   .left-medium-only,
   .alignleft-medium-only {
      float: left;
   }
}
@media only screen and (min-width: 64em) {
   .left-large-only,
   .alignleft-large-only {
      float: left;
   }
}

Text-align Center

@media only screen and (max-width: 40em) {
   .text-center-small-only {
      text-align: center;
   }
}
@media only screen and (min-width: 40.063em) {
   .text-center-small-up,
   .text-center-medium-up {
      text-align: center;
   }
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
   .text-center-medium-only {
      text-align: center;
   }
}
@media only screen and (min-width: 64em) {
   .text-center-large-only {
      text-align: center;
   }
}

[stripe html_class=”light-grey”] [/stripe]