Untitled

dabblet.css

body {
  font-family: Helvetica;
}

#brand {
  background-color: black;
  color: white;
  padding: 10px;
}

.image {
  vertical-align: bottom;
 }
 
.image.image-brand {
  border: solid white 2px;
}
 
.text.text-brand {
  font-size: 26px;
  line-height: 52px;
  margin-left: 6px;
  font-weight: bold;
}

#content {
  max-width: 960px;
  margin: 0 auto;
}

#left-content-flow {
  float: left;
  max-width: 660px;
}

#right-content-flow {
  float: right;
}

.paragraph.paragraph-flow {
  line-height: 20px; /* for readability */
}

.list {
  list-style: none;
  padding: 0;
}

.list.list-sidebar {
  line-height: 24px;
}

.list-item.list-item-sidebar {
  cursor: pointer;
}

#footer {
  clear: both;
  border-top: solid 1px black;
  padding-bottom: 10px;
}

dabblet.html

<div id="content">
  <div id="brand">
    <img class="image image-brand" src="http://placekitten.com/50/50">
    <span class="text text-brand">Brand Text</span>
  </div>
  <h1>But What Does It All Mean?</h1>
  <div id="left-content-flow">
    <h2>Maybe It Means This</h2>
    <p class="paragraph paragraph-flow">
      Fixie jean shorts chambray Vice umami Pinterest bespoke Thundercats leggings, synth meh irony butcher Neutra biodiesel.  Whatever kogi deep v, actually meh Truffaut mixtape Pitchfork PBR.  Godard pug shabby chic squid salvia, Tumblr blog bicycle rights Banksy lo-fi.  Vice wolf whatever gastropub, Pitchfork seitan biodiesel ethical.  DIY beard PBR&B, cardigan retro bespoke Tonx bitters Etsy art party single-origin coffee paleo literally.  Sartorial PBR gluten-free, kogi 90's mlkshk shabby chic fashion axe VHS dreamcatcher bespoke locavore Williamsburg roof party.  Tote bag Intelligentsia kogi whatever chambray, cornhole raw denim artisan blog.
    </p>
    <h2>Or Maybe It Means This</h2>
    <p class="paragraph paragraph-flow">
      Fixie jean shorts chambray Vice umami Pinterest bespoke Thundercats leggings, synth meh irony butcher Neutra biodiesel.  Whatever kogi deep v, actually meh Truffaut mixtape Pitchfork PBR.  Godard pug shabby chic squid salvia, Tumblr blog bicycle rights Banksy lo-fi.  Vice wolf whatever gastropub, Pitchfork seitan biodiesel ethical.  DIY beard PBR&B, cardigan retro bespoke Tonx bitters Etsy art party single-origin coffee paleo literally.  Sartorial PBR gluten-free, kogi 90's mlkshk shabby chic fashion axe VHS dreamcatcher bespoke locavore Williamsburg roof party.  Tote bag Intelligentsia kogi whatever chambray, cornhole raw denim artisan blog.
    </p>
    <p class="paragraph paragraph-flow">
      Fixie jean shorts chambray Vice umami Pinterest bespoke Thundercats leggings, synth meh irony butcher Neutra biodiesel.  Whatever kogi deep v, actually meh Truffaut mixtape Pitchfork PBR.  Godard pug shabby chic squid salvia, Tumblr blog bicycle rights Banksy lo-fi.  Vice wolf whatever gastropub, Pitchfork seitan biodiesel ethical.  DIY beard PBR&B, cardigan retro bespoke Tonx bitters Etsy art party single-origin coffee paleo literally.  Sartorial PBR gluten-free, kogi 90's mlkshk shabby chic fashion axe VHS dreamcatcher bespoke locavore Williamsburg roof party.  Tote bag Intelligentsia kogi whatever chambray, cornhole raw denim artisan blog.
    </p>
  </div>
  <div id="right-content-flow">
    <h2>Sidebar</h2>
    <ul class="list list-sidebar">
      <li class="list-item list-item-sidebar">So Sweet</li>
      <li class="list-item list-item-sidebar">So Right</li>
      <li class="list-item list-item-sidebar">It Feels Good</li>
    </ul>
  </div>
  <div id="footer">
    <p class="paragraph paragraph-footer">
      Lovingly made in Williamsburg or something.
    </p>
  </div> 
</div>

dabblet.js

// alert('Hello world!');

settings.json

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