How the Foundation Framework Pushed the Web Forward over the Last Five Years

One of the most divisive issues in the web design community has been the use of frameworks. Front-end frameworks are collections of HTML, CSS and JavaScript that make up common patterns and components designers and developers can use to greatly speed up the development of websites.

Some view frameworks as a godsend; necessary tools that allow them to crank out great work faster and more consistently. Others are vehemently against them, alleging they contribute to code bloat, cookie cutter website designs, and overall performance lag.

But whether you are for them or against them, their influence on the modern web is undeniable. Frameworks have, and continue, to push the web forward and improve the experience for everyone.

This month marks the fifth birthday of one of the world’s most popular and influential front-end frameworks, ZURB’s Foundation. Thousands of the world’s biggest and most influential brands have built their brands on it, including Vans, Express, Toms, The Washington Post, National Geographic and more. Known as the ‘world’s most advanced front-end framework,’ Foundation has shaped the modern web in four major areas:

Responsive Web Design

While it has become the defacto standard for how modern websites are built, certain facets of Responsive Web Design were hard for designers to understand when they were first put forward by Ethan Marcotte in 2010. As the first fully responsive framework, Foundation’s flexible and easy to use grid helped thousands of designers and developers learn the concepts of responsive design.

Other major frameworks like Bootstrap followed suit, and more sites began being built responsively. That made it easier to get larger companies to buy into responsive design as a viable option. Responsive web design is now seen as the best solution for our multi-device world, and the number of responsive redesigns and retrofits increases each year.

Mobile First Thinking

After seeing the rapid expansion of internet consumption on mobile devices, famed design and usability expert Luke Wroblewski submitted a new approach to web development he coined “Mobile First.”

By designing for the smallest and most limited screens at the start, designers and developers can ensure the core value of their sites were at the forefront, adding extra detail and functionality as they moved out to larger and more powerful devices. Foundation was the first framework to adopt this approach, and this thinking is now generally accepted as best practice in the industry.

Semantic Code

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.

Accessibility

Millions of people around the world face barriers when trying to access content on the web due to a variety of disabilities. In order for them to get the full value out of a website, they rely on them to be designed, developed and edited according to strict accessibility standards.

Just as the industry needed to learn and become comfortable with the concepts of responsive web design, most are still warming up to building with accessibility in mind.

With its version 6 release, the Foundation team worked with some of the world’s foremost experts to rewrite every component to meet these standards. Instructions on how to properly use these components were also included to ensure that every website built on Foundation 6 can be enjoyed anywhere, on any device, by anyone.

By making specific technologies, methods, and techniques available to countless designers and developers and lowering the barrier to entry, front-end frameworks like Foundation have influenced the modern web as a whole.

The debate for and against using them continues to rage on, but it’s hard to deny just how much frameworks have helped make the web better for everyone.

Thanks, and happy 5th birthday Foundation!