ABOUT

uSquare is a responsive squared grid that can display your content in a unique and interesting way. You can use it for displaying team members, products, services, designs, blog posts or anything else that comes to your mind. In our live preview we have included 3 modifications of the original file in order for you to see how uSquare can serve your purpose.

While we developed uSquare responsive grid plugin we carefully thought about its responsive layout. We wanted to make sure that all elements are visible and accessible with all resolutions for responsive layout.

Calling

All you need to do is call:

$('.usquare_module_wrapper').uSquare();

HTML formating

Elements need to be wrapped like this:

<div class="usquare_module_wrapper">
  <div class="usquare_module_shade"></div>
    
    <!-- block 1 -->
    <div class="usquare_block">
       <img src="content/5.jpg" class="usquare_square" />
       <div class="usquare_square usquare_square_bg1">
         <div class="usquare_square_text_wrapper">
            <img src="images/arrow.png" class="usquare_arrow" alt="arrow" />
            <div class="clear"></div>
            <h2>JOHN DOE</h2>
            <span>graphic designer / illustrator</span>
         </div>
	</div>
	
    <div class="usquare_block_extended usquare_square_bg1">
      <a href="" class="close"><img src="images/close.png" alt="close"/></a>

      <ul class="social_background">
        <li><a href=""><img src="images/social-fb.png" alt="social" /></a></li>
        <li><a href=""><img src="images/social-tw.png" alt="social" /></a></li>
        <li><a href=""><img src="images/social-in.png" alt="social" /></a></li>
        <li><a href=""><img src="images/social-pint.png" alt="social" /></a></li>
        <li><a href=""><img src="images/social-yah.png" alt="social" /></a></li>
        <li><a href=""><img src="images/social-dig.png" alt="social" /></a></li>
      </ul>

      <div class="clear"></div>
      <span class="bold">info:</span>
      <div class="usquare_about">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. </div>
    </div>
	
	
	
    </div>
	
    <!-- block 2 -->
    <div class="usquare_block">
    .
    .
    .
    </div>
	
  </div>
</div>

* Wrapper class.
* Block image.
* This can be any content you like.
* Color class (to get gradient coloring change number 1 to 2,3,4...)
* Your social icons, or some other relevant icons.

Parameters

You can modify uSquare by using optional parameters argument:

$('.usquare_module_wrapper').uSquare({
  name : value
});

List of available parameters:

Name	Default	Description
opening_speed	300	Animation speed at which items open
closing_speed	500	Animation speed at which items close
easing	'swing'	jQuery.easing effects for animations
before_item_opening_callback	null	function called whend item is preparing to open (on mouse click)
before_info_rolling_callback	null	function called while item is opening (when animation starts)
after_info_rolling_callback	null	function called when item opens (at the end of all animations)

Requirements

Required: jQuery 1.3+ (included)
Required: jQuery Ui (included)
Required: jQuery Mousewheel (included)
Required: jQuery Custom Scrollbar (included)

Extra: Use jQuery Easing for additional easing options. (included)
Extra: Use jQuery jcarousel for image slider. (included)