We can skip the basic explanation. If you’re here, you know what Foundation is. I’m not here to waste your time, so I’m going to get down to it.
With the release of Foundation 6, Zurb is promising lots of new stuff. Let’s take all of this new stuff into the light and see what we’ve got. Here is a review of everything for the sixth edition of Foundation, as straightforward and concentrated as possible.
The Foundation 6 release, AKA “the fun part”
Zurb built up the release of the newest version of Foundation by making everyone wait on the edges of their seat with a two-day countdown. When the day finally arrived, I was amused; the final release was not working. However, the issue was fixed by the next day. The problem was in the “settings.scss” file, where imports were used in the wrong order and the SCSS code was just not compiling. The launch faced other issues, as well, such as a lack of documentation, no migration guide, and 404 errors on the website, among other things.
Read more about the launch and issues in this Reddit thread.
Getting started
Setting up a project and being “ready to go” with Foundation is super easy. In fact it’s so easy, a kid could do it.
To begin, you have several options to choose from:
You can download Foundation here
At the same link, you can create a custom build (this is a good feature, but the addition Togglers that could toggle whole “needed/unneeded” framework components would be beneficial. As it is, you have to click through lots of checkboxes)
You can use command line or even Yeti Launch GUI (Mac only, for now)
Download the items from Github and launch them
What's in the box?
I picked Foundation 6’s “advanced template” option. After I downloaded the template, I simply had to run a few commands, as follows (I already had NodeJS, Gulp and Bower installed):
Npm install
Bower install
Gulp
That's all you need for the big snowman to run. At this point, Foundation 6 just amazed me, but in a good way. If you are a new guy in front-end town, this could be the best experience you can get. It’s a rapid introduction and everything is working perfectly (Foundation dropped Grunt and is using Gulp by default. Gulp is faster and more flexible).
The advanced template has these features:
Libsass-based compilation with CSS minification, auto-prefixing and other small things.
A clean and robust project structure.
Browsersync, which will allow you to automatically sync devices and browsers, simultaneously refreshing them on code changes.
A "Pages” task (based on Panini). I think it should be called “static site generation task”, but the creators of “Foundation” don’t agree. If you are already familiar with tools like Hugo and Jekyll, know that this is similar.
Styleguide generation task (markdown based).
Javascript concat task, which seems outdated to me. In my opinion, using Requirejs, Browserify or Webpack would be more effective. I know that developers just want to keep everything simple and don’t want to bother you with Javascript things, but Javascript loaders/bundlers today are a must-have; there should be no excuses.
Image minification task, based on imagemin, with default settings (it is not very powerful out of the box, but with some tuning, it will get the job done).
That's pretty much everything you need to start a simple project successfully.
Compatibility
Foundation 6 almost has standard compatibility in front-end work, including IE9+ and Android 2.3+. Popular browser support consists of two version from the most recent release.
Sass features
Typically, Sass features will be the most important part when you are debating which front-end framework you should use. If that’s the case, then you will rejoice when you open the Foundation Sass code.
The creators of foundation are using scss-lint recommendations, and if they have to break the rule, an scss-lint marker is added.
Naming is self-explanatory. In most cases, you don’t even need to read any documentation. Sometimes, more namespacing for variable naming is necessary (it is easier to filter colors with IDE variable name autocompletion), as well as more consistency (in some places it is header-color, and then when we are defining size, it is already heading).
Sass maps - life is easier with them
Foundation’s configuration is much easier due to Sass maps.
Do you want to set up project break points?
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px
); Done.
Maybe you want to set-up a heading size, per breakpoint?
$header-sizes: (
small: (
'h1': 24,
'h2': 20,
'h3': 19,
'h4': 18,
'h5': 16,
'h6': 16,
),
medium: (
'h1': 48,
'h2': 40,
'h3': 31,
'h4': 25,
'h5': 20,
'h6': 16,
),
);
You will be able to set up buttons, breakpoints and heading. Everything is super fast and easy. This is a big improvement for writing and reading the code. There’s just one thing I'd point out: maybe global variables could be in the “global” map too?
Grid system
The grid system in Foundation 6 is better than before, but that doesn’t mean the changes are huge. In fact, it’s almost the same. The new features that have arrived, though, do present improvements.
Foundation is now easy to configure; you will already have predefined classes, or you will be able to use sass mixins in a semantic grid. You will also be able to nest different grids inside of each other, but this grid system is not very flexible and it is not the best. I had a chance to try various grid systems - Foundation, Neat and Susy - and I can say that none of them are bad. But, Susy has such properties and settings that will let you code freely and will not limit your code.
All of the previously mentioned grid systems are based on mixins, which returns css properties with defined values or have some “hidden” functions and variables. These can be found from long code investigation and can be deprecated with the next version or update.
The creators of Susy have chosen another way: they are just returning values through functions. They don’t care how you set gutters, whether it be with padding or margin, or whatever. This allows you to use all of your imagination in Sass code and create incredible things.
To make a long story short, the Foundation grid system makes good progress, but Sass-based grid systems are one of the main items in this framework. There are better players available. Admittedly, Susy had performance issues; I even wrote about them here. But this is 2015, using Gulp and compiling Sass with Libsass and Susy fixed the performance issues.
Foundation has a flex-box grid too, but it’s not useful on real projects so I will not review it. You can, however, read the documentation here.
Functions and mixins
Foundation gives us four types of functions and 10 mixins. Mixins and functions are quite standard; you will find nothing special here. You can use a hamburger menu mixin to catch some eyes, a smart-scale which identifies if it is dark or light in color and then darkens or lightens it accordingly and last, but not least: remCalc.
I am a Bourbon fan. As a result, I miss such things like emCalc, animation easings like in jQueryUI, text-ellipsis mixins and other small, but helpful stuff (the kind of stuff that makes my job easier). A shortage of custom easing functions is compensated a little bit by the presence of Motion UI, but it is not as flexible as I’d like to see. It actually has a quite strictly defined effect and property structure.
Helper classes, reset and settings
The inclusion of unit-less line height (lots of people were setting the line-height incorrectly in previous versions of Foundation), the option to normalize, Javascript-less custom select elements, and a lot of other good stuff, make this a good tool. All you need to do is just read all the code here and you will take home something useful. I don’t like using helper classes or already pre-styled components, but they will help you if you are just making a plain product prototype or wireframe.
Panini - not a static site generator, so what is it?
Panini is kind of a static site generator (if you already familiar with Hugo and Jekyll, you should know what I mean). The creators are saying that it is not. That’s fine, but what is it then?
This is my opinion: it is strange that Zurb tries to reinvent the wheel. I’ll save my explanation for the end, but Panini is like Usain Bolt compared to me when it comes to running. Yes, I can run, but I’m not a professional runner. The same can be said with Panini as compared to other components in Foundation. They are doing things, but not as great as other tools. Panini is not bad, but if you compare it with tools like Hugo or Jekyll, you’ll see: if you are in trouble, Panini will not help you much. You may just be implementing simple projects, in that case Panini will suit you. But as a professional, you should be aware: if you have a problem, you have to be prepared and have the suitable tools ready if you want a quick solution.
As an alternative, I like Hugo, mainly because of its speed, but it also has the following functionality:
Pretty URLs
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes
And lots of other good things, which you can find here
So, if you are going to make good stuff, be prepared and have suitable tools in your inventory.
Javascript components, organization & Motion UI
Organization
The first thing that you see is that the Foundation template has a task that just concatenates Javascript files to one without using any Javascript loaders or bundlers, like RequireJS, Browserify or WebPack. One one hand, this is ok. In an easy project, a developer doesn't have to know them and can start immediately. On the other hand, bundlers/Javascript loaders are essential in today's Javascript ecosystem. They are designed not to make things harder, but to help you solve issues and make your job easier.
If you are still concerned about using them, you can read my colleague's article about all of the advantages.
Plugins
Foundation 6 comes with six important plugins:
Abide - This one validates forms. An alternative would be the jQuery validation, which has much more functionality.
Equalizer - This plugin serves to “equalize” div height.
Interchange - A useful plugin used to load resources depending on viewport. Interchange is a good alternative for srcset.
Orbit - After being dropped in Foundation 5, Orbit makes a comeback to Foundation 6. Unfortunately, it doesn’t really have a place. The description states that this is “the slider you want, the slider you need.” But if we will start comparing it with the best sliders, such as slickJs or bxSlider, Orbit is not even in the same solar system. Despite poor functionality, however, it will find its place for wireframes and prototypes.
Reveal - A good solution for modal windows, Reveal has a lot of options, it’s easy to use and easy to configure. However if you want a more customizeable solution, just give this a try: https://github.com/tkirda/modal-box
Here you will find wider variety of events, modal templating, grouping, already integrated things like preloaders and many other features.
Toggler - Simple, but very good and does what it’s supposed to. This can be your best friend when preparing prototypes, or this can even be used on production sites. Pick what you want to toggle and it’s done. Simple, versatile and very useful.
Sticky - Are you implementing sticky header logic for every project with custom logic? I liked sticky as much as Toggler. You can even define custom logic per breakpoint in this plugin, define margins, add bounds for sticking and so on. Sticky is one of the nicest features in Foundation.
Motion UI
Motion UI is a stand-alone library, which is used in Foundation components, like Toggler, Reveal and Orbit. Motion UI has five main types of transitions: slide, fade, hinge, scale and spin. Every transition can be custom edited with Sass mixins.
What I miss here:
The element is hidden and shown using inline styling. This is not a best practice for responsive sites. Using this, sometimes you will have to override styles with an “!important” flag.
There are no integrated easings from jqueryUI, like in Bourbon.
The predefined transitions are not very eye catching (the only useful transitions are slide, fade and scale, but maybe I’m too picky. Check them out here.
What’s missing?
Foundation is missing two things: maturity and concentration. The return of Orbit (do we really need Javascript components in this framework?), a component which is much weaker than its closest competitors, is a negative. Some tools, in particular Panini, look unfinished too.
The framework is not suggesting any solution for spriting or Javascript bundling (and in modern web development, I think that this feature is a must-have). A more flexible grid system would be helpful, too.
Some decisions are really paying off and the framework proposes a lot, but any time you look deeper, you will see shortcomings.
Final thoughts
My opinion on “Foundation” is twofold. Yes, Foundation is one of the best out-of-the-box solutions; It is easy to start project from scratch with it. On the other hand, is it a solution that will help us achieve the best results? I don’t believe so.
I’m not saying that you shouldn't use this framework, but personally I would pick a custom solution. You’ll have better tools for every task; the tools will give you the freedom.
If I were to make a custom solution, I would use this recipe:
Grid system - Susy
Mixins - Bourbon
Static site generator - Hugo (solely because of speed, the capabilities are very similar to Jekyll)
If I were a lonely front-end developer, freelancing on a day-to-day projects made on Bootstrap and Foundation, with no time for big, technical adventures, then I’d choose Foundation. Foundation is also a perfect fit for you if you have very limited time and you need lots of out-of-the-box solutions, for example if you were participating in a Hackathon.
If I were working in a big organization on a project that will be developed over time with a lot of requirements, I’d choose a custom solution. In such a scenario, like working at Devbridge, we look to unite the best tools in the market. No out-of-the-box solutions will work for us.
Regardless, “Foundation” is a really noteworthy product; something worth keeping an eye on.
Are you interested in what our team is using? Check it out here.
Any thoughts? Feel free to comment!