Psd to foundation


Published on is still supporting Foundation 3 for those who don't want to take the leap into the future with us.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Psd to foundation

  1. 1. PSD TO FOUNDATION Presented by, HTMLSliceMate
  2. 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.
  3. 3. Looking for Foundation 3? • is still supporting Foundation 3 for those who don't want to take the leap into the future with us. • You can download a package from or visit the page at
  4. 4. Here's what you'll get when you create a project using our Sass version or the default CSS version: 1. The Grid • The grid works on almost any device and has support for nesting, source ordering, offsets and device presentation. It almost makes creating layouts too easy!
  5. 5. 2. Typography • The type is based on a golden ratio modular scale that creates meaningful relationships for the copy on the page. It's easily updated using Scss or our CSS customizer. 3. Buttons •Buttons are a core interactive element of the Web. We've included styles for creating simple marketing CTAs to complex application toolbars.
  6. 6. 4. Navigation • People have to get around. Navigation styles in Foundation include a complex top bar that supports 3-level dropdown navigation for simple bars, sidebars and subnav pills. 5. Forms Built with the Foundation Grid, you can create simple or complicated forms quickly and easily— validation states, custom select, radio buttons and more.
  7. 7. 7. UI Elements • We've also included lots of useful elements like visibility classes (to hide or show things based on screen size or orientation), labels, alerts, tooltips, panels and a lot more. 8. Section Whether it's entire pages or simple tabbed content, Foundation's tabs get the job done. Not only stylish, but interactive out of the box.
  8. 8. 9. Orbit • A powerful image or content slider that works responsively and includes tons of useful options, such as timers, paddles, bullet thumbs and more. 10. Reveal You can easily call modals without writing any JS, even spawn subsequent modals cleanly on the same page. Reveal works across devices.
  9. 9. 11. Clearing • Show off your images in style with our easy to use gallery plugin. It's built with simple unordered lists that can be styled to your hearts content. 12. Magellan A flexible sticky navigation that knows where you are on the page. You just tell it what to recognize and set it off.
  10. 10. 13. Joyride • This plugin lets you give users a tour of your site or app. Joyride is easy to customize using CSS or our SCSS variables. 14. Tooltips Tooltips lets you add quick hover or tap tooltips to elements.
  11. 11. 15. Dropdown • The dropdown plugin makes it easy to attach a popover dropdown to any element on the page. 16. Interchange This plugin lets you load up the appropriate size image based on media queries that you define.
  12. 12. 17. Abide • Abide is an HTML5 form validation library that supports the native API by using patterns and required attributes.
  13. 13. Why HTMLSliceMate? • Cross Browser Compatibility:The PSD to HTML conversion facilities offered by the company support all hottest and most admired browsers such as Firefox, IE7+, Opera, Safari and Chrome. • Seo-Friendly Semantic Coding:We follows semantic coding structure so your mark up is understood by search engines and so your website is always found to be popular on most search engines.
  14. 14. • Manual Coding:We are not generating machine codes but we do 100 % Hand Coded Markup. • Easy Integration with CMS:Our Designs are easily integrated with CMS as per the requirements. • Commented HTML & CSS code:All the designs we do are having a Commented HTML and CSS code.
  15. 15. • JQuery implementation:Jquery implementation will be done to the projects. • Speedy Delivery:We have a detailed and efficient build process in place to deliver your work within a quick turnaround time. • Pixel Perfect:We're big into details and we guarantee that your site will be correct down to the very last detail.
  16. 16. Other Services: • • • • • • • • • PSD to Gumby PSD to Twitter Bootstrap PSD to 960 PSD to HTML/HTML5/CSS/CSS3 PSD to Responsive HTML PSD to Wordpress PSD to Joomla PSD to Drupal PSD to Magento etc.. etc.. For more similar services, please logon to