I am looking into to learn more about web client side programming, but whenever I find an interesting project I am overwhelmed with the unknown names of different libraries and technologies mentioned, while reading the project’s page. Consider Dashing for example. They mention Sinatra, Heroku, jQuery.. These are the ones that I have at least a slight idea what they are good for. But the list continues: Sprockets, Gridster.js, Server Sent Events and batman bindings.
This is nuts, I do not understand any of these. So I decided to divide and conquer the problem and try to focus on one unknown technology at a time. The aim is not to master the library, but to construct a minimum viable sample that helps to understand what it is good for.
Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed. Suitable for children of all ages. Made by Ducksboard.
Making the minimum gridster page
It seems that the library is good for creating grid layouts, where it is possible to re-arrange, add or remove dynamically the elements of the grid. Fair enough…
The key here is the div with class gridster and the unordered list inside. The grid is represented by the unordered list and each of the list items inside the list are representing one grid cell in our grid.
Looking at a list item in greater detail, you will see that there are attributes describing the cell’s position in the table using the data-row and data-col attributes and the size of the cell using the data-sizex, data-sizey attributes.
Below, you will see the full html page and css styles. You can also download the sample, if you like.