Folder & file structure

Rebound's structure of the source folder is the following:

  • css
    • Containing the Bootstrap, Font Awesome & Rebound style css & less files.
  • font
    • Containing the Font Awesome files.
  • fonts
    • Containing the default Bootstrap glyph icon files.
  • img
  • js

CSS stylesheets

Rebound is built with the Twitter Bootstrap (v3.1.1) framework. It also uses the Font Awesome css framework (v4.0.3) & the custom built Rebound css file (built using the LESS CSS framework).

CSS folder consists of:

  • bootstrap.css
  • bootstrap.min.css
  • bootstrap-theme.css
  • bootstrap-theme.min.css
  • font-awesome.css
  • font-awesome.min.css
  • font-awesome-ie7.css
  • font-awesome-ie7.min.css
  • style.less
  • style.css

Javascript files

Contains all of the Bootstrap, isotope, & custom Rebound javascript files.

  • bootstrap.js
  • bootstrap.min.js
  • custom_checkbox_and_radio.js
  • custom_radio.js
  • html5.js
  • jquery.isotope.min.js
  • rebound.js

HTML markup & structure

Rebound is built with the markup used by the Twitter Bootstrap 3 framework. The basic structure is as follows:

                  <div class="wrapper">
                    <div class="row">
                      <div class="col-md-3 sidebar">
                        <div class="navbar" role="navigation">
                          Branding and Navigation 
                        </div><!-- end navbar -->
                      </div><!-- end col -->
                      <div class="col-md-9 content">
                      </div><!-- end col -->
                    </div><!-- end row -->
                  </div><!-- end wrapper -->
                  <footer class="hidden-xs">
                    Footer Content


Rebound uses the Font Awesome iconic font. Font Awesome gives you scalable vector icons that can instantly be customised — size, colour, drop shadow, and anything that can be done with the power of CSS.

Inline icon

                <p><i class="fa fa-camera-retro"></i></p>

Larger icons





                <p><i class="fa fa-camera-retro fa-large"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>

Bulleted lists

  • Bulleted lists (like this one)
  • Buttons
  • Button groups
  • Navigation
  • Prepended form inputs
  • …and many more with custom CSS
                  <ul class="fa-ul">
                    <li><i class="fa fa-li fa-list-ul"></i>Bulleted lists (like this one)</li>
                    <li><i class="fa fa-li fa-times"></i>Buttons</li>
                    <li><i class="fa fa-li fa-file-text"></i>Button groups</li>
                    <li><i class="fa fa-li fa-facebook"></i>Navigation</li>
                    <li><i class="fa fa-li fa-twitter"></i>Prepended form inputs</li>
                    <li><i class="fa fa-li fa-dollar"></i>…and many more with custom CSS</li>

Utility classes

Rebound has a wide range of utility classes you can apply on any element.


.red - red

.blue - blue

.purple - purple

.yellow - yellow

.pink - pink

.green - green

.grey - grey

.white - white

Width - up to 100% or 100px

.width-10pc - 10% width

.width-20 - 20 pixels width

Margin - up to 50px.

.margin-0 .margin-top-10 .margin-right-10 .margin-bottom-10 .margin-left-10

Padding - up to 50px.

.padding-0 .padding-top-10 .padding-right-10 .padding-bottom-10 .padding-left-10

Space - a blank div up to 50px in height.


Clear - an empty div class that can clear floats.



The Blog section uses a similar HTML structure to popular blogging platform WordPress.

Blog posts - uses the article tag.

<article class="post">

Image captions

<p><img src="image.jpg" alt="" /><span class="caption">Your caption goes here.<span class="pull-right">Photo: Me</span></span></p>

