Azharkamar.com

How to use FlexSlider with HTML5 Boilerplate, Initializr

Tutorials
1 Feb 2012
16 comments

I first came across the HTML5 Boilerplate a few months back; ever since then, I’ve tried to persuade my inner web-standard soul to find the time to mess around with it. And so I did a few weeks back and honestly, I took quite some time to fully comprehend why in wintered hell this HTML5 kitchen-utensil-thing would be useful for my projects. But once I understood the boilerplate’s humongous power, I wanted every website I build from now on, to have its foundation.

Alright. So… I had a web design project in hand at that time, so I started hunting for boilerplate themes and examples online (there weren’t many) and decided to just use the Initializr template, which is also featured in HTML5 Boilerplate. If you go to Initializr, you’ll notice there’s 3 options for you to get your templates. I tried all 3 and I personally found the Responsive one most convenient – Download the Responsive template.

I uploaded the files into my server and did a tiny bit of testing (view demo). The thing that impresses me most is the responsiveness of the template – Using just HTML5 and CSS3, this is probably the best feature of HTML5. Resize your browser to and fro, it’s fun.

Integrating FlexSlider with Initializr

The Initializr template is meant to be a simple one aimed at easing the kickoff to the HTML5 Boilerplate, hence it is free of fancy stuff like image carousels or drop down menus. But I needed a rotating image banner for my home page, so I did some research and found FlexSlider. I tried fitting FlexSlider into the Initializr template and after 30 minutes or so, it was working well!

View the demo and if you love it, download the source!

View Demo Download HTML5 Boilerplate Initializr + FlexSlider

Explanations – The Technical Stuff

As promised, here’s how it was done:

  1. Download FlexSlider here.
  2. I selected only the files I needed and copied them into the H5BP Initializr folder. The files are flexslider.css, jquery.flexslider-min.js, all images, and some codes from demo.html that I will cover below.
  3. The JavaScript onLoad function in the head of demo.html was copied into H5BP’s script.js.
  4. Then copy <div id="container"> and everything within to H5BP’s index.html, right below <div id="main" class="wrapper clearfix">.
  5. Some very minor CSS edits to flexslider.css were done to remove the border, reposition the left and right arrows, and improve the bottom margin of the circle buttons at the bottom.
  6. View the code sheets below for further understanding. The lines highlighted in grey signify those that were added, for FlexSlider to work.

