The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

/*!
 * Bootstrap v2.3.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row{margin-left:-20px;*zoom:1}.row:before,.row:after{display:table;content:"";line-height:0}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:20px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:940px}.span16{width:940px}.span15{width:880px}.span14{width:820px}.span13{width:760px}.span12{width:700px}.span11{width:640px}.span10{width:580px}.span9{width:520px}.span8{width:460px}.span7{width:400px}.span6{width:340px}.span5{width:280px}.span4{width:220px}.span3{width:160px}.span2{width:100px}.span1{width:40px}.offset16{margin-left:980px}.offset15{margin-left:920px}.offset14{margin-left:860px}.offset13{margin-left:800px}.offset12{margin-left:740px}.offset11{margin-left:680px}.offset10{margin-left:620px}.offset9{margin-left:560px}.offset8{margin-left:500px}.offset7{margin-left:440px}.offset6{margin-left:380px}.offset5{margin-left:320px}.offset4{margin-left:260px}.offset3{margin-left:200px}.offset2{margin-left:140px}.offset1{margin-left:80px}[class*="span"].hide,.row-fluid [class*="span"].hide{display:none}[class*="span"].pull-right,.row-fluid [class*="span"].pull-right{float:right}

body {
    background-color: #eee;
    color: #333;
    font-family: "Open Sans", sans-serif;
}

.x-menu > a > * {
    margin: 0;
    padding: 0;
}

.x-list {
    position: absolute;
    border-radius: 4px;
    box-shadow: 3px 3px 3px #bbb, -2px 3px 3px #bbb;
    margin: 4px 0 0 0;
    padding: 0;
    list-style-type: none;
}

.x-list > li {
	position: relative;
    border-bottom: 1px solid #eee;
    padding: 10px 42px 8px 12px;
    background-color: #fff;
}

.x-list > li:hover {
    background-color: #e6f5fa;
}

.x-list > li > a {
	position: relative;
    text-decoration: none;
    padding-top: 3px;
    padding-bottom: 3px;
    display: inline-block;
    color: #333;
    min-width: 178px;
}

.x-list > li > a:last-child {
    margin-right: 0;
}

.x-list > li:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.x-list > li:last-child {
    border-bottom: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.action-add {
    font-weight: bold;
    color: #048abb !important;
}

.x-list.with-actions {
	width: auto;
	overflow: hidden;
	*zoom: 1;
	&:before,
	&;:after {
    	display: table;
		content: "";
	}
	&;:after {
		clear: both;
	}
}

.x-list.with-actions > li {
	position: relative;
    padding: 10px 12px 8px;
    min-width: 175px;
    width: 100%;
    overflow: hidden;
}

.x-list.with-actions > li > a {
	float: left;
}

.x-list.with-actions > li > .action {
	float: right;
    margin: 0px;
	right: 12px;
    padding: 3px 13px 3px 12px;
    text-align: left;
    color: #048abb;
    border-left: 1px solid #efefef;
    min-width: auto;
    width:30px;
}

.x-list.with-actions > li:hover > .action {
	border-left: 1px solid #dedede;
}

.x-list.with-actions .action-add {
	padding: 2px 0px 5px;
}

dabblet.html

<div class="content">
	<div class="row">
		<div class="span5">
			<div class="x-menu">
			    <a href="#"><h2>Filter</h2></a>
			    <ul class="x-list with-actions">
			        <li>
			            <a href="#">Super Grover</a>
			        </li>
			        <li>
			            <a href="#">Double Standard Full Cream</a>
			        </li>
			        <li>
			            <a href="#">Boutros Boutros Ghali</a>
			            <a class="action"href="#">Edit</a>
			        </li>
			        <li>
			            <a href="#">Snuffleupagus</a>
			            <a class="action" href="#">Edit</a>
			        </li>
			        <li>
			            <a href="#" class="action-add">+ New Item</a>
			        </li>
			    </ul>
			</div>
		</div>
		<div class="span6">
			<div class="x-menu">
			    <a href="#"><h2>Filter</h2></a>
			    <ul class="x-list with-actions">
			        <li>
			            <a href="#">Super Grover</a>
			        </li>
			        <li>
			            <a href="#">Double Standard Full Cream</a>
			            <a class="action"href="#">Edit</a>
			        </li>
			        <li>
			            <a href="#">Boutros Boutros Ghali</a>
			            <a class="action"href="#">Edit</a>
			        </li>
			        <li>
			            <a href="#">Snuffleupagus</a>
			            <a class="action" href="#">Edit</a>
			        </li>
			        <li>
			            <a href="#" class="action-add">+ New Item</a>
			        </li>
			    </ul>
			</div>
		</div>
		<div class="span6">
			<div class="x-menu">
			    <a href="#"><h2>Filter</h2></a>
			    <ul class="x-list with-actions">
			        <li>
			            <a href="#">Super Grover</a>
			        </li>
			        <li>
			            <a href="#">Double Standard Full Cream just a really long list</a>
			        </li>
			        <li>
			            <a href="#">Boutros Boutros Ghali</a>
			            <a class="action"href="#">Edit</a>
			        </li>
			        <li>
			            <a href="#">Snuffleupagus</a>
			            <a class="action" href="#">Edit</a>
			        </li>
			        <li>
			            <a href="#" class="action-add">+ New Item</a>
			        </li>
			    </ul>
			</div>
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}