Foundation 5 Resources

I have used Bootstrap a couple of times in the past for my site, it is a good framework and easy to use, however, I switched to Foundation because it has more features, and is more logical for me. I think if you try it, you also will like.

Foundation History

Foundation has its origins in the ZURB style guide which they used on all their client projects. They decided a framework was needed that allowed them to prototype rapidly. They took their global CSS, jQuery plugins, common elements and best practices, and whipped them into what became Foundation, which was first released in 2011, now Foundation 5. You can read more about it on their site.

Why did they make it free?

According to thier site: “We made Foundation free because we love what we do — help people design better products. We use it for every project we do, whether it’s a client project or an internal one. And if it helps us do what we do, then it certainly can help others as well. In fact, we’ve got thousands and thousands of fans across the globe who get a lot out of using Foundation ”. Read more on their site: 11 Things You Didn’t Know About Foundation, it’ is a fun site to visit.

Getting Started

To get started watch the video below, it is on Foundation 4, but the principles still hold true.

After you have watched the video had over to and download Foundation.

Orbit Does Not Auto-play in Win Chrome

View original post on Zurb

<ul id="featured1" data-orbit data-options="pause_on_hover:false; timer_speed:5000;">

Make Foundation 5 Work in IE 8

Place this code in your header. View original article on Zurb.

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

Then to fix the rem issue, just add a link to this polyfill js file at the bottom of your body tag: Get .js from Github »

More Resources to Help with Foundation 5

Books and Links

  • Foundation 5 Resources
  • Foundation Tools
  • jQuery
  • CSS3
  • HTML5
  • Sitepoint

What is it?

Foundation is one of the most widely-used responsive frameworks currently available for designers to use free! It is a fully responsive flexible grid system framework with Semantic code, it uses a mobile first approach to coding so it will work across all devices. You can rapidly build sites without having to build the frame yourself. The wonderful people at Zurb already did it for us.

Why use it?

  • HTML5 is the new standard
  • Modern and clean
  • Faster and cheaper
  • Supports mobile devices
  • You can do things now that in the past were not possible — functionalities in combination with CSS3
  • Everybody is now on the same page

What do you get?

  • Structure and function
  • Easy to implement the grid system and responsive design

It’s pure joy!

Visit my CSS3 page