Menu

ZURB Foundation Customizations – 28 Blogs Later, Day 3

ZURB Foundation Customizations.

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.

Visibility Classes

One of Foundation’s most powerful assets is its visibility ruleset. There are a series of classes that can show or hide elements based on viewport size, orientation, touch capability, and print. There are even classes built in which allow authors to hide elements from screen or print but keep them accessible to assistive technologies like screen readers.

  • .[hide or show]-for-[size or orientation]-[up or only]
  • .[hidden or visible]-for-[size or orientation]-[up or only] (accessibility versions)
  • .[hide or show]-for-[touch or print]

The concept isn’t new but the implementation by ZURB is excellent.

ZURB Foundation: Visibility.

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;
   }
}

Ad Infinitum

You get the idea. I propose that ZURB Foundation 6, when it’s released, include new logic in the Customize Foundation tool that allows users to select which rulesets, if any, they need selectivized.

ZURB Foundation: Selectivize.

Some components wouldn’t work with selectivizationating. Grid and Block Grid pictured above already have classes like .large-4. How would .touch-large-4 work? Is that overkill? The idea starts to get a little muddy after a while, but it would still be an improvement on an already great system.