I kept the following checklist at the back of my mind when I was looking for potential grid library. Then, within each grid item, I wanted to build interactive form elements to enable content creation. I started searching for different JavaScript grid libraries that would allow me to dynamically create, move, resize and re-position grids within given space of 12 columns of Bootstrap. I allocated two days to find the fitting library. Thought process behind selecting libraries to test Then, in addition, user should be able to store and re-load these layouts with dynamic content in each grid item, similar to what we have seen in many WordPress theme builder. And that is one of the key objective I’m trying to test here in context of Vue.js Meaning, frameworks like Bootstrap and Bulma do provide grid system, but they don’t come packaged with additional controls and events like drag-and-drop, resize, move and reposition, which are the backbone of user-defined grid layouts. Short answer is - to avoid re-inventing the wheel. If you’re new to dynamic grid layouts, you may wonder that grids are already implemented in CSS frameworks like Bootstrap and Bulma, why need one more library on top? If suitable grid library is found, then some or all of the components built in this project may be used in Pariksha. Salesforce Lightning (Drag-and-Drop) Dashboard - Image SourceĬombining all of the three above, this project was born three days before Christmas 2017: dynamic drag-and-drop layout editor using Vue.js and _ grid library.

Layouteditor manual