Comments - uses a similar structure to WordPress's comment system.

                <div id="comments">
                  <h3 class="comments-title">5 Comments</h3>
                  <ol class="commentlist">
                    <li class="comment even thread-even depth-1" id="li-comment-2">
                      <div id="comment-2">
                        <img alt="" src="" class="avatar avatar-60 photo" height="60" width="60">                
                          <div class="comment-author vcard">
                            <cite class="fn"><a href="" rel="external nofollow" class="url">To- Author: </a></cite>                   
                          <div class="comment-meta commentmetadata">
                            <a href="#none">September 28, 2012 at 3:31 pm</a> · <a class="comment-reply-link" href="#respond" onclick="return addComment.moveForm("comment-2", "2", "respond", "204")">Reply</a>
                          <div class="comment-body">
                            <p>Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                  <div id="respond">
                    <h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="#respond" style="display:none;">Cancel Reply</a></small></h3>
                    <form method="post" id="commentform">
                      <div class="row">
                        <div class="comment-form-author col-md-8">
                          <label for="author">Name</label> <span class="required">*</span><input id="author" name="author" type="text" class="form-control" value="Tim" size="30" aria-required="true" placeholder="Name">
                      <div class="row">
                        <div class="comment-form-email col-md-8">
                          <label for="email">Email</label> <span class="required">*</span><input id="email" name="email" type="text" class="form-control" value="" size="30" aria-required="true" placeholder="Email Address">
                      <div class="row">
                        <div class="comment-form-url col-md-8">
                          <label for="url">Website</label> <input id="url" name="url" type="text" class="form-control" value="" size="30" placeholder="Website URL">
                      <div class="row">
                        <div class="comment-form-comment">
                          <textarea id="comment" class="form-control" name="comment" cols="45" rows="8" aria-required="true" placeholder="Your Comment"></textarea>
                      <div class="row">
                        <div class="form-submit">
                          <input name="submit" type="submit" id="submit" class="btn btn-lg btn-primary" value="Submit Comment">
                          <input type="hidden" name="comment_post_ID" value="204" id="comment_post_ID">
                          <input type="hidden" name="comment_parent" id="comment_parent" value="0">


Rebound uses the Isotope jQuery plugin to filter the items on the Home page.

Here is an example of the Home page's tag filter markup. The class filter-portfolio which is used for the Isotope jQuery function is marked in red. The custom data filters are marked in blue.

                <ul class="nav navbar-nav filter-portfolio center">
                  <li class="disabled"><a href="#">Filter:</a></li>
                  <li class="active"><a href="#none" data-filter="*">All</a></li>
                  <li><a href="#none" data-filter=".film">Film</a></li>
                  <li><a href="#none" data-filter=".music">Music</a></li>
                  <li><a href="#none" data-filter=".art">Art</a></li>
                  <li><a href="#none" data-filter=".social">Social</a></li>

Here is the required markup, with the custom filter marked in blue.

                <div class="portfolio-wrapper">
                  <div class="card film art">
                    <a href="portfolio-item.html" class="thumb">
                      <img src="img/sample/sintel/sample-sintel-1.jpg" alt="" title="" />
                      <span class="overlay"><span class="fa fa-search"></span></span>
                    <div class="card-body">
                      <h2><a href="portfolio-item.html">Sintel at Seattle International Film Festival</a></h2>
                      <p>The cinema where Sintel screens has digital 4k projection, I’m working with them getting this formatted right and delivered. Would be a real ...</p>
                      <p><a href="portfolio-item.html">Read More</a></p>
                    </div><!-- end card-body -->
                    <div class="card-footer">
                      <ul class="list-inline filters">
                        <li><a href="#none">Film</a></li>
                        <li><a href="#none">Art</a></li>
                    </div><!-- end card-footer -->
                  </div><!-- end card -->
                  <div class="card music social">
                    <a href="portfolio-item.html" class="thumb">
                      <img src="img/sample/elephants-dream/sample-elephants-1.jpg" alt="" title="" />
                      <span class="overlay"><span class="fa fa-search"></span></span>
                    <div class="card-body">
                      <h2><a href="portfolio-item.html">Elephants Dream</a></h2>
                      <p>Elephants Dream is the world’s first open movie, made entirely with open source graphics software such as Blender , and with all production ...</p>
                      <p><a href="portfolio-item.html">Read More</a></p>
                    </div><!-- end card-body -->
                    <div class="card-footer">
                      <ul class="list-inline filters">
                        <li><a href="#none">Music</a></li>
                        <li><a href="#none">Social</a></li>
                    </div><!-- end card-footer -->
                  </div><!-- end card -->
                  <div class="card film social">
                    <a href="portfolio-item.html" class="thumb">
                      <img src="img/sample/big-buck-bunny/sample-bunny-1.png" alt="" title="" />
                      <span class="overlay"><span class="fa fa-search"></span></span>
                    <div class="card-body">
                      <h2><a href="portfolio-item.html">Big Buck Bunny</a></h2>
                      <p>A comedy about a fat rabbit taking revenge on three irritating rodents. The film - in the fastest imaginable 3D computer animation - almost seems...</p>
                      <p><a href="portfolio-item.html">Read More</a></p>
                    </div><!-- end card-body -->
                    <div class="card-footer">
                      <ul class="list-inline filters">
                        <li><a href="#none">Film</a></li>
                        <li><a href="#none">Social</a></li>
                    </div><!-- end card-footer -->
                  </div><!-- end card -->
                </div><!-- end portfolio-wrapper -->

