The Pros of the New Foundation 6 Components and their Cheese Comparisons

For those of you who aren’t aware, Foundation is an advanced front-end responsive framework created by ZURB. They recently released Foundation 6, which includes many new features and components, along with 50% code reduction compared to Foundation 5, a new flexible navigation system, and it also has fewer style overrides (yay!).

There are many mixed reviews from front-end developers about the new Foundation 6 features, but in this post, I’m going to focus on the pros of a few of their components. Whether they are new, tweaked, or just simple, golden plugins that shouldn’t be overlooked, I’ll give a solid breakdown of how they work and my experience from using them. And to make things even more fun and relatable, we will throw in a cheese comparison for each component based on their difficulty, cross-browser capability, reliability, and overall UX structure and appearance.

Responsive Grid System: the Mozzarella of the Cheese World

Like creamy, smooth Italian mozzarella cheese, the Foundation 12-column grid is easily understood, reliable across all borders, and it’s generally the base component within the entire framework. Now with Foundation 6, the grid has flexible Sass mixins where you can build your own code to create semantic grids or customize until your heart desires.

Now don’t get me wrong, I’m not referring to the new Flex grid that comes with Foundation 6. After doing a little research and testing the Flex grid out myself, it is not so peaches and cream. The first important fact to note is that the Flex grid and Standard grid use the same classes, so don’t include both grid types in the same project. The second important fact, which for me was more of a red flag, is because unfortunately, the browser support is not strong across all borders. That being said, I would not advise to use it unless you absolutely need to, or you’re working on a project that doesn’t need amazing cross-browser capabilities.

Back to the standard grid system discussion: it is overall easy to implement or build your own structure, just as Mozzarella can be your affordable, go-to cheese for just about any dish you cook. It works well across all borders, and it is the true answer from the Responsive gods.

Sticky Sidebar: The Ready-to-Eat Ricotta

Ricotta cheese is fresh, soft, and ready to eat as soon as it’s made (no aging required). Because of these characteristics, it compares to Foundation’s Sticky component. The Sticky component, which was previously only a fixed-navigation component, can now be easily implemented with just about any object with the help of a few utility libraries and some JavaScript. You can also set up two anchor points, from start to finish on where you wish for your sticky section to follow by adding a few data anchor points inside the sticky container div to target a specific id.

For example, the .data-top-anchor is set initialize at the entryContent id, and the event is set to fire at the top of the container:

<section class="social-sticky">
  <div class="left" data-sticky-container="">
  <div class="sticky button-group"
       data-sticky=""
       data-top-anchor="entryContent:top"
       data-btm-anchor="entryContent:bottom"
       data-margin-top="20">
  </div>
</section>

You can also customize the main plugin options as individual data attributes, by replacing the camelCase ids with hyphenated words, such as the data attribute shown above as .data-margin-top (which originated from the camelCase marginTop .js option).

Media Objects: The Buttery, Elegant French Brie

Brie, which originated in France and has a buttery, delicate taste, is great to serve to guests for any cocktail occasion. I also find that Media Objects share similarities to this fine cheese because it is a simple yet extremely helpful component for aligning content next to images. By simply using a class of .media-object-section wrapped inside of a .media-object container, you can align, nest, or stack your items in just about any way you’d prefer. No need for creating a bunch of media queries for this component, because it provides the @include media-object-stack mixin, in which you can apply to section elements to achieve media object responsiveness without having to nest every class in a grid system.

So next time you find yourself having alignment issues, check out this component for a quick solution (just as how Brie can be a quick appetizer solution for that dinner party you’ve decided to host at the last minute).

Off-canvas Menu: The Salty, Crumbly Feta Cheese

In the past, I’ve had several issues with Foundation’s Off-canvas component. Whether it was an absurd amount of overriding styles, or just not getting the JavaScript to compile correctly, it has always caused a headache. Feta cheese pairs well with this component, because its tanginess doesn’t appeal to everyone, but it certainly has a distinctive taste (and over time, it might win you over when you try it in a Greek salad).

The Off-canvas menu tweaked for Foundation 6 is surprisingly pleasant. The events are triggered with the needed JavaScript and util libraries, and once that is set up properly, it’s smooth(ish) sailing. The menu is positioned outside of the .off-canvas-content class and it slides in once it’s activated. The initial setup of the Off-canvas structure is very important because it removes most cross-browser bugs that many developers may have experienced in older Foundation editions. By adding a click trigger of data-open or data-toggle to any element with an id of the main Off-canvas class, this will then fire the menu to toggle when it’s selected. You can also set up the code to open left or right, add a title bar to trigger the menu, and even set up the Off-canvas menu to show for only small devices with the Top-bar component for larger devices.

These are just a few examples of the many new or tweaked Foundation 6 components. To check out more, you can reference the official Foundation 6 documentation on their site.

But most importantly, next time you’re shopping for cheese but you aren’t sure which kind to buy, just ponder upon these few Foundation components with their cheese sidekicks. After a little brainstorming on how these components are utilized, you’ll be able to pick the perfect cheese match to incorporate in your meal!

What other ways have you compared frameworks to relatable life objects? I’d love to hear from you!

Revel with us! We may be able to help with your next projectOr, apply to join a great team.

More Posts by Brittany Gay: