a good start

dabblet.css

/**
 * a good start
 */

@-ms-viewport { width: device-width; }

html
{
    min-height     : 100%;
    font-family    : sans-serif;
    text-rendering : optimizeLegibility;
}

img
{
    /* use bicubic interpolation in IE7-8 */
    -ms-interpolation-mode: bicubic;
}

*
{
    box-sizing        : border-box;
    vertical-align    : middle;
    background-repeat : no-repeat;
}


    
/**
 * kinda cool, but use with caution
 */

*
{
    transition : all 0.2s ease-in;
}

a:active
{
    position : relative;
    top      : 0.1rem;
    left     : 0.1rem;
    transition-duration : 0;
}



/**
 * less cool, but still common
 */

h1,
h2,
h3
{
    font-family : serif;
    font-weight : normal;
}

header ul,
footer ul
{
    margin  : 0;
    padding : 0;
}

dabblet.html

<!-- CDN with a fallback
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="/js/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>
-->

<!-- icons -->

<!-- iThings and Androids -->
<!-- source: http://mathiasbynens.be/notes/touch-icons#sizes -->

<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- HTML5 -->
<!-- source: http://dev.w3.org/html5/spec/links.html#rel-icon --> 
<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

<!-- Metro stuff -->
<!-- 144x144 -->
<meta name="msapplication-TileImage" content="tile.png">
<meta name="msapplication-TileColor" content="#ef0303">




<!-- example content -->

<h1>☙ a good start ❧</h1>


<blockquote>
    <p>
        Something smart.
    </p>
    <cite>&#8212; <a href="#" onclick="return false;">someone</a></cite>
</blockquote>

<style>
  h1
  {
      color      : #777;
      text-align : center;
  }
  blockquote
  {
      padding : 1.5em;
      border  : black solid 0.1rem;
  }
  blockquote:hover
  {
      border-radius : 0 3em;
  }
</style>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}