1. Download Foundation CSS (recommend selecting customize foundation css). This download will provide all css and javascript files necessary for foundation frameworks to work. To apply create a responsive layout website using foundation, you will need to include all files provided by zurb.
2. To assemble a responsive layout website using foundation, create a new html document, and replace doctype tag with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. After doctype tag, delete existing opening <html> tag, and insert following code below. This is required for responsive layout to work with Internet Explorer
<!-- 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 xmlns="http://www.w3.org/1999/xhtml" class="no-js" lang="en"> <!--<![endif]-->
4. Add following code inside <head> tag. This is required for responsive layout to adjust in size for mobile devices
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
5. Insert the following code inside head tag. This will attach Foundation supported stylesheets (css files must be placed in folder called "stylesheets")
<!-- Included CSS Files, use foundation.css if you do not want minified code -->
<link rel="stylesheet" href="stylesheets/foundation.css">
<link rel="stylesheet" href="stylesheets/app.css">
<!-- Custom Modernizr for Foundation -->
<script src="javascripts/foundation/modernizr.foundation.js"></script>
6. Insert following javascript code before closing </body>
<!-- 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>
<!-- Attach Orbitz Plugins -->
<!--this script function will trigger the slideshow to activate-->
<script>
$(window).load(function(){
$("#featured").orbit();
$('#featuredContent').orbit({ fluid: '16x6' });
});
</script>
<!-- attaches javascript file that controls slideshow settings -->
<script src="javascripts/jquery.foundation.orbit.js"></script>
7. Explore the following resources to find code examples to integrate Foundation's grid structure, button styles, javascript add ons.
Additional Foundation Basic Setup
Foundation Components (set up grid, type styles, buttons, drop down nav, etc)
Foundation Javascripts (Orbit - slideshow)
Foundation Framework Forum (find answers to FAQ issues)
Orbit Extras
*To hide Orbit timer, add the follow CSS rule in the app.css. This will keep the slideshow self running, but will hide visibility of the timer interface
.orbit-wrapper .timer { visibility: hidden; }
*To hide and show navigation buttons (< >) on hover, add the follow CSS rule in the app.css.
.orbit-wrapper .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; -o-transition: opacity 400ms; transition: opacity 400ms; }
.orbit-wrapper:hover .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
No comments:
Post a Comment