20 Great Websites built with Foundation Framework

For the last year and maybe some more Internet is buzzing about Bootstrap and it seems that almost everyone builds websites with it. Personally, I think that Bootstrap is an amazing framework with lots of features and elements but somehow it did not become my favourite. I love the fact that it is very easy to use and things work almost smoothly. What I do not like is that it a bit complicated when it comes to using different jQuery plugins as it is sometimes impossible to do so which in my opinion is a drawback. And also I can always recognize when a site was built with Bootstrap which makes the web a bit dull.

I am not going to bitch about Bootstrap if that’s what you think. I do like it but maybe designers should be a bit more creative when it comes to the look and feel of the websites and try to differ from one another. Especially, when it comes to template building for Themeforest and Wrapbootstrap.

I would like to share some amazing websites done with Foundation Framework. I was not familiar with it until recently when I had to build a huge website using it and I can tell you straight away that it is just wonderful. It is very easy to use, the styles can be changed quickly and it is not jQuery overloaded as some other frameworks. It’s lightweight which means fast, mobile-first and external jQuery plugins work smoothly. Foundation 5 is a dream come true for designers and developers.

The last version is a pleasant surprise as it has been developed not only with the user-and-device on mind but also with the developer/designer. It is really faster to learn and code.  The responsive menu is amazing when it comes to functionality and it is very easy to be styled via css.

All in all, I would strongly recommend to try Foundation and to see it yourself how amazing it is. I assume that the above stated pros are the reasons why some of most amazing companies are using Foundation as framework. Here is a list of 20 examples of websites build with it.

Cambridge University Press

Cambridge University Press

Author: Cambridge University  |  Source: http://www.cambridge.org/academic

Institution websites are among the most complex to design, and sometimes the most entrenched against redesign. Although not all departments are mobile-friendly, certainly parts — notably the home page — do a good job filling the needs of university, current students, prospective students, and alumni. It’s a sort of responsive user design, or design for people.


Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

Red Ink Entertainment

redink entertainment

Author: AizuddinSabtu  |  Source: http://redinkent.com/

Go bold. Go loud. Go responsive. From top to bottom, this event website knows its audience isn’t about clean and simple. But tapping through the site is a breeze on many device.




Author: Fixate  |  Source: http://fixate.it/

How far can you push SVG? This site shows one way to embrace SVG for responsive web design. There’s no shortage of ornamentation, yet the message is clear: This is an agency of creative illustration. If you’re a client looking for conventional ideas and staid product design, look elsewhere.


Official HTC Store (UK)


Author: HTC  |  Source: http://www.officialhtcstore.com/uk/p_htc_store.aspx

The art of letting people shop on their smartphones is a developing field. This HTC site pulls it off with a straightforward product view that shows how seriously they take mobile surfing. After all, they sell the medium on which the site might be used: smartphones.


Design for Good

Design for Good

Author: AIGA Birmingham  |  Source: http://designforgoodbham.com

Each section of this single-page site has a definite hierarchy, all of which work together to create a coherent whole. Not easy to pull off with such varied imagery and text.


Up Magazine

UP Magazine

Author: 262MEDIA  |  Source: http://upmagazine-tap.com/

Reminiscent of a magazine aimed at type-savvy designers, Up’s website encourages users to explore. They have to. The site’s dynamic interface is laced with JavaScript and courageous UX decisions.




Author: Adioso  |  Source: http://adioso.com/

Adioso is more than great responsive design — it’s a great user experience. Users can type plain English on any device to get results fast. The site eschews plain ol’ navigation for search parameters, in a clear, easy-to-tap interface.


2013 Canvas Conference

2013 Canvas Conference

Author: 383 Project  |  Source: http://2013.canvasconf.co.uk

Appropriately, the stand back and you’ll see the site looks like an invitation envelope. Subjectively, we liked its “minty” color scheme. Finally, the conference’s website had a coherent look, a good visual hierarchy and a good, consistent use of its own branding.


Paul Rand, American Modernist (1914-1996)

Paul Rand

Author: Daniel Lewandowski  |  Source: http://www.paul-rand.com/

