Recently I discussed extending a framework to increase your output. Here I want to expand upon that idea and let you know what is the best framework for nearly any web project.
It should come as no surprise that I am a proponent of the ZURB Foundation framework. I am a top contributor to the project and have built out countless sites, apps and design systems for a multitude of industries and applications with it.
It is simply the best tool for the job.
I have spoken before about the differences between Bootstrap and Foundation. I have even written an article about why Frameworks (such as Foundation) save your time and money.
Here, I want to dig deeper and talk specifically why ZURB Foundation is such a fantastic tool for Design Systems Engineering.
In Brad Frost’s talk at the Clarity Conference he said something very interesting. He said that frameworks like ZURB Foundation or Bootstrap are design systems for people that build design systems for other people.
This sounds a bit confusing at first, but I think this explanation will help clarify.
Agencies, such as ZURB, often have to create designs for a multitude of different companies and applications. The last time I chatted with ZURB, they were producing about 100 new sites per year. That is a new site about every 3 days!
Now, a lot of agencies might just come up with a design in Photoshop and drop it in the hands of the development team that is responsible to bring it to life.
ZURB is a bit different. They produce a design system for most projects that consists of front-end code which extends ZURB Foundation as well as a coded styleguide.
So, you are extending ZURB Foundation, which itself is a design system into another design system for someone else (the clients).
That might still sound a bit confusing, but I assure you there are some huge benefits.
I am a huge proponent of not reinventing the wheel and I am amazed when I see people approaching the same problems time after time. I pretty much smack my head every time I see teams rebuilding simple elements such as buttons, grid systems and typography.
I simply cannot see any advantage to start from scratch for every project. What a huge amount of wasted time.
Not too long ago I was over at ZURB and chatting with the founder Bryan and he told me that ZURB Foundation is simply the best tool for building web projects for strong visual brands.
I couldn’t agree more.
This is pretty much all they do over at ZURB and it is why the tool exists in the first place.
So, if you have a strong visual brand, ZURB Foundation should be on your short list. If you don’t have a strong visual brand, well that is another story.
The other advantage of starting with ZURB Foundation is that is completely modular, configurable and lean. If you don’t need the grid system or want to try something different, turn it off. If you want to switch out something from Bourbon or Susy go right ahead.
Not only can take a reductive approach and remove components you don’t need. You can also just switch everything off and turn components on one at a time as you decide to use them. This makes it an additive approach.
Furthermore, if you turn off the presentational classes, you are left only with Sass Mixins. These will generate absolutely zero CSS unless you call them directly.
The final major takeaway that I wan to leave you with is it includes tools that allow you to quickly prototype. Specifically tools that generate front-end code as well as a coded styleguide. This is the same exact stack that ZURB has been using for years. They use it on their own client projects. It is battle-tested, robust and super stable.
In addition to the main benefits outlined above there are a few other benefits that are worth mentioning quickly.
First you can lean on the documentation of the framework. Why would you spend time writing documentation on simple things like buttons or a grid system.
Huge waste of time.
Secondly there is an official education and certification process. Key members on your team can get up to speed and maintain a consistent level at no time.
Third there is commercial support options available. Unlike other open source frameworks with often go dormant you have a direct way to get access to the core team.
Finally, it is constantly being cross browser tested, expanded, and it works out of the box with pretty much anything.
These are just some of the reasons why I have found ZURB Foundation to be a fantastic tool for building out front-end code. Many of these reasons also make it an ideal way to create Design Systems for your projects.
