We're deep in the mountains plugging away at the next iteration of Foundation. Watching it grow into one of the top 15 open source projects in the world has been amazing. Almost daily, we get recurring questions about our framework so we decided to let all of you into the Yeti's lair to learn his secrets. Or what we like to consider the top 11 things you didn't know about Foundation.
1. Why a Yeti?
Every good product needs a mascot. We knew we wanted something wacky and fun to represent the framework, especially since Foundation was open source. The mascot had to be memorable. This was also an opportunity to let go and have a bit of fun. Our designers accepted the challenge and whipped up sketches of a potential mascot. Even our Chief Instigator participated in the initial sketches!
Early sketches of the Yeti.
We whittled down the choices and finally settled on the Yeti. Of course, he's gone through a few variations. We've continued to groom him so that he looks like the sharpest Yeti in the Himalayas. Originally, the Yeti was a bit heavier and 3D, but we've recently gone with a flatter, streamlined version.
The progression of the Yeti Mascot.
2. Why Do You Make Foundation Free?
First, a little backstory. Foundation had its origins in the ZURB style guide, which we used on every client project. Years ago, we decided we needed a framework that allowed us to rapidly prototype. We took our global CSS, jQuery plugins, common elements and best practices, then whipped them into what became Foundation.
The style guide that led to Foundation.
Then something wonderful happened. We saw two things become a thing. A very important thing. One, the open source movement was gaining ... well, momentum. We decided that if our style guide helped us design products faster, it would also help others. The other thing was mobile.
With the onslaught of smartphones, we knew we had to have something more functional and fluid to work on different screens and orientations. It was a no-brainer that the framework had to be responsive to keep us ahead of the curve.
Bootstrap may have come out a month before Foundation, but we actually predate Twitter's framework. That framework and Skeleton both have their origins in our style guide, as both were worked on by ZURB designers.
Enough history. Let's answer the question. :) We made Foundation free because we love what we do — help people design better products. We use it for every project we do, whether it's a client project or an internal one. And if it helps us do what we do, then it certainly can help others as well. In fact, we've got thousands and thousands of fans across the globe who get a lot out of using Foundation. Travel anywhere across the world and you'll likely find at least one person using Foundation.
3. What's the License for Foundation?
Foundation is MIT Licensed and free to use on anything you'd like. You can even fork the framework and make it your own. Take Gumby. Gumby's creators literally forked Foundation, altered a few things and called it their own. And to give people the most freedom to do what they want with the framework, we had to give them a license to do so. Consider it a license to design responsively, Mr. Bond.
4. Can I Use Foundation With [Insert CMS of Choice Here]?
The short answer: yes. You can use it with any CMS. Foundation is basically CSS/SCSS, JavaScript and markup structure that can be used on pretty much any project. Figuring out how to integrate it into whatever system you choose is up to you. After all, we can't be experts at everything. :)
Some clever folks have already done some of the leg work and integrated Foundation with a CMS or two already. There's a Drupal theme by Drew Kennelly. A WordPress one by Drew Morris, among many others. Jake Sharp even did one for Magneto.
5. How Many People Run Foundation?
Like we said, we use Foundation for every project we work on. Fifteen designers and engineers battle test it every day. This gives us great insight into how we should tweak or change things as we move forward. We currently have three people currently actively working on writing the core of Foundation. Although we rope in a few other ZURBians when needed.
6. How Do I Use Multiple Versions of Foundation?
You don't want to use multiple versions on a single project. But we know it happens. After all, we still use Foundation 3 for some of our sites. Even the Foundation 4 marketing site is still built on Foundation 3! We'll update this to the latest version with our launch of 5. If you are using different versions for different projects, we've got you covered. You can easily use a system, such as Bundler, to define a version (with the gem version of Foundation). This lets you compile your CSS against whatever version you'd like. If you're using vanilla CSS, you shouldn't have a problem since you aren't compiling against a gem.
One caveat for those of you upgrading a project with CSS: You'll have to download a new version of Foundation and replace your files directly in your project. We always suggest backing your project up before you upgrade — just in case something breaks.
7. Why Doesn't Foundation Have as Much Styling as Bootstrap?
We purposely left our styles sparse. We didn't want to end up in a world where all the sites looked like Foundation. You can add to our defaults easily without having to undo a bunch of styles baked in. It also helps with integration and alleviates code bloat. But you don't have to take our word for it. Here's what one of our Foundation fans and friends who also helped us with the latest version of the Yeti, Adam Fairhead, has to say about it:
Foundation focuses on being a great framework, so I can focus on being a great developer. By being thorough in its grids and components, but un-opinionated in its presentation, it allows me to work quickly through common elements so I can spend my time building out the custom parts.
Foundation encourages good habits too, by abstracting repeatable elements, such as primary colors and key measurements into Sass variables. This modular setup gives every project a rolling start.
We made our initial jump into SCSS with version 3, which enabled us to let users easily pick and choose what they wanted. They could also customize Foundation without writing any new lines of SCSS. Our reasoning for changing to a pre-processor was simple: We wanted more flexibility and power. As coders who write a lot of CSS, we know what a headache it can be to maintain. SCSS makes this a lot easier with the ability to split things up into partials, mixins, variables, etc., and use them where you need them.
8. Can I Only Use the Grid?
Yep! If you only want the grid, you can select just that using the customizer or you can import the grid in your SCSS project. Some global files will come down as well, but those are minimal and needed for the grid to work properly. This includes things like our global box-sizing:border-box reset.
CSS: You can visit https://foundation.zurb.com/download.php and uncheck "All Foundation Components". Then make sure to check "Grid". This will let you download Foundation and only include the grid.
SCSS: If you want to remove everything but the grid, you can use your app.scss file that comes down with a new project. You'll simply comment out @import "foundation"; and uncomment the globals and the grid components, like so:
We are working on a new grid that will soon be released (like soonish) — Foundation 4.3 — that will have a medium grid for tablets.
9. What the Heck is Zepto or is jQuery Supported?
You can use jQuery or Zepto or both! They're both included by default. Near the closing </body> tag of the document, we include a <script> that looks for compatibility for Zepto first and if a browser doesn't support it (read: IE), then it loads jQuery instead. If you want to force load jQuery and remove Zepto, just delete the file and remove that reference, replacing it with an explicit call to jQuery.
Zepto lets us lighten the code base of Foundation. That's because jQuery has about 9,000 lines of code whereas Zepto has a mere 1,900 lines. This makes it a bit faster to load, which is really important considering we architected Foundation 4 to be mobile-first. The extra load time of jQuery causes sites to feel more sluggish on mobile phones. Tests have shown that certain API calls within the library perform much better than their jQuery counterparts.
10. Can I Contribute to Foundation with [Money/Time/Drugs/Sexual Favors]?
While we would all love some money/time/drugs/sex for working on Foundation, we typically don't take the offers even though Foundation gets Googled 15,000 times a day. The best way for you to contribute is to use the code, find bugs and submit them on Github, where Foundation has reached 12K Stargazers. If you are brave enough, try submitting your own fix through a Pull Request and you'll be listed as one of Foundation's 242 contributors!
Our commit activity over the past year.
If you want to submit a Pull Request:
- Log in to your Github account
- Go to Github: https://github.com/zurb/foundation/pulls
- Click the green "New Pull Request" button
- Now follow these awesome instructions that Github has written: https://help.github.com/articles/using-pull-requests
- Make sure your descriptions and titles are clear, and that you've tested your change and included any documentation changes that need to be made
11. How Do I Trim Down My Files Before Production?
Let's take a look at the CSS first. Figure out which plugins or components you aren't using then download a new version from the customizer that only includes the files you need. Then you can remove any reference to the deleted in your development code.
For SCSS, you can simply @import only the parts of Foundation you need, making it super easy to trim down to the basics. If you don't need a particular plugin, remove its reference in the document and delete the file.
That's it! The 11 things you didn't know about Foundation. We've got some nifty things coming up for Foundation 5 that we can't wait to start sharing with you! If you have any questions, you can reach out to us at [email protected] or you can learn more through our Foundaton training.