iaBootstrap

IA Item Blocks with items from different packages/plugins

This is how you can create blocks in your *.tpl files when developing templates or plugins/packages.

At vero eos et

posted on October 21

At vero eos et accusam et justo duo dolores et ea rebum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Stet...

<div class="media ia-item ia-item-bordered" id="itemId">
  <div class="pull-left text-center">
    <img src="http://placehold.it/150x150" class="media-object thumbnail">
    <i class="icon-star icon-orange"></i> 
    <i class="icon-star icon-orange"></i> 
    <i class="icon-star icon-orange"></i>
  </div>
	
  <div class="media-body">
    <h3 class="media-heading"><a href="#">At vero eos et</a></h3>
    <p class="ia-item-date">posted on October 21</p>
    <ul class="unstyled">
      <li><i class="icon-link"></i> <a href="http://www.subrion.org" class="url">http://www.subrion.org</a></li>
      <li><i class="icon-signal"></i> Pagerank 4</li>
      <li><i class="icon-globe"></i> Alexa Rank: <a href="#">43006</a></li>
    </ul>
    <div class="ia-item-body">
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Stet...</p>
    </div>
  </div>

  <div class="ia-item-panel">
    <a href="#" class="btn btn-small btn-info pull-left"><i class="icon-info-sign"></i></a>
    <a rel="nofollow" href="#" class="btn btn-small btn-info pull-left" title="Edit"><i class="icon-pencil"></i></a>
    <span class="panel-item pull-left"> <i class="icon-user"></i> <a href="#">Administrator</a></span>
    <span class="panel-item pull-right"><i class="icon-folder-open"></i> <a href="#">Business</a></span>
    <span class="panel-item pull-right"><i class="icon-eye-open"></i> 285 Views</span>
  </div>
</div>

You can easily change appearence of items just by adding or removing content. Here is an example of Blog post:

Hello, World!

Sep 30, 2013

It's my first blog entry!

Hello, World!

Sep 30, 2013

It's my first blog entry!

Hello, World!

Sep 30, 2013

It's my first blog entry!

Administrator 285 Views
<div class="media ia-item">
  <div class="media-body">
    <h5 class="media-heading"><a href="#">Hello, World!</a></h5>
    <p class="ia-item-date">Sep 30, 2013</p>
    <p class="ia-item-body"> It's my first blog entry! </p>
  </div>
</div>
<div class="media ia-item ia-item-bordered">
  <div class="media-body">
    <h5 class="media-heading"><a href="#">Hello, World!</a></h5>
    <p class="ia-item-date">Sep 30, 2013</p>
    <p class="ia-item-body"> It's my first blog entry! </p>
  </div>
</div>
<div class="media ia-item ia-item-bordered">
  <div class="media-body">
    <h5 class="media-heading"><a href="#">Hello, World!</a></h5>
    <p class="ia-item-date">Sep 30, 2013</p>
    <p class="ia-item-body"> It's my first blog entry! </p>
  </div>
  <div class="ia-item-panel">
    <span class="panel-item pull-left"> <i class="icon-user"></i> <a href="#">Administrator</a></span>
    <span class="panel-item pull-right"><i class="icon-eye-open"></i> 285 Views</span>
  </div>
</div>

Newsline

Hands on: Pixelmator for iPad is a valuable tool for artists and photographers

Hands on: Pixelmator for iPad is a valuable tool for artists and photographers

Oct 25, 2014

Now that it’s here — just in time for iOS 8 — we took Pixelmator for iPad for a spin and found it a solid contribution to the slate of image editors for the iPad, and especially useful for those already using Pixelmator on the desktop. With the mobile Pixelmator, available... continue reading

Hipstamatic’s TinType photo effects app harks back to the 1800s

Hipstamatic’s TinType photo effects app harks back to the 1800s

Oct 25, 2014

Sometimes the simplest apps are the most visually powerful, and that’s the case with  TinType , an iPhone app that you imparts a luminous, hand-tinted vintage look to your images. TinType takes about five minutes to learn — if you haven’t had your coffee yet. Launch... continue reading

How the design team behind ‘Destiny’ built their immersive worlds

How the design team behind ‘Destiny’ built their immersive worlds

Oct 25, 2014

If you’re even remotely into video games, you’ve heard of  Destiny . It’s the mega-blockbuster game of the season that’s become a multi-record breaker since its release in September. And now it holds the distinction of being the best-selling new franchise of all... continue reading