Using a Foundation CDN Combination

What is Foundation?

Foundation is a popular frontend framework which allows you to quickly create responsive apps, websites and emails. Made by the product design company, Zurb, Foundation was released in October 2011 as open source. The framework makes it easy to implement various code snippets to enhance the display of your website or app with things like:

• Login forms
• Navigation menus
• Circle pagination
• Image hover effects

It's advanced grid system allows web designers to no longer worry about creating an entire grid from scratch and rather can simply define grid classes within the HTML. It also provides HTML templates which can act as a skeleton to a new web-based project. Furthermore, the foundation framework is quite extensible with various add-ons, tools, CMS themes, etc. which can all be found on the docs page.

Although Foundation easily allows you to create a responsive website, it should not be ignored that ensuring speedy delivery of your Foundation files is very important. Using a Foundation CDN combination to accelerate the delivery of the framework files not only helps by reducing latency but also improves your site's overall user experience.

Foundation vs Bootstrap

Bootstrap is another popular frontend framework which focuses on making it easier to develop responsive web apps. Many similarities exist between both frameworks as they both offer various components, templates, and CMS themes to facilitate easier web-based project creation. A few points of comparison between both frameworks include the following:

• The grid system in both of the frameworks is a major advantage for web designers as it allows you to quickly create a layout for a page which is both visually appealing and responsive. Foundation has historically been ahead of the curve as far as grid systems go and also offers some attractive options in this area such as the block grid.
• The features available for both frameworks certainly share many similarities. There are a few differences however that exists between both, such as Foundation's built-in form validation and ability to rely on media queries to load responsive content that's suitable for different browsers. Bootstrap on the other hand, provides the ability to responsively embed elements like <iframe> and <object> and seems to come with a more polished feature set.
• Many customization options exist with both frontend frameworks, however Foundation tends to focus a bit more on customization options whereas Bootstrap focuses on having a site up and running quickly. Bootstrap also seems to have various themes available to users whereas Foundation's themes selection is somewhat limited. A good place to start for browsing themes for each framework include Wrapbootstrap and the docs page.
• When it comes to community support for each framework, Bootstrap tends to excel. They have been around for a longer period of time and have a larger following of designers and developers within various social networks. This is apparent by taking a look at the stackoverflow activity for both frameworks. The twitter-bootstrap tag has 13k+ followers and 57.9k+ questions asked whereas the zurb-foundation tag contains 800+ followers and 3.6k+ questions

In any case, framework selection primarily comes down to personal preference when deciding one over the other. For a high-level overview of the differences that exists between Bootstrap and Foundation, see Responsive CSS Framework Comparison.

Benefits of a Foundation CDN setup

Foundation can be downloaded and hosted directly on your origin server, however it is more efficient to reference files directly from a Foundation CDN. Using a CDN means that instead of a request going from a visitor's location to your origin server each time, your Foundation files will be cached across several POPs and delivered to the user from the closest one. As distance plays a large role in website load time, this greatly helps reduce the distance between your files and visitors. Using a Foundation CDN combination with KeyCDN also offers additional benefits including:

• HTTP/2 support for even faster delivery of cached content.
• Let's Encrypt support for free custom SSL certificates.
• Origin Shield to help further reduce origin server load.

Integrating your existing website, wether created with a CMS or framework, can be easily achieved via our integration guides. For certain use cases, a Zurb Foundation CDN combination via a Push Zone may also be desirable, which is achieved by uploading your Foundation files to our storage cloud and simply referencing the CDN URL.