So, we've been busy.
We are excited, thrilled, ecstatic and more than a little exhausted to announce that Foundation 3, a massive update to our open-source framework, is available right now. This is the culmination of months of work from the entire ZURB team (as well as numerous contributors and luminaries) and we're very, very proud of it. We hope you like it. Let's see what's new.
Developed in Sass — Streamlined and Customizable
One of the biggest changes for Foundation 3 was that we've shifted development of the framework to Sass (SCSS) and Compass rather than pure CSS. We took our time arriving at this approach, evaluating the different preprocessors out there. In the end, we determined that Sass provided the most robust tool for our development.
Sass provides us with variables, functions and powerful mixins that really speed up our development of the framework, as well as make the code much more concise. We also worked with Chris Eppstein, the author of Compass, to ensure our implementation of Sass and Compass was top-notch.
This doesn't mean you need to know Sass — we like it, and we find it very useful. Thanks to Sass we can actually make your life without Sass even easier. By hooking our Foundation download page to the Sass settings file, we can provide the same customization options enjoyed by Sass / Compass users to users who want a custom download. You can now specify how many columns you want, the gutter size, the row width, major colors, font size, as well as whether you want all of the plugins and CSS files, or just a limited set.
Sass and Compass have proven pretty handy for us, and we think you'll like them too. If you'd rather not, we're happy we can hook you up with a default and custom downloads of straight CSS.
Freakishly Advanced
Foundation 2 broke new ground as a responsive framework, but the ecosystem of front-end tools has advanced since then and we're not content to just hang out in the pack. Foundation 3 is cutting-edge, pulling in some of the best, newest approaches to front-end Web development so that you're armed for a rapidly evolving future online.
We're using box-sizing: border-box on the entire framework, meaning padding and sizing is much simpler and more flexible. The framework core uses no images at all, relying entirely on resolution-independent elements like CSS shapes or unicode. (To be fair, Orbit still has some included images. We'll get there.) And so on.
Advanced CSS is one thing, but we also wanted to push the envelope in Sass. We're using a modular scale for our typography, so all of the font sizes and spaces are calculated to come together beautifully based on core sizes and the golden ratio — and you can modify those base sizes in the customizer, if you prefer not to use Sass. We're also using Sass' invisible classes to streamline our development, along with some other new features — this is actually why Foundation development requires the pre-release version of Sass.
Foundation 3 is also now right at the forefront of Web development best practices, with an included semantic grid system. If the presentational nature of CSS-based grid systems gets you down and you want to remove all those columns and rows from your markup, we've got you covered with a very robust set of Sass mixins to attach row and column styles to any element you choose.
Still the Foundation You Know and Love
With all of the changes (and there are many, many changes) Foundation itself should feel right at home to you. The major syntax is unchanged, and the elements you've used before are all in place (just with new, sexy friends). We've put together a migration guide if you want to upgrade an existing Foundation 2 site to Foundation 3 — you'll see that some things in the markup have changed, but many have stayed the same.
At ZURB, we use Foundation every day. Our properties are all developed in it, including ZURB.com, and we develop our clients' sites and apps in it almost exclusively. That's how you know Foundation works, and that we stand behind it — we need it to do our jobs. Ramping up on Foundation 3 will be quick work for you if you're familiar with Foundation 2, or even if you're not. We want this to not only be advanced and powerful but easy to use.
Available Right Now
Foundation 3 is available right now from foundation.zurb.com and we'd love for you to go download it and check it out. There are installation docs explaining how to use the customizer, as well as how to install via Sass / Compass, if you need more than the default framework.
We're immensely proud of Foundation, and extremely grateful for all of your interest, support and excitement about this release. Foundation is still entirely open source on Github, and we'd love your feedback (or bug reports). Hit us up on Twitter if you have questions or comments, and report any bugs through our Github issues page.
Happy Friday! We're getting a beer. Maybe we'll see you at the launch party tonight?