"layout builder"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Austin4Silvers/pen/MJZyvM?depth=everything&order=popularity&page=13&q=Builder&show_forks=false" /> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <style class="cp-pen-styles">.gridCooker{ min-height:300px; border: 2px dotted silver; } .top_menu{ padding:15px; /* text-align:right; */ } /* --------- CTX Menu -------- */ #addRow, #addCol, #getCode, #clearLayout{ background-color: #333; padding: 5px 10px; color:silver; border-radius: 3px; text-decoration:none; } #clearLayout{ background-color: maroon; } #getCode{ background-color:olive; color:#fff; } /* --------- GRID -------- */ .__gr{ padding:5px; margin:2px; } .__grTemp{ border: 1px dashed #FF0000; /* yellow*/ background-color: #F5F6CE; /* orange */ } .__gcTemp{ border: 1px dashed #04B431; /*Deep green*/ background-color: #81F7BE; /*Light green*/ display:inline-block; } /* ------ CODE ---- */ #code{ display:none; height:200px; }</style></head><body> <div class="container"> <h3>Simple Bootstrap + Jquery LAYOUT builder</h3> <div class="top_menu"> <a href="#" id="addRow">+ Row</a>   <a id="addCol" href="#">+ Column</a>   <a id="clearLayout" href="#">x Clear</a>   <a id="getCode" href="#"> Get Code</a>   </div> <div class="row"> <div class="gridCooker col-md-8">Click here & start with + ROW ...</div> <div class="col-md-3"> <h4>Simple to use</h4> <small> <ul> <li>Yellow = Row.</li> <li>Green = Column.</li> <li>First choose by clicking where you want to add a node (row/col).</li> <li> Start with creating rows then create columns inside the rows acording to your needs.</li> <li>Once done click on "Get Code" button to get the final code.</li> <li>For proper indentation you can Copy -> Pase the code <b><a href="http://www.freeformatter.com/html-formatter.html" target="_blank">HERE</a></b> to get nice indented HTML code.</> </ul></small </div> </div> <textarea id="code" class="col-md-8"></textarea> </div> <!-- ======= Display ====== --> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script >function __GBuilder(conf){ this.cont = $(conf.cont); this.cookDom(); this.selected = $(conf.cont); } __GBuilder.prototype.cookDom = function(){ var self = this; self.cont.prop('contenteditable', true); self.cont.addClass('__gr') $(document).on('click', '.__gr', function(e){ e.stopPropagation(); self.selected = $(this) console.log(self.selected) }) //------ Clear layout ----- $('#clearLayout').click(function(e){ e.preventDefault(); if(confirm("Sure you want to clear layout? ")){ $('#code').val(''); $('#code').hide(); $('.gridCooker').html("") self.selected = self.cont; } }) // ---- Get code ---- $('#getCode').click(function(e){ e.preventDefault(); $('#code').show() var clone = $('.gridCooker').clone(); clone.find('.__gc').removeAttr('style'); clone.find('.__gc').removeAttr('id'); clone.find('.__gc').removeClass('__gc'); clone.find('.__gr').removeAttr('id'); clone.find('.__gr').removeClass('__gr'); clone.find('.__grTemp').removeClass('__grTemp'); clone.find('.__gcTemp').removeClass('__gcTemp'); clone.find('.__blkSize').removeClass('__blkSize'); var final = '<div class="col-md-12">'+clone.html()+'</div>' $('#code').val(final) }) // ---- Adding row ---- $('#addRow').click(function(e){ var row = document.createElement('div'); row.setAttribute('class', 'col-md-12 col-sm-12 __gr __grTemp'); var id = + new Date(); row.innerHTML = '<div>Row col-12</div>' row.setAttribute('id', id); self.selected.append(row); }) // ---- Adding column ---- $('#addCol').click(function(e){ calculateCol('plus') }) function calculateCol(action){ var __gcCount = self.selected.find('.__gc').length; if( __gcCount < 5 ){ var style = 'width:8%;'; var dgt = 2; if(__gcCount < 5){ if(__gcCount == 0){ dgt = 12; style = 'width:100%;'; } else{ var width = 0 if(action == 'plus'){ dgt = Math.floor(12 / (__gcCount+1)) width = (dgt > 3) ? (100 / (__gcCount+1))-1 : (100 / (__gcCount+1))-2 }else{ dgt = Math.floor(12 / (__gcCount-1)) width = (dgt > 3) ? (100 / (__gcCount-1))-1 : (100 / (__gcCount-1))-2 } style = 'width:'+width+'%;'; } } self.selected.find('.__gc').each(function(){ var classStr = $(this)[0].getAttribute('class'); classStr = classStr.toString().replace(/\bcol-\S+/ig,"") $(this)[0].setAttribute('class', classStr); $(this).addClass('col-md-'+dgt) $(this).find('.__blkSize').text('col-'+dgt) $(this)[0].setAttribute('style', style) }); if(action == 'plus'){ var col = document.createElement('div'); col.setAttribute('class', 'col-md-'+dgt+' col-sm-12 __gr __gc __gcTemp'); col.setAttribute('style', style) var id = + new Date(); col.innerHTML = '<div class="__blkSize">col-'+dgt+'</div>' col.setAttribute('id', id); self.selected.append(col); }else{ var parent = self.selected.closest('div'); self.selected.remove(); self.selected = parent; } }else{ alert('Cannot go beyond 5 column') } } } // ================================= $(function(){ new __GBuilder({cont: '.gridCooker'}); }) //# sourceURL=pen.js </script> </body></html>

Related: See More

Datepicker
social network layout - bootstrap 4
Zigzag Timeline Layout
Multi Select Tiled Layout

Questions / Comments: