Layout Grid

Quick Example

Demos

Usage

There are 2 primary components - the css, which is responsible for positioning and the javascript plugin, used to change that positioning. You can use only the css without any javascript and still get a nice responsive grid.

Layout grid uses bootstrap's breakpoints by default (configurable). They are as follows:

We start with the basic html structure:

<div class="lt-container lt-xs-h-6">
    <div class="lt lt-xs-x-0 lt-xs-y-0 lt-xs-w-1 lt-xs-h-1">
        <div class="lt-body">
            Your content
        </div>
    </div>
</div>

lt-xs-h-6 on the lt-container means the height on screen size "xs" the height will be 6 counts. lt-xs-x-0 on the item means the x position on screen size "xs"

Classes

Here's how it looks when every class for every screen size is set:

<div class="lt-container lt-xs-h-6">
    <div class="lt
                   lt-xs-x-0
                   lt-xs-y-0
                   lt-xs-w-1
                   lt-xs-h-1
                   lt-sm-x-0
                   lt-sm-y-0
                   lt-sm-w-1
                   lt-sm-h-1
                   lt-md-x-0
                   lt-md-y-0
                   lt-md-w-1
                   lt-md-h-1
                   lt-lg-x-0
                   lt-lg-y-0
                   lt-lg-w-1
                   lt-lg-h-1">
        <div class="lt-body">
            Your content
        </div>
    </div>
</div>

As with other bootstrap classes the smaller sizes act as the default for larger ones, so you need to set only the things that change of the larger sizes.

Reordering with Javascript

Javascript is initialized via data-arrange="layout-grid" and setting up html5's draggable="true" on the individual items. The javascript is initialized only on the event of a drag on these items.

<div
 class="lt-container lt-xs-h-6"
 data-arrange="layout-grid">
    <div
     class="lt lt-xs-x-0 lt-xs-y-0 lt-xs-w-1 lt-xs-h-1"
     draggable="true">
        <div class="lt-body">
            Your content
        </div>
    </div>
</div>

Custom Options

Layout Grid comes with these options and their defaults. All of them can be changed both through javascript or using html5 data attributes. They can also be changed on the fly.

LTGrid.DEFAULTS = {
    resize: true,
    overlap: false,
    compact: true,
    params: {
        lg: {
            gap: 1,
            maxWidth: Number.MAX_VALUE,
            cols: 4,
            aspect: 2/3
        },
        md: {
            gap: 2,
            maxWidth: 1200,
            cols: 3,
            aspect: 2/3
        },
        sm: {
            gap: 3,
            maxWidth: 992,
            cols: 2,
            aspect: 2/3
        },
        xs: {
            gap: 4,
            maxWidth: 768,
            cols: 1,
            aspect: 2/3
        }
    }
};

resize is an option that when true will force the container of the grid to shrink to the shortest possible height, enclosing all the items.

overlap when set to false will forbid "overlapping" so items that find themselves holding the same space will be pushed downwards.

compact when set to true will try to reduce the vertical spaces between items as much as possible

params holds the default values from the sass variables. You'll need to set them to the new values here if you've changed them in the sass file, since we can't infer them from the css automatically.

You can set options with data attributes:

<div
 id="grid"
 class="lt-container lt-xs-h-6"
 data-arrange="layout-grid"
 data-resize="false"
 data-params='{"xs":{"cols":2}}'>
   ...
</div>

Or with javascript directly

// Javascript
$('#grid').lt_grid({resize: false, params: {xs: {cols: 2}}});

// On the fly modification
$('#grid').lt_grid('option', 'resize', false);
$('#grid').lt_grid('option', 'params', {xs: {cols: 2}});

Methods

Layout grid has a lot of methods that it uses internally but can be called as part of the API - some of the methods are documented here, all the others have docs in the source.

Rect object

Layout grid uses a "Rect" object internally to do calculations, this is simply an object that holds width, height, x and y, and has some utility methods along the way.

You can create your own "Rect" objects like this var rect = new $.lt.Rect(x, y, width, height).

rect.x rect.y rect.w rect.h attributes for x, y, width and hight respectively

rect.bottom() to get the height + y

rect.right() to get the width + x

rect.intersect(rect2) returns true if the two rects intersect

rect.setCss(classes, size) Modify a "css classes" string with the pos and size of this rect, for a specific screen size

rect.loadCss(classes, size) Load data from "css classes", for a specific screen size

lt_rect

$(..).lt_rect() is a jquery function that is a setter / getter for the "rect" object of a given widget. You need to pass "size" as the first argument so it knows for which size the rect is being viewed / modified.

var rect = $('#widget1.lt').lt_rect('lg')
rect.x = 2;
rect.w = 2;
$('#widget1.lt').lt_rect('lg', rect);

lt_size

$(..).lt_size() is a jquery function to get the current "size" of the grid, can be "lg", "md", "sm" or "xs"

lt_ensure_id

$(..).lt_ensure_id() Used internally to set a unique ID on an item that doesn't have one.

var size = $('#container').lt_size();
console.log(size);

option

$(..).lt_grid('option', option, value) allows you to set an option on the fly

$('#container').lt_grid('option', 'compact', false);

compact

$(..).lt_grid('compact') Compacts the grid, reducing horizontal space. It ignores the compact option setting.

$('#container').lt_grid('compact');

resize

$(..).lt_grid('resize') Resize the grid, setting the minimum possible size for the container. It ignores the resize option setting.

$('#container').lt_grid('resize');

update

$(..).lt_grid('update') Call resize and compact, based on the options.

$('#container').lt_grid('update');

reposition

$(..).lt_grid('reposition', $widget, {x: 1, y: 1, w: 1, h: 1}) Modify the position or size of a widget inside the grid (and call "update" method). Any parameter can be omitted so you can either set only position or only size.

$('#container').lt_grid('reposition', $('#widget1'), {x: 1, y: 1, w: 1, h: 1});

Support and requirements

Credits

Thanks a lot to the creator of gridster.js, where I got the inspiration for this plugin.

Built by Ivan Kerin as part of Clippings.com