index.html

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[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">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>H5BP Initializr + FlexSlider</title>
	<meta name="description" content="">
	<meta name="author" content="">

	<meta name="viewport" content="width=device-width">

	<link rel="stylesheet" href="css/style.css">

    <!-- FlexSlider -->
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

	<script src="js/libs/modernizr-2.5.2-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

	<div id="header-container">
		<header class="wrapper clearfix">
			<h1 id="title">H5BP Initializr + FlexSlider</h1>
			<nav>
				<ul>
					<li><a href="http://azharkamar.com">Hello</a></li>
					<li><a href="http://azharkamar.com">Azhar Kamar</a></li>
					<li><a href="http://azharkamar.com">Here</a></li>
				</ul>
			</nav>
		</header>
	</div>
	<div id="main-container">
		<div id="main" class="wrapper clearfix">

        <!-- FlexSlider -->
        <div id="container">

		<!--=============================
		Markup for FADE animation
		=================================-->
		<div class="flexslider">
	    <ul class="slides">
	    	<li>
	    		<img src="img/inacup_samoa.jpg" width="1140" />
	    		<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
	    	</li>
	    	<li>
	    		<a href="http://flex.madebymufffin.com"><img src="img/inacup_pumpkin.jpg" width="1140" /></a>
	    		<p class="flex-caption">This image is wrapped in a link!</p>
	    	</li>
	    	<li>
	    		<img src="img/inacup_donut.jpg" width="1140" />
	    	</li>
	    	<li>
	    		<img src="img/inacup_vanilla.jpg" width="1140" />
	    	</li>
	    </ul>
	  </div>

		<!--============================
		Markup for SLIDE animation
		You need to add an extra container element for the overflow: hidden property on the slider

		Update your flexslider() function with the following properties:

		<script type="text/javascript">
			$(window).load(function() {
				$('.flexslider').flexslider({
				  animation: "slide",
				  controlsContainer: ".flex-container"
			  });
			});
		</script>
		=================================
		<div class="flex-container">
			<div class="flexslider">
		    <ul class="slides">
		    	<li>
		    		<img src="demo-stuff/inacup_samoa.jpg" />
		    		<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
		    	</li>
		    	<li>
		    		<a href="#"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
		    		<p class="flex-caption">This image is wrapped in a link!</p>
		    	</li>
		    	<li>
		    		<img src="demo-stuff/inacup_donut.jpg" />
		    	</li>
		    	<li>
		    		<img src="demo-stuff/inacup_vanilla.jpg" />
		    	</li>
		    </ul>
		  </div>
	 	</div>
		==================================-->
	</div>

			<article>
				<header>
					<h1>article header h1</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>
				</header>
				<section>
					<h2>article section h2</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
				</section>
				<section>
					<h2>article section h2</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
				</section>
				<footer>
					<h3>article footer h3</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.</p>
				</footer>
			</article>

			<aside>
				<h3>aside</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
			</aside>

		</div> <!-- #main -->
	</div> <!-- #main-container -->

	<div id="footer-container">
		<footer class="wrapper">
			<h3>footer</h3>
		</footer>
	</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

<!-- FlexSlider -->
<script src="js/jquery.flexslider-min.js"></script>

<script src="js/script.js"></script>

<script>
	var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
	(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
	g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
	s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

</body>
</html>

I believe there are better ways to achieve this so if you do know, please share!
You might also wanna share your sites created using this in the comments section below.

Author - Azhar Kamar
16 Comments Revolving around this Article
  1. 100 Day Loan

    This post will assist the internet visitors for building up new website or even a weblog from start to end.

  2. Camilo

    Azhar. What are you using to show your code in your posts? I am starting a blog and you code example is great!

  3. Hi, I log on to your blogs like every week. Your writing style is witty, keep up the good work!

  4. Super Sonic Payday Loan

    Hey! This is my first comment here so I just wanted to
    give a quick shout out and say I genuinely enjoy
    reading your posts. Can you suggest any other blogs/websites/forums that go
    over the same topics? Appreciate it!

  5. Harry

    I was recommended this web site by my cousin.
    I’m not sure whether this post is written by him as nobody else know such detailed about my difficulty. You’re
    incredible! Thanks!

  6. Lynda

    WOW just what I was looking for. Came here by searching for tutorials

  7. Ian

    I like this slider a lot. I’ve tried to add css3 animated captions to it (works) but I’m a nob at javascript and don’t know how to write a script to trigger the animations when a list item is at a active state. Has anyone else tried this?

  8. Dipesh Parmar

    Hello Azhar, just wanted to congratulate you on a fab tutorial and a great site example! Just started to learn HTML5 et al, so this is a great site to learn from. How do you edit/remove the header shadow, underneath the deep orange border, i cant find any reference to it on the style.css page?

  9. Peter

    Great tutorial! You just spared a whole lot of time. :) Cheers!

  10. yshakh

    thnx a ton , just got my assignment completed.



    Azhar Kamar replied:

    @yshakh, no problem man, a ton of welcomes back to you.

  11. Fortes

    Hey… You guys must read some about mediaQuerys and css3

    Its not html5 doing the cool stuff this time but those other guys

    Great simple and comprehensive post! Tnx for sharing

  12. Mitch

    I used it on innovativepoolsinc.com and its all messed up in IE9. Can you give me some pointers to how I messed it up. Thanks

  13. Muhammad Zeeshan

    can you tell me you’r email address.so that i will send you a pic.
    thanks
    for replay me when
    i resize the window in internet explore 8 image does not resize.
    please check it in internet explore 8 with window resize you see what i am talking about
    Best Regards,
    Zee

  14. Muhammad Zeeshan

    hi
    in i.e8 there is a bug in image.
    please tell me how can i fixed in internet explore 8
    Thanks,
    Best Regards,
    zee



    Azhar Kamar replied:

    @Muhammad Zeeshan, I’ve tested this in IE8 and it works fine. Can you tell me exactly what’s the issue?

Write a Comment! NOW! :)