Under 5kb Minified

Full Version Under 10kb

Fully Responsive

Set the Snap Points in the CSS using Media Queries

Android Compatible

Tested with Android Browser, Mobile Chrome, Mobile Firefox...

Highly Customizable

Fewer JS Variables, More CSS Oriented. Style this as you would normally with any other HTML

item
item
item
item
item
Download Brick by Brick JS

Getting Started

1. Add the HTML

The basic HTML markup consists of a container div which needs an ID or Class. The divs within the container will be the items in the layout display. The items don't need a specific class to enable the layout as the class 'b-by-b-item' is automatically added to them when the plugin starts.


<div id="layout">
    <div>item</div>
    <div>item</div>
    <div>item</div>
    <div>item</div>
    <div>item</div>
    <div>item</div>
    <div>item</div>
    <div>item</div>
    <div>item</div>
</div>

2. Add the CSS

Set the Number of Columns at Variable Screen Widths using Media Queries, 100% : 1 Column, 50% : 2 Columns, 33.3% : 3 Columns. This CSS will create a three column layout which will scale down to two and then to one with the screen.


.single-column .b-by-b-item {
  width: 100%!important;
}
@media (min-width: 0px) and (max-width: 480px) {
  #layout .b-by-b-item {
    width: 100%;
  }
}
@media (min-width: 481px) and (max-width: 1024px) {
  #layout .b-by-b-item {
    width: 50%;
  }
}
@media (min-width: 1025px) {
  #layout .b-by-b-item {
    width: 33.33%;
  }
}

Once the plugin initiates, each of the child divs will be given the class 'b-by-b-item'. You will then be able to use this class to style the items within the layout:


#layout .b-by-b-item {
background-color: #ff4500;
}

4. Start the Plugin

The plugin is called on the container selector as in: $(ID or Class).layout();


$('#layout').layout();

There are two options which can be added to the plugin, these both affect the individual items by adding a margin and padding. Both values default at 5px.


$('#layout').layout({
    itemMargin : 5,
    itemPadding : 5
});

Download Brick by Brick JS

Methods

addAfterAppend content to the Brick By Brick layout

addAfter([,content]) Type: jQuery object or HTML String

Append content using an array of jQuery objects (to add existing content) or HTML strings (to add content dynamically).


varexistingElems = [$('#existing1'), $('#existing2')],
     newElems = ['<div id="new-elem">Some content</div>'];

$('#layout').layout( 'addAfter' , existingElems );
$('#layout').layout( 'addAfter' , newElems );

addBeforePrepend content to the Brick By Brick layout

addBefore([,content]) Type: jQuery object or HTML String

Prepend content using an array of jQuery objects (to add existing content) or HTML strings (to add content dynamically).


varexistingElems = [$('#existing1'), $('#existing2')],
     newElems = ['<div id="new-elem">Some content</div>'];

$('#layout').layout( 'addBefore' , existingElems );
$('#layout').layout( 'addBefore' , newElems );

removeItemsRemove content from the Brick by Brick layout and from the DOM

removeItems([,selector], integer) Types: jQuery selector string , integer (default:1000)

Specify items to remove using an array of one or more jQuery selector strings. jQuery objects cannot be used as arguments.

Optionally specify a duration for the fade-out animation.


varelements = ['.remove-items', '#remove-item', 'div[data-attr="Value"]'];

$('#layout').layout( 'removeItems' , elements,  2000 );

hideItemsHide content in the Brick by Brick layout

hideItems([,selector], integer) Types: jQuery selector string , integer (default:1000)

Specify items to hide using an array of one or more jQuery selector strings.

Optionally specify a duration for the fade-out animation.


varelements = ['.hide', '#hide-item', 'div[data-display="hide"]'];

$('#layout').layout( 'hideItems' , elements, 2000 );

showItemsDisplay hidden content in the Brick by Brick layout

showItems([,selector], integer) Types: jQuery selector string ,  integer (default: 1000)

Specify items to display using an array of one or more jQuery selector strings.

Optionally specify a duration for the fade-in animation.


varelements= ['.hidden', '#show-item', 'div[data-display="show"]'];

$('#layout').layout( 'showItems' , elements, 3000 );

endDestroy the Brick by Brick layout

Type: No arguments

Once the end method has been run, the class 'no-grid' will be added to the layout selector. For example the div with the ID 'layout' will have the class 'no-grid' added. This can then be used to style the grid.


$('#end').on('click', function(){
      $('#layout').layout( 'end' );
 });

reloadReinstate the Brick by Brick layout

Type: No arguments


$('#reload').on('click', function(){
      $('#layout').layout( 'reload' );
 });

Download Brick by Brick JS