Scoped Styles. Chromium 19 required.

dabblet.css

/**
 * Scoped Styles. Chromium 19 required.
 */
 
hr {
  border-top: 1px solid rgba(0,0,0,.1);
  margin: 2rem 0;
}

/**************************************************/
.slat {
  display: block;
  margin-top: 1rem;
  overflow: auto;
}
/**************************************************/
.breadcrumb {
  display: block; 
}
/**************************************************/
nav[role=navigation] {
  cursor: default;
}

dabblet.html

<link rel=stylesheet href=//erikdavidjung.com/bootstrap.css>

<!------------------------------------------------------>

<a class="ui slat" href=#>
<img src=//placekitten.com/100/100>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet. <span class=meta>August 10</span></p>
<style scoped>
img {
  float: left;
  margin-right: 1rem;
  max-width: 100%;
  width: 4.5rem;
}
p {
  margin-left: 5.5rem;
}
.meta {
  display: block;
  font-size: .85em;
}
</style>
</a>

<!------------------------------------------------------><hr>

<nav class="ui breadcrumb">
<a href=#>This is a link</a>
<a href=#>Lorem link</a>
<a href=#>Dolor link two</a>
<a href=#>Here is a link</a>
<a>Active Link</a>
<style scoped>
a:link:after {
  content: "/";
  margin:0 .5em;
}
a:not(:link) {
  font-weight: bold;
}
</style>
</nav>

<!------------------------------------------------------><hr>

<nav role=navigation>
<ul>
<li><a href=#>This is a link</a></li>
<li class=s-current><a>Active Button</a></li>
<li><a href=#>Lorem link</a></li>
<li><a href=#>Dolor link two</a></li>
<li><a href=#>Here is a link</a></li>
</ul>
<style scoped>
ul {
  list-style: none;
  overflow: auto;
}
li {
  float: left;
}
li:not(:last-of-type) {
  margin-right: 1rem;
}
li a {
  display: block;
  padding: .5rem 1rem;
}
.s-current a {
  font-weight: bold;
}
</style>
</nav>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}