PSD to Foundation Framework

PSD to Foundation

www.htmlslicemate.com

Build your sites for Mobile devices with Foundation

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.


Why Foundation?Flexible, efficient layout

You’ve probably used a grid framework before — we think you’ll like this one. It’s a 12-column flexible grid that can scale out to an arbitrary size (defined by the max-width of the row) that’s also easily nested, so you can build out complicated layouts without creating a lot of custom elements. And when the Grid isn’t enough for your site, it just gets out of the way.

Mockups don’t 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, we’ve 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.


Build for the future

Mobile devices are already eclipsing desktops in adoption and internet use — that’s 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. We’ve 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.


Lightweight

Foundation is not just responsive, it’s actually mobile-optimised. First of all it uses Zepto, which is a super-lightweight version of jQuery. Compare Zepto’s 24kb with jQuery’s 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 don’t 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 it’s super-easy to implement.


Thank you.


PSD to Foundation Framework

Documents

Transcript of PSD to Foundation Framework