Introduction To Foundation Presentation

This is the Introduction To Foundation presentation made at the 7hills Software Developer's Group on August 15th, 2013.

Viewing The Presentation

Just go to: http://saidigital.github.io/intro-to-foundation/

It's best viewed on a desktop due to the responsive examples that I try to embed within the presentation, ironic given that this is a presentation for a responsive framework.

Downloading The Presentation

If you want to view the slides on your machine, you can clone the pre-built slides at the gh-pages branch

You can also get the repo without git here.

Building The Presentation Yourself

Make sure you have node.js installed, and from a terminal run the following from the root of the project directory: npm install && bower install

Then, also from the root of the project directory, start the server: grunt server

You should now be able to access the slides from http://localhost:9000.

Demo Source

Demo source is located in the foundation directory. They are as follows:

• Grid Example
  • foundation/gridexample.html
• Incremental Demo
  • Step 1: foundation/step_01.html
  • Step 2: foundation/step_02.html
  • Step 3: foundation/step_03.html
  • Step 4: foundation/step_04.html
  • Step 5: foundation/step_05.html
  • Step 6: foundation/step_06.html

Resources Mentioned During The Presentation

• ZURB Foundation
• Main site: http://foundation.zurb.com/
• Documentation: http://foundation.zurb.com/docs/
• Responsive Tables With Foundation: http://zurb.com/playground/responsive-tables
• Twitter Bootstrap
  • For latest: http://getbootstrap.com/
  • For latest stable: http://getbootstrap.com/2.3.2/
• Placehold.it, placeholder images for your HTML mockups
  • http://placehold.it/
• Sass
  • http://sass-lang.com/
• Less
• http://lesscss.org/
• Haml
  • http://haml.info/
• Evolus Pencil (For Mockups, free)
  • http://pencil.evolus.vn/
• Balsamiq (For Mockups, not free, but really awesome)
  • http://balsamiq.com/
• Responsive Web Design
  • The article that started it all: http://alistapart.com/article/responsive-web-design
• Skeleton Responsive Framework
  • http://www.getskeleton.com/
• Zepto
  • http://zeptojs.com/