---
layout: default
title: Brick Work
description: BrickWork is a reponsive jQuery plugin to create Dynamic layouts
---
<style type="text/css">
	.hero{
		text-align: center;
	}
</style>

  <div class='page-header hero'>
    <img width="300px" src="http://picpil.s3.amazonaws.com/pictures/thumbnail/thumbs/37a04d383dab4ba784b12580fce5069d139736690819.jpg">
    <h1>{{page.title}}</h1>
    <p>{{page.description}}</p>
      <a class="btn btn-primary btn-lg" href="https://raw.githubusercontent.com/iraycd/brickwork/master/brickwork.min.js" target="_blank"> <i class="fa fa-download"></i> Download - 15KB</a>

  <a class="btn btn-success btn-lg" href="https://raw.githubusercontent.com/iraycd/brickwork/master/brickwork.js" target="_blank"><i class="fa fa-download"></i> Complete - 45KB</a>
  
  <a class="btn btn-default btn-lg" href="https://github.com/iraycd/brickwork"><i class="fa fa-github"></i>  Contribute</a>

  <article class="markdown-body entry-content" itemprop="mainContentOfPage">
  </div>




<p>BrickWork is a reponsive jQuery plugin to create Dynamic layouts. The main goal is to create the best and most customizable dynamic layouts plugins. When uglifid the code is <code>15KB</code>.</p>

<p>It's has been forked from <a href="https://github.com/kombai/freewall">Freewall - Version 1.0.4</a></p>

<p>This framework has been created keeping developers in the mind. The only requirement is <code>jQuery/Zepto</code></p>

<h2>
<a name="user-content-supports" class="anchor" href="#supports"><span class="octicon octicon-link"></span></a>Supports</h2>

<p>BrickWork supports almost all the browsers.</p>

<ul>
<li>Chrome </li>
<li>Opera</li>
<li>Safari</li>
<li>IE 8.0+</li>
<li>Firefox</li>
</ul><h2>
<a name="user-content-developers" class="anchor" href="#developers"><span class="octicon octicon-link"></span></a>Developers</h2>

<h3>
<a name="user-content-installation-for-development" class="anchor" href="#installation-for-development"><span class="octicon octicon-link"></span></a>Installation for development</h3>

<p>First we have to the requirements.</p>

<h4>
<a name="user-content-requirements" class="anchor" href="#requirements"><span class="octicon octicon-link"></span></a>Requirements</h4>

<ul>
<li>
<strong>Node</strong> - First thing you need to have is Node and NPM on you computer.</li>
<li>
<strong>Gulp</strong> - Install Gulp <code>npm install gulp -g</code>
</li>
<li>
<strong><code>npm install</code></strong> to install the project requirements.</li>
</ul><p>I have used <code>gulp-rigger</code> to organize the code. <code>src</code> is the directory where the entire code is written. <code>src/brickwork.js</code> is main file which is compiled as <code>brickwork.js</code> and <code>brickwork.min.js</code></p>

<h3>
<a name="user-content-running-the-code" class="anchor" href="#running-the-code"><span class="octicon octicon-link"></span></a>Running the code</h3>

<p>After the installation of the requirement you just need and when you have completed your changes you just need to follow.</p>

<ul>
<li>Run <code>gulp rig</code> to make to compile the code to <code>brickwork.js</code>
</li>
<li>Run <code>gulp uglify</code> to make both <code>brickwork.js</code> and <code>brickwork.js</code>
</li>
</ul><h2>
<a name="user-content-license" class="anchor" href="#license"><span class="octicon octicon-link"></span></a>License</h2>

<p>Released under the MIT license</p></article>