Untitled

dabblet.css

body {
	font-family: Helvetica, Arial, sans-serif;
	background: #f2f4f6;
	color: #333;
}
.group {
	background: #fff;
	border: 1px solid #ccc;
	float: left;
	height: 248px;
	margin: 10px;
	width: 270px;
	}
.row {
	border-bottom: 1px solid #dedede;
	padding: 5px 10px;
}
.title {
	border-bottom: 1px solid #779bca;
	font-weight: bold;
	padding: 10px;
	font-size: 15px;
}
label {
	font-size: 12px;
	padding-left: 8px;
}

.group .title { background-color: rgba(234, 166, 250, 0.5); }
.group1 .title { background-color: rgba(255, 0, 0, 0.34); }
.group2 .title { background-color: rgba(255, 185, 75, 0.5); }
.group3 .title { background-color: rgba(252, 227, 84, 0.5); }
.group4 .title { background-color: rgba(177, 223, 74, 0.5); }
.group5 .title { background-color: rgba(99, 204, 251, 0.5); }
.group6 .title { background-color: rgba(200, 200, 200, 0.5); }

dabblet.html

<div class="group group1">
	<div class="title">UFI</div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Top 50</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Medium</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Small</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Weird stuff ( islands, borders )</label></div>
</div>
<div class="group group1">
	<div class="title">Destination type</div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Country</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Region</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">City</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Airport</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">District</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Landmark</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Hotel</label></div>
</div>
<div class="group group2">
	<div class="title">Occupancy</div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Single</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Default ( 2 adults )</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Group ( 3 - 10 adults )</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Children ( 1 - 3 )</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Rooms ( 1 - 3 )</label></div>
</div>
<div class="group group3">
	<div class="title">Length of Stay</div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">1 Day</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Short - 2-6 Days</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">7 Days</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Long > 7 Days</label></div>
</div>
<div class="group group3">
	<div class="title">Book window</div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">No dates</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Tonight</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Tomorrow</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Next Weekend</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Next Month</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">In 3 Months</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">In 6 Months</label></div>
</div>
<div class="group group3">
	<div class="title">Availability</div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">No availability</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Low AV 1% - 25%</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Low AV 26% - 75%</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Low AV 76% - 100%</label></div>
</div>
<div class="group group4">
	<div class="title">Languages</div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">LTR</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">RTL</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Non-latin</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Long</label></div>
</div>
<div class="group group4">
	<div class="title">Currency</div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Most used ( Euro, USD )</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Long ( IDR, INR, RUB )</label></div>
</div>
<div class="group group4">
	<div class="title">Price mode</div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">PM1 ( set up by hotel, might have taxes )</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">PM3 ( all included )</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">US ( all included - different design on BP )</label></div>
</div>
<div class="group group5">
	<div class="title">Filter</div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">No filters</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Price</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Star rating</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Hotel Type</label></div>
</div>
<div class="group group5">
	<div class="title">Sort</div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Stars</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Price ( pick one based on the group )</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Review score</label></div>
</div>
<div class="group">
	<div class="title">SR View</div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">List</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Grid</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Map</label></div>
</div>
<div class="group">
	<div class="title">Affiliates</div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1" selected="selected">Booking.com</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Booking Owned</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Whitelabel</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Hybrids</label></div>
</div>
<div class="group  group6">
	<div class="title">Non randomised</div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1" selected="selected">sr_traffi_split</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Is Landing Page</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">Estimated star rating ( Forces DE, AU )</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">All experiments on</label></div>
	<div class="row"><input type="checkbox" id="name1" name="name1" /><label for="name1">All experiments off</label></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}