ZURBfoundation is a Web Design Company that have developed on the CSS based Framework which is called the Foundation . It is an another best Web based Framework as like a Twitter's Bootstrap .I have already discuss about Bootstrap Framework in my previous post.
Today I am going to share the tutorials for making responsive website using the Foundation Framework 5. In the internet , there have more than 95% website design and those are not fully responsive (In Case study Report).
Getting Started
Go to the Foundation site and simply download the default or custom CSS package from the Download page.You will receive the .zip file containing the following files.
Download Foundation Framework 5
index.html -
human.txt -
robots.txt-
/ css
foundation.min.css
normalized.css
/ foundation
/ vendor
HTML Markup Sample Page For Foundation
It is sample HTML file for basic setting of the Foundation 5 . You can design the responsive webpage or web application using this Sample HTML file.
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Page Title</title>
<!-- Included CSS Files, use foundation.css if you do not want minified code -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<!-- Custom Modernizr for Foundation -->
<script src="javascripts/foundation/modernizr.foundation.js"></script>
</head>
<body>
<!-- Page Layout HTML here -->
<!-- Latest version of jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- Included JS Files (Unminified) -->
<!-- [JS Files] -->
<!-- We include all the unminified JS as well. Uncomment to use them instead -->
<!-- Included JS Files (Minified) -->
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
</body>
</html>
Breadcrumbs
Breadcrumbs is a powerful navigation system of the website's page as the hierarchical manner .
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li class="unavailable"><a href="#">Gene Splicing</a></li>
<li class="current"><a href="#">Cloning</a></li>
</ul>
Snapshot
The Grid
<div class="row">
<div class="small-2 columns">2 columns</div>
<div class="small-10 columns">10 columns</div>
</div>
<div class="row">
<div class="small-3 columns">3 columns</div>
<div class="small-9 columns">9 columns</div>
</div>
Snapshot
Read more: Starter Bootstrap Framework Guide for Beginner