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!

[jbutton color=”black” rounded=”yes” newpage=”1″ link=”http://azharkamar.com/demos/h5bp-initializr-flexslider”]View Demo[/jbutton]

[jbutton color=”green” rounded=”yes” newpage=”1″ link=”http://azharkamar.com/wp-content/plugins/download-monitor/download.php?id=5″]Download HTML5 Boilerplate Initializr + FlexSlider[/jbutton]

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

[php highlight=”18,19,41-102,140,141″ title=”h5bp-initializr-flexslider/index.html” htmlscript=”true”]
<!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>
[/php]

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