Foundation is a free toolkit for building websites and web applications, featuring design templates for typography, forms, buttons, navigation, and more, along with optional JavaScript extensions. It supports responsive layouts, customizable typography based on the golden ratio, and various UI elements, while also offering cross-browser compatibility and SEO-friendly coding through HTMLSlicemate's services. The company provides multiple PSD conversion services and emphasizes manual coding for a quality, pixel-perfect delivery.

1. PSD TO FOUNDATION
Presented by,
HTMLSliceMate
www.htmlslicemate.com

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. Looking for Foundation 3?
• HTMLSliceMate.com 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
http://foundation.zurb.com/download.php or visit the
page at https://github.com/zurb

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. 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. 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. 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. 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. 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. 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. 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. 17. Abide
• Abide is an HTML5 form validation library that
supports the native API by using patterns and
required attributes.

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. • 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. • 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. 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
www.htmlslicemate.com.