BS Builder

by wrxsti85

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="tool-bar tools">
	<div class="toggle-tab"><i class="fa fa-chevron-left"></i></div>
	<div class="sections">
		<h2>Sections</h2>
		<div class="container-fluid">
			<div class="row">
				<div class="btn-group col-size-selector" role="group" aria-label="">
					<button type="button" class="btn btn-default">xs</button>
					<button type="button" class="btn btn-default">sm</button>
					<button type="button" class="btn btn-default">md</button>
					<button type="button" class="btn btn-default">lg</button>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 editor-col"><p>Container</p></div>
			</div>
			<div class="row">
				<div class="col-sm-12 editor-col"><p>Row</p></div>
			</div>
			<div class="row">
				<div class="col-sm-1 editor-col"></div>
			</div>
			<div class="row">
				<div class="col-sm-2 editor-col"></div>
			</div>
			<div class="row">
				<div class="col-sm-3 editor-col"></div>
			</div>
			<div class="row">
				<div class="col-sm-4 editor-col"></div>
			</div>
			<div class="row">
				<div class="col-sm-5 editor-col"></div>
			</div>
			<div class="row">
				<div class="col-sm-6 editor-col"></div>
			</div>
			<div class="row">
				<div class="col-sm-7 editor-col"></div>
			</div>
			<div class="row">
				<div class="col-sm-8 editor-col"></div>
			</div>
			<div class="row">
				<div class="col-sm-9 editor-col"></div>
			</div>
			<div class="row">
				<div class="col-sm-10 editor-col"></div>
			</div>
			<div class="row">
				<div class="col-sm-11 editor-col"></div>
			</div>
			<div class="row">
				<div class="col-sm-12...

CSS

body {
	font-family: 'Roboto', sans-serif;
	overflow: hidden;
}

.tool-bar {
	background: #fff;
	border-right: solid 1px #efefef;
	padding: 10px;
	height: 100%;
	position: absolute;
	width: 200px;
	transition: .2s all;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.tool-bar.tools {
	left: 0px;
}

.tool-bar.layers {
	right: 0px;
}

.tool-bar.tools.toggled {
	-webkit-transform: translate(-200px, 0px);
    -moz-transform: translate(-200px, 0px);
    -o-transform: translate(-200px, 0px);
    -ms-transform: translate(-200px, 0px);
}

.tool-bar.layers.toggled {
	-webkit-transform: translate(200px, 0px);
    -moz-transform: translate(200px, 0px);
    -o-transform: translate(200px, 0px);
    -ms-transform: translate(200px, 0px);
}

.toggle-tab {
	position: absolute;
	border: solid 1px #efefef;
    padding: 6px 6px 2px 5px;
	cursor: pointer;
	background: #fff;
}

.tools .toggle-tab {
    right: -24px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
	box-shadow: 2px 1px 4px rgba(0, 0, 0, 0.05);
}

.layers .toggle-tab {
	left: -24px;
	border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
	box-shadow: -2px 1px 4px rgba(0, 0, 0, 0.05);
}

.tool-bar h2 {
	font-size: 16px;
    font-weight: 600;
    margin: 0px 0px 2px;
    border-bottom: solid 1px;
    color: #6b6b6b;
}

.tool-bar .row {
    margin-bottom: 10px;
}

.editor-col {
    border: solid 1px #2d2d2d;
    min-height: 20px;
    border-radius: 2px;
	cursor: pointer;
}

.editor-col p {
    margin: 0px;
    text-align: center;
}

JavaScript

let colSize = null;

$('.toggle-tab').click(function(){
	$(this).parent().toggleClass('toggled');
	let chevron = $(this).children('i').hasClass('fa-chevron-left') ? 'fa-chevron-right' : 'fa-chevron-left';
	$(this).children('i').removeClass($(this).children('i').attr('class')).addClass('fa ' + chevron);
});

$('.col-size-selector .btn').click(function(){
	colSize = $(this).text();
});

let editor = function(){
	let init = function(){
		let canvas
	}
};

function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
    s4() + '-' + s4() + s4() + s4();
}