arkadiuszsz / bootstrap-grid-builder

Bootstrap Layout generator using Angular js

BootStrap 3 Grid Builder

DEMO

TL;DR | A quick layout generator for Bootstrap 3.Visit the link above

Bootstrap 3 has a new super-powerful grid system with four tiers of grid classes—phones, tablets, desktops, and large desktops—you can do some super crazy awesome layouts.But it quickly gets complicated as you try to wrap your head around it.Bootstrap 3 is more flexible in terms of what it can do but keeping 3 different layouts in your head simultaneously is very complex.

The Bootstrap 3 Grid Builder enables to quickly create responsive layouts using just drag and drop. It allows you to quickly test layouts on all types of devices fast & prototype and iterate faster. You can increase widths and offsets and , add different spans of columns while the Builder takes care of the optimization of html code generated.

Thanks to :

• Bootstrap , Angular-js , jQuery ,jQuery UI projects
• Packery by David Desandro
• Angular Drag-Drop by codef0mer
• Angular Localstorage by grevory
• Chardin-js by grevory
• Bootstrap Growl by ifightcrime

#TO BE DONE :-

• Drag and Drop functionality
• [] Nested Grids
• Pre-made Templates
• Add a delete column button
• Instead of toolbar, Use left-click popovers
• Add buttons inside the cols
• [] KeyBoard Shortcuts
• [] Migrate to Grunt.js
• Content PlaceHolders
• Tutorial based on Chardin-js
• [] Undo and Redo functionality
• [] Copy and Paste functionality
• Save and Reload functionality
• [] Html generation should be done via $compile and should be instant
• [] Implement push-pull classes of bootstrap 3
• [] Make a Grid Builder for Bootstrap 2.3.2 ,Foundation and other grid systems
• [] Stamp , Unstamp Elements using Packery

Licensed under the Apache License v2.0 http://www.apache.org/licenses/LICENSE-2.0