Boxes
Example
We use boxes to represent blocks on left and right columns as well as in top and bottom positions of main content.
Featured
Subrion CMS
Mar 19, 2013
<div class="box collapsible" id="block_3">
<h4 class="box-caption-movable" id="caption_3">
Featured
</h4>
<div class="box-content collapsible-content" id="content_3">
...
</div>
</div>
Options
You can use modifiers to slightly change appearence of boxes.
Box colors
Add color modifiers to div.box to change overall style of the box. Available modifiers are as follows:
.red.green.yellow.sponsored-box
Featured
Subrion CMS
Mar 19, 2013
Featured
Subrion CMS
Mar 19, 2013
Featured
Subrion CMS
Mar 19, 2013
<div class="box red collapsible" id="block_3">
<h4 class="box-caption-movable" id="caption_3">
Featured
</h4>
<div class="box-content collapsible-content" id="content_3">
...
</div>
</div>
<div class="box green collapsible" id="block_3">
<h4 class="box-caption-movable" id="caption_3">
Featured
</h4>
<div class="box-content collapsible-content" id="content_3">
...
</div>
</div>
<div class="box sponsored-box collapsible" id="block_3">
<h4 class="box-caption-movable" id="caption_3">
Featured
</h4>
<div class="box-content collapsible-content" id="content_3">
...
</div>
</div>
Clearing style
You can add .clear class to div.box for resetting borders and box-shadows. This is useful when placing block on dark backgrounds or just making clear info block with heading
Featured
Subrion CMS
Mar 19, 2013
<div class="box clear collapsible" id="block_3">
<h4 class="box-caption-movable" id="caption_3">
Featured
</h4>
<div class="box-content collapsible-content" id="content_3">
...
</div>
</div>
Items
Example
.ia-item class extends default Bootstrap .media class. You can use it in various ways: displaying listings, news, blog-posts, comments and etc.
Listings example
eSyndicat Directory Script New
Featured
<div class="media ia-item bordered featured active" id="listing-1">
<div class="pull-left image">
<div class="media-object">
image
</div>
</div>
<div class="media-body">
<h4 class="media-heading">
<a href="#" class="countable" id="lnk_1">eSyndicat Directory Script</a>
<span class="label label-important">New</span>
</h4>
<span class="ia-badge featured">Featured</span>
<div class="description">
...
</div>
</div>
<div class="panel clearfix">
<span class="date" title="Added on"><i class="icon-calendar icon-blue"></i> Mar 19, 2013</span>
<span class="clicks"><i class="icon-hand-right icon-blue"></i> Clicks: 0</span>
<span class="rank"><i class="icon-signal icon-blue"></i> PageRank: 5</span>
<div class="toolbar pull-right">
<a href="#" class="js-count" data-id="1" data-item="listings" title="View Listing"><i class="icon-info-sign icon-blue"></i></a>
<a href="#" class="toolbar-toggle"><i class="icon-cog icon-blue"></i></a>
<div class="toolbar-actions">
<a href="#" class="js-report js-tooltip" data-id="1" title="Report Broken Listing" rel="nofollow">
<i class="icon-warning-sign icon-white"></i>
</a>
</div>
</div>
</div>
</div>
Featured block example
This is combination of Box and Item.
Featured
Subrion CMS
Mar 19, 2013
Subrion CMS
Mar 19, 2013
<div class="box green collapsible" id="block_3">
<h4 class="box-caption-movable" id="caption_3">
Featured
</h4>
<div class="box-content collapsible-content" id="content_3">
<div class="media ia-item">
<div class="pull-left image">
<div class="media-object">
<img data-src="holder.js/60x45" alt="">
</div>
</div>
<div class="media-body">
<h5 class="media-heading"><a href="#" class="js-count title" data-item="listings">Subrion CMS</a></h5>
<p class="date">
<i class="icon-calendar icon-gray"></i> Mar 19, 2013
</p>
</div>
<div class="description">
...
</div>
</div>
<hr>
<div class="media ia-item">
<div class="pull-left image">
<div class="media-object">
<img data-src="holder.js/60x45" alt="">
</div>
</div>
<div class="media-body">
<h5 class="media-heading"><a href="#" class="js-count title" data-item="listings">Subrion CMS</a></h5>
<p class="date">
<i class="icon-calendar icon-gray"></i> Mar 19, 2013
</p>
</div>
<div class="description">
...
</div>
</div>
</div>
</div>
News block example
eSyndiCat Directory Script 3.0 Demo!
Mar 4, 2013
<div class="media ia-item">
<div class="media-body">
<h5 class="media-heading"><a href="#">eSyndiCat Directory Script 3.0 Demo!</a></h5>
<p class="date"><i class="icon-calendar"></i>
Mar 4, 2013
</p>
<div class="description">
...
</div>
</div>
</div>
Javascript utilities
There are several JS utilities that enhance our framework.
Tooltip
To create tooltip, add .js-tooltip class on a element
Hello, i'm tooltip.
<p>Hello, i'm <a href="#" title="I'm title" class="js-tooltip">tooltip</a>.</p>
Lightbox effect
There is an easy way to create lightbox effect on single image or on gallery. Add rel="ia_lightbox" attribute to a element that points to big image.
If you want to create lightbox gallery, use identifier — rel="ia_lightbox[mygallery]"
<a href="path/to/big/image" rel="ia_lightbox">
<img src="path/to/small/image" alt="">
</a>