Happy Birthday Foundation: Five Years of Firsts

wrote this on in . Share this Post

Today Foundation turns five years old. What started out as an internal styleguide so our team could build websites faster and easier has transformed into powerful front-end framework that thousands of brands and millions of people use every day. But how did this happen? It wasn't luck. It wasn't being at the right place at the right time. It wasn't chance.

Looking back on the last five years, the reason Foundation has earned the trust and respect of the world's most brilliant designers, developers, brands and companies is simple. Foundation has never been afraid to take the lead, to go against the grain and to be the first. And in doing this, Foundation has pushed the web forward. It's influenced the way people and companies have thought about problems, and made it easier for more people around the world to experience everything the internet has to offer.

This innovation would have not have been possible if it weren't for the efforts of the 880 Foundation contributors, including the Yetinauts, who together with the ZURB team have put in over 12,360 commits and countless hours of their time to make the framework what it is today.

So as we celebrate five years, we'd like to highlight five ways Foundation changed everything:

1. It was the first open source framework to be responsive

Inspired by the work of Ethan Marcotte, Foundation was the first open source framework to be fully responsive. In a time when most people were developing for fixed pixel widths, Foundation's innovative grid system made it easy for designers and developers to dive into responsive web design and learn its concepts. Soon after, other frameworks followed our lead and went responsive as well, increasing the number of responsive sites being built each year. Now, responsive web design is the defacto standard for any brand, company or individual looking to build a site for the modern web. We're thrilled to have helped many designers and developers learn the concepts and best practices of responsive web design through Foundation.

2. It was the first to be semantic

One of the biggest steps forward for the web in the last five years has been the move towards semantic markup with HTML5, allowing for alignment between what people perceive in a web page and what software like a web crawler or text reader can identify. Adoption, however, was slow - especially because to take advantage of frameworks, one had to be using tons of structural and non-semantic css anyway. Foundation's semantic approach with Sass allowed developers to build truly semantic websites and applications while still taking advantage of all the power of a responsive web framework.

3. It was the first to be mobile-first

First coined by our good friend Luke W, Mobile First is an approach the focuses on progressive enhancement by starting with the smallest screens first. With, roughly, 80% of the screen size taken away when you start with mobile first design, you have to think deeply about how to utilize your space and ensure the core values you want to present to users is in the forefront without flooding with superfluous amounts of filler. Then, as you develop for larger screens and devices with more power, you progressively add features and enhance your site. Prior to this approach, developers focused on large screens first, and mobile screens as an afterthought, leading to poor and near unusable performance on devices with smaller screens and less processing power. Foundation helped popularize the mobile first approach and get designers and developers around thinking differently just in time as the mobile internet exploded in popularity.

4. It was the first to be constructed with Sass

The flexibility, power, and extensibility of SCSS are part of what have taken front-end web development from being a 'hack it together' project relegated to junior engineers and amateurs and turned it into a true engineering discipline. By rebuilding with Sass and exposing the build process to everyone, Foundation helped give designers and developers the power to truly make the framework their own, taking it from an immutable 'theme' to be plugged in and layered on top of and into a true customizable framework, ready to create any possible design.

5. It was the first to have accessibility built in

Foundation played a huge role in helping teach designers and developers learn the method sand best practices of responsive web design, and version 6 is doing the same for accessibility. We firmly believe that the web is for everyone, and so every component in Foundation for Sites 6 was rewritten from the ground up to meet accessibility standards and help educate users of Foundation how they could make their websites more a11y friendly. This is new territory for many web developers, and thousands are learning these best practices through using Foundation.

Help Build the Future

We've have a clear vision for Foundation in both the near and long term, and we've put out some roadmaps detailing where we see the frameworks heading. Front-end web development has never been a more exciting place to be. Browser technology is moving rapidly, advanced JavaScript frameworks are enabling more and more complex applications, and design has finally taken its seat as the driver of new product development. All of this creates an incredible landscape where Foundation is more important than ever.

It's incredible to look back over the last five years and see the impact Foundation has had on the industry. It's even cooler to think about all the new 'firsts' Foundation will achieve as we continue to focus on the future.

Learn more about where Foundation's been, where it's going, and how you can get involved:

Check out Foundation's Birthday Page

Building blocks graphic
Foundation Building Blocks: Over 100 Components to Jump Start Your Projects
Screen shot 2017 05 16 at 2.54.30 pm
The New Foundation Docs: Learn Your Way
How Design Insights Transformed Foundation Building Blocks