PSD to Foundation Framework

1
PSD to Foundation
Build your sites for Mobile devices with
Foundation
2
What is Foundation?

• Foundation is a free collection of tools for
  creating websites and web applications. It
  contains HTML and CSS based design templates for
  typography, forms, buttons, navigation and other
  interface components, as well as optional
  Javascript extensions. It is the 12th most
  popular project in all of GitHub.
• You must be taking care of many things while
  converting from psd to foundation. PSD must be
  sliced to Foundation with load speed optimized
  and hand coded, tableless, cross browser
  compatible, SEO supported and W3C valid HTML/CSS.

3
Why Foundation?

• Flexible, efficient layout
• Youve probably used a grid framework before we
  think youll like this one. Its a 12-column
  flexible grid that can scale out to an arbitrary
  size (defined by the max-width of the row) thats
  also easily nested, so you can build out
  complicated layouts without creating a lot of
  custom elements. And when the Grid isnt enough
  for your site, it just gets out of the way.
• Mockups dont tell a story. Build a prototype in
  no time
• The difference between a good site and a great
  site is iteration building something, playing
  with it, refining it. In Foundation, weve
  included dozens of styles to help you quickly
  prototype a site multiple button sizes and
  styles, tabs, custom form elements, modal
  dialogs, image sliders and a lot more. All of the
  prototype elements are production-ready code, and
  easy to style up.

4

• Build for the future
• Mobile devices are already eclipsing desktops in
  adoption and internet use thats why Foundation
  was built from the ground up to support any kind
  of device, any size screen, with any resolution.
  You can get going quickly by building once for
  all devices, or you can create a site tailored to
  a specific experience. Weve even included CSS
  styles to hide and show elements on different
  device types, so you can easily turn pieces on
  and off for each experience.
• Built with Sass!
• It is built with Sass and it comes with a big
  shiny Compass gem. This was the biggest drawcard
  about foundation. It is easy to use Compass as it
  takes care of a lot of cross-browser styling
  issues and makes for some really clean HTML.
  Elements are targeted with specificity, mix-ins
  are added, presentation remains separate from
  content.

5

• Lightweight
• Foundation is not just responsive, its actually
  mobile-optimised. First of all it uses Zepto,
  which is a super-lightweight version of jQuery.
  Compare Zeptos 24kb with jQuerys 84kb, this
  will make a big difference when downloading on a
  data network. Another great feature is that
  Foundation gives you fine control over which
  assets you include, allowing you to remove all
  the bells and whistles at the start, then add
  them on as required.
• Cool Plugins
• Foundation is built by Zurb, who if you dont
  know, make some totally kick-ass JavaScript
  plugins. The other two plugins are Joyride and
  Magellan. Joyride takes new visitors on a quick
  tour of your website, this can be enormously
  helpful for introducing the features of a web
  app, and its super-easy to implement.

6
Thank you.