The Grid is an extra light weight (6.19 Kb) jQuery-based library that displays your cells in a surely nice grid layout.
You can browse the different examples and try it out. ツ
Clone from GitHub or download zip archive.
cd [where_you_want_it_to_be] git clone git@github.com:antoniandre/grid.git
Install dependencies from Bower.
bower install
Then make sure you include jQuery script and grid script + minimum style in document <head>:
<link rel="stylesheet" type="text/css" href="../css/grid.css"> <script src="../bower_components/jquery/dist/jquery.min.js"></script> <script src="../js/grid.js"></script>
Alternatively, if you don't want to mess with Bower you can use cdnjs.cloudflare.com versions instead:
<link rel="stylesheet" type="text/css" href="../css/grid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../js/grid.js"></script>
By default and in most cases you won't need jquery.easing plugin. But if you really want to have fancy easing like elastic or bounce then you will need to include this script too:
// After jquery.min.js.
<script src="../bower_components/jquery.easing/js/jquery.easing.min.js"></script>
Then use the most basic instantiation to get The Grid running!
<div class="thegrid">
<div class="cell" data-width="1" data-height="4"><div data-text="1"></div></div>
<div class="cell" data-width="1" data-height="1"><div data-text="2"></div></div>
<div class="cell" data-width="3" data-height="1"><div data-text="3"></div></div>
<div class="cell" data-width="5" data-height="1"><div data-text="4"></div></div>
<div class="cell" data-width="2" data-height="1"><div data-text="5"></div></div>
<div class="cell" data-width="2" data-height="1"><div data-text="6"></div></div>
<div class="cell" data-width="2" data-height="1"><div data-text="7"></div></div>
<div class="cell" data-width="1" data-height="3"><div data-text="8"></div></div>
<div class="cell" data-width="1" data-height="2"><div data-text="9"></div></div>
<div class="cell" data-width="1" data-height="1"><div data-text="10"></div></div>
</div>
.thegrid .cell {padding: 1%;}
.thegrid .cell > div {
background-image: radial-gradient(circle at top right,#f33,pink);
display: -ms-flex;
display: flex;
align-items: center;
}
.cell div:after {
content: attr(data-text);
display: block;
text-align: center;
width: 100%;
color: rgba(255,255,255,.25);
font-size: 200%;
font-family: sans-serif;
}
$('.thegrid').grid();
// Alternatively you can call it this way:
// var grid1 = new thegrid();
// Then you can access grid methods like:
// grid1.redraw();
Hum. I can already guess that it won't be enough to suit your picky needs, so you'd better add a few parameters.
Design-wise, you can fully customise your grid aspect, everything is doable from your CSS file!
.thegrid .cell {padding: 0;}
.thegrid .cell > div {
background-image: radial-gradient(circle at top right,#f33,pink);
display: -ms-flex;
display: flex;
align-items: center;
}
.cell div:after {
content: attr(data-text);
display: block;
text-align: center;
width: 100%;
color: rgba(255,255,255,.25);
font-size: 200%;
font-family: sans-serif;
}
$('.thegrid').grid();
<div class="thegrid">
<div class="cell" data-width="1" data-height="4"><div data-text="1"></div></div>
<div class="cell" data-width="1" data-height="1"><div data-text="2"></div></div>
<div class="cell" data-width="3" data-height="1"><div data-text="3"></div></div>
<div class="cell" data-width="5" data-height="1"><div data-text="4"></div></div>
<div class="cell" data-width="2" data-height="1"><div data-text="5"></div></div>
<div class="cell" data-width="2" data-height="1"><div data-text="6"></div></div>
<div class="cell" data-width="2" data-height="1"><div data-text="7"></div></div>
<div class="cell" data-width="1" data-height="3"><div data-text="8"></div></div>
<div class="cell" data-width="1" data-height="2"><div data-text="9"></div></div>
<div class="cell" data-width="1" data-height="1"><div data-text="10"></div></div>
</div>
For the settings and calculations which can only be applied by Javascript, you can use all these settings:
{
grid: $('.thegrid'),// The container of the cells.
// This var will be removed after init to avoid circular error due to recursion.
// It is stored in public var 'grid' instead.
cells: $('.cell'),// The cells to render / place / filter.
cellsPerRow: 7,
cellHeight: 100,// Cell height in pixels.
// You can also define a function like so:
// function(gh){return ((gh.gridWidth / gh.options.cellsPerRow) * 262 / 400) + 100};
// But be aware that it will be much more costy (you may opt for throttling).
//========= Animations =========//
// By default the cells animation will be handled via CSS transitions as it is known to be smoother and
// of better performances. however if you want some fancy easing effects (e.g. elastic or bounce) you may
// want to switch to javascript animations. If so just turn animationPlatform to 'js' and provide the easing
// speed and curve that you want.
// You can also override the default CSS transitions in a custom CSS like:
// .thegrid.transitions .cell {
// -webkit-transition: .3s ease-in-out;
// -o-transition: .3s ease-in-out;
// transition: .3s ease-in-out;
// }
animationPlatform: 'css',// 'css' or 'js'.
animationEasing: 'swing',// jQuery built-in easings are 'swing', 'linear'. the jquery.easing plug-in can add many more.
animationSpeed: 500,
animationDelay: 0,
updateGridHeight: true,// On each render.
//========= Responsiveness =========//
// Only if breakpoints are set the redraw() function is triggered on each resize event.
// You can throttle the redraw to alight the resizing event.
// (while resizing the redraw() function is exec every throttlingDelay milliseconds)
throttling: false,
throttlingDelay: 300,// in ms.
//========= Breakpoints =========//
// (from desktop to mobile).
// Use it to allow a different behavior according to the device screen width.
// Example of use:
// breakpoints:
// {
// 1199:
// {
// cellsPerRow: 5
// },
// 767:
// {
// cellsPerRow: 4
// },
// 479:
// {
// cellsPerRow: 3
// },
// }
breakpoints: {},
//========= Sorting =========//
// If you want to apply sorting on The Grid cells.
// Each criterion that you use for sorting can apply a numeric or string sorting.
// This allows to sort naturally: numeric to [1, 3, 11], or string to ['1a', '11a', '3a'].
// Note that for performance concerns this is set as a parameter and not as a native guess.
// Example of use:
// sortingCriteria:
// {
// name: {type: 'string'},
// price: {type: 'int'},
// }
sortingCriteria: {}
}
You can use all these methods
This is the most useful method of all. You will have to call it every time you made a change to the grid configuration or grid cells collection.
As easy to use as:
thegrid.redraw();
This function is not internally called from each function like .filter() or updateParams() for better performance.
So you can chain multiple changes and redraw only once.
$('.thegrid').grid('updateParams', params);
// Alternatively you can do it this way (after var grid1 = new thegrid();):
// grid1.updateParams(params);
To filter the cells you can call the .filter() method with the collection of cells you want to show or hide.
$('.thegrid').grid('filter', cellsToToggle [, hide = false] [, toggleAllOthers = false]);
@param cellsToToggle
either a css selector to match a collection of cells or a jQuery collection.
@param hide true, false. Default: false.
whether you want to show or hide the given collection of cells.
@param toggleAllOthers true, false. Default: false.
whether to show or hide all the other cells that are not in the given collection.
$('.thegrid').grid('resetFilters');
$('.thegrid').grid('sort', sortedCells);
The following events are triggered on the grid DOM element. You can use them like a standard event.
Caution! Do the event binding first before initializing the grid. Otherwise the ultra fast init will be complete before the event is bound.
The ready event happens very fast.
$('.thegrid').on('ready', function(){...});
This event is triggered when the browser is resized.
$('.thegrid').on('breakpointChange', function(){...});
This event is triggered when The Grid has just finished redrawing the grid. Meaning recalculating the position of each cell and displaying them.
$('.thegrid').on('redraw', function(){...});