When Daniel Lewandowski couldn’t find a unified reference for the works of graphic designer Paul Rand, he decided to build his own. Lewandowski, a former senior creative engineer for an Atlanta-based brand agency, began working with responsive web design around 2011. The site’s structure doesn’t need to parade its responsive nature. Lewandowski’s design presents its subject matter well at any size. We’d like to think Rand would have agreed.


Responsive Design Weekly

Responsive Design Weekly

Author: Responsive Design Weekly  |  Source: http://responsivedesignweekly.com/

The newsletter is all about providing readers with the latest news, articles, tools and techniques around responsive design. They’ve also recently introduced an interview series to hear advice from the best and brightest in the industry.




Author: Formstack  |  Source: http://www.formstack.com/

Though mobile traffic has stayed relatively low to their site, the people over at online form builder Formstack wanted to match the responsiveness of their forms in addition to giving their mobile visitors a better experience. It was important for the company to go responsive with the new site because of this. Using a responsive framework made the job simple so that they could focus more effort on the look and feel of the website. The entire site was basically redesigned and the Features page received a heavy facelift, as well. You can now smoothly browse through the most important features from any type of device.



Design Plus

Author: DesignPlus  |  Source: http://designplus.co/

Custom design studio DesignPlus enjoys having cool stuff in their toolset and learning something new every day. Going responsive was a no-brainer. Their snazzy site uses Initializr and also uses the Retina.js script, along with an assortment of media queries. Some scripts and styles were hand-written in custom CMS for implementation of jQuery UI + jQuery Grid Plugin – jqGrid.


Pixar Projection

Pixar Projection

Author: George Penston  |  Source: http://projection.pixar.com/

Pixar provides a destination for technicians and projectionists to ensure their films are presented with the best possible quality. The Pixar Projection site has been around since the release of The Incredibles, but Pixar wanted to bring it into the present day to ensure accessibility for everyone—regardless if they used a desktop or touch device. The new site is completely responsive, including the top navigation bar and the contest form.


The UX Department

UX Department

Author: The UX Department  |  Source: http://theuxdepartment.com/en/

Being a UX design agency, The UX Department wanted to ensure their site would look good and behave properly, regardless of the device you’re using to browse. The site was built with a framework that incorporates Saas and has a flexible grid system. The UX Department also utilized the visibility classes and modular scale for typography.


Herschel Supply

Herschel Supply

Author: Herschel Supply  |  Source: http://www.herschelsupply.com

This site strikes a balance between simple and simplistic: The images and text speak for themselves. Enough said.


Laboratorio Digital

Laboratorio Digital

Author: Laboratorio Digital  |  Source: http://ldmedia.com.mx/

Laboratorio Digital combines strong colors and scroll-based visual effects with a concise message.


Jacqueline West, Author

Jacqueline West

Author: Jacqueline West  |  Source: http://www.jacquelinewest.com/

When award-winning children’s author Jacqueline West needed a new website, it was her husband, Ryan, to the rescue. With so many kids turning to their mobile devices for book reading, it only made sense to go responsive.


National Geographic Education

National Geographic Education

Author: The Workshop  |  Source: http://globalcloset.education.nationalgeographic.com/

The site was built with children, parents and teachers in mind. It is fully interactive and responsive, allowing users to discover and map which countries every day items come from. Interaction on mobile and tablet devices is huge with kids so building an educational site with a responsive framework only made sense.


Burger Revolution

Berger Revolution

Author: They Integrated, Inc.  |  Source: http://burgerrevolution.ca/

Not only does the site fare well from a desktop view, it also manipulates beautifully within a mobile browser. All tabs stack comfortably on top of one another, making it beyond easy to read through the menu, find their location or even just read up on their manifesto. Ryan Blaind, designer at They Integrated, Inc., really wanted to capture the essence of the business on a mobile platform without compromising important elements of the website. Which is exactly what he did.


CASH Music

Cash Music

Author: CASH Music  |  Source: http://cashmusic.org/

CASH Music is a nonprofit organization building open source tools for musicians to use in promoting, selling, and distributing their work. Built directly with musicians, the CASH Music platform aims to help build sustainable careers for artists and provide building blocks for digital innovators.


Credit: http://foundation.zurb.com/

You may also like...

1 Response

Leave a Reply

Your email address will not be published. Required fields are marked *