Documentation
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:
<body>
<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">
Content
</div><!-- end col -->
</div><!-- end row -->
</div><!-- end wrapper -->
<footer class="hidden-xs">
Footer Content
</footer>
</body>
Icons
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
fa-camera-retro
fa-camera-retro
fa-camera-retro
fa-camera-retro
<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>
</ul>
Utility classes
Rebound has a wide range of utility classes you can apply on any element.
Colours
.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.
.space-10
Clear - an empty div class that can clear floats.
.clear
Blog
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="http://0.gravatar.com/avatar/4f64c9f81bb0d4ee969aaf7b4a5a6f40?s=60&d=&r=G" class="avatar avatar-60 photo" height="60" width="60">
<div>
<div class="comment-author vcard">
<cite class="fn"><a href="http://www.themezilla.com" rel="external nofollow" class="url">To- Author: </a></cite>
</div>
<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>
<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>
</div>
</div>
</li>
</ol>
<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>
</div>
<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="test@gmail.com" size="30" aria-required="true" placeholder="Email Address">
</div>
</div>
<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>
</div>
<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>
</div>
<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">
</div>
</div>
</form>
</div>
</div>
Home
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>
</ul>
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>
</a>
<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>
</ul>
</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>
</a>
<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>
</ul>
</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>
</a>
<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>
</ul>
</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(){
$container.isotope({
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() {
setWidths();
$container.isotope({
masonry: {
columnWidth: getColWidth()
}
});
});
$('.filter-portfolio li a').click(function(){
$('.filter-portfolio li.active').removeClass('active');
$(this).parent('li').addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
masonry: { }
});
return false;
});
// update columnWidth on window resize
$(window).smartresize(function(){
$container.isotope({
// update columnWidth to a percentage of container width
masonry: { }
});
});
});
<script>
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="https://www.google.com/maps/embed?pb=!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>
</div>
</div>
Attribution & licenses
Icons: Font Awesome
Author: Dave Gandy
License: Font Awesome licensed under SIL Open Font License 1.1
http://fortawesome.github.io/Font-Awesome/
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
http://www.google.com/fonts/
Isotope
Isotope Commercial License Agreement | http://isotope.metafizzy.co
Sintel Images & Text
© copyright Blender Foundation | www.sintel.org
Big Buck Bunny Images & Text
© copyright 2008, Blender Foundation / www.bigbuckbunny.org
Elephants Dream Images & Text
© copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
Steven Stevenson Resume
© copyright 2009, Kat Neville | safetygoat | http://www.misterstevenson.com/contest.html
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
Credits
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.