Please note: you must include the Isotope javascript file and function before you close the body tag.

                <script src="js/jquery.isotope.min.js"></script>
                <script type="text/javascript">
                  $(document).ready(function() {
                    var $container = $('.portfolio-wrapper');
                    $container.imagesLoaded( function(){
                        itemSelector : '.card',
                        layoutMode : 'fitRows'
                    // Needed functions
                    var getColWidth = function() {
                      var width,
                      windowWidth = $(window).width();
                      if( windowWidth <= 480 ) {
                        width = Math.floor( $container.width() );
                      } else if( windowWidth <= 768 ) {
                        width = Math.floor( $container.width() );
                      } else {
                        width = Math.floor( 250 );
                      return width;
                    function setWidths() {
                      var colWidth = getColWidth();
                      $container.children().css({ width: colWidth });
                    $(window).smartresize(function() {
                        masonry: {
                          columnWidth: getColWidth()
                    $('.filter-portfolio li a').click(function(){
                      var selector = $(this).attr('data-filter');
                        filter: selector,
                        masonry: {  }
                      return false;
                    // update columnWidth on window resize
                        // update columnWidth to a percentage of container width
                        masonry: {  }

Contact map

To customise the Contact page's Google Map location, simply replace the iframe src with your own organisation's map location.

                <div class="container-wrapper">
                  <div class="google-map">
                    <iframe src="!1m18!1m12!1m3!1d12456.508849538495!2d178.07118605!3d-38.69192205!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d66793d77429fe1%3A0x500ef6143a31480!2sWainui%2C+Gisborne!5e0!3m2!1sen!2s!4v1394940692894" width="720" height="200" frameborder="0"></iframe>

Attribution & licenses

Icons: Font Awesome
Author: Dave Gandy
License: Font Awesome licensed under SIL Open Font License 1.1

Fonts: Google Web Fonts
Lato - Author: Łukasz Dziedzic
Montez - Author: Brian J. Bonislawsky
PT Sans - Author: Paratype
PT Serif - Author: Paratype
License: Google Web Fonts are licensed under SIL Open Font License 1.1

Isotope Commercial License Agreement |

Sintel Images & Text
© copyright Blender Foundation |

Big Buck Bunny Images & Text
© copyright 2008, Blender Foundation /

Elephants Dream Images & Text
© copyright 2006, Blender Foundation / Netherlands Media Art Institute /

Steven Stevenson Resume
© copyright 2009, Kat Neville | safetygoat |

Resume Photo
© copyright 2009, Pukeko Design Studio | Pukeko Design Studio

About Text - Alice In Wonderland
© copyright 1865, Lewis Carroll | Published by Macmillan | Fillerati text generator


Thank you for purchasing Rebound!

If you use Rebound for your next project, please provide me with a link so I can take a look!

Author: Pukeko Design Studio.

© Copyright 2014. All rights reserved.