Framework: Base

by JamesKyle

HTML

<h1>Trust fund cred truffaut</h1>
<h2>Jean shorts pitchfork letterpress</h2>
<h3>Narwhal helvetica blog banh mi</h3>
<h4>VHS single-origin coffee sustainable letterpress fap carles</h4>
<h5>Fixie yr occupy godard bushwick</h5>
<h6>Mumblecore cred echo park synth</h6>
<p>Occupy single-origin coffee brunch wes anderson pour-over. Quinoa vice mcsweeney's farm-to-table art party dreamcatcher jean shorts stumptown, Austin helvetica occupy kogi. Seitan marfa williamsburg narwhal, yr vice thundercats artisan small batch. Truffaut marfa wolf, retro authentic wayfarers butcher gentrify before they sold out occupy keytar. Yr VHS single-origin coffee, iphone organic bushwick vice lomo shoreditch pitchfork. Carles umami single-origin coffee tofu, pitchfork selvage authentic iphone pinterest freegan +1 sartorial Austin american apparel skateboard. Thundercats artisan flexitarian, readymade chillwave yr seitan.</p>
<hr>
<p>Messenger bag lo-fi ethical thundercats. Direct trade butcher street art, PBR fingerstache twee skateboard 3 wolf moon pickled letterpress thundercats gentrify echo park vice. Viral PBR street art tattooed, terry richardson gentrify tofu vinyl whatever cliche bushwick high life mlkshk messenger bag. Godard farm-to-table viral, gentrify tofu before they sold out truffaut etsy lo-fi 8-bit direct trade aesthetic photo booth forage messenger bag. Chambray street art vice, vinyl mustache artisan lo-fi wes anderson mumblecore freegan. Artisan chillwave wes anderson keytar you probably haven't heard of them typewriter. Vegan occupy photo booth pickled.</p>

<form>
    
    <button type="reset">Foo</button>
    <button type="reset" disabled>Bar</button>
    <input type="text" placeholder="foo">
    <input type="password" name="pwd" placeholder="•••">
    
    <input type="text" placeholder="foo" disabled>
    
    <select>
        <option></option>
        <optgroup label="foos">
            <option>foo</option>
        </optgroup>
        <optgroup label="bars">
  ...

CSS

html {
    position: relative;
    top: 0; bottom: 0; min-height: 100%;
    left: 0; right: 0; width: auto;
}

xxx html:hover {
    background-image:
        -webkit-linear-gradient(top,
            rgba(0, 0, 0, 0.04) 15%,
            rgba(0, 0, 0, 0.00) 15%),
        -webkit-linear-gradient(left,
            rgba(0, 0, 0, 0.04) 15%,
            rgba(0, 0, 0, 0.00) 15%);
    background-image:
        -moz-linear-gradient(top,
            rgba(0, 0, 0, 0.04) 15%,
            rgba(0, 0, 0, 0.00) 15%),
        -moz-linear-gradient(left,
            rgba(0, 0, 0, 0.04) 15%,
            rgba(0, 0, 0, 0.00) 15%);
    background-image:
        -ms-linear-gradient(top,
            rgba(0, 0, 0, 0.04) 15%,
            rgba(0, 0, 0, 0.00) 15%),
        -ms-linear-gradient(left,
            rgba(0, 0, 0, 0.04) 15%,
            rgba(0, 0, 0, 0.00) 15%);
    background-image:
        -o-linear-gradient(top,
            rgba(0, 0, 0, 0.04) 15%,
            rgba(0, 0, 0, 0.00) 15%),
        -o-linear-gradient(left,
            rgba(0, 0, 0, 0.04) 15%,
            rgba(0, 0, 0, 0.00) 15%);
    background-image:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.04) 15%,
            rgba(0, 0, 0, 0.00) 15%),
        linear-gradient(to right,
            rgba(0, 0, 0, 0.04) 15%,
            rgba(0, 0, 0, 0.00) 15%);
    
    background-position: center -1px;
    background-size: .5em .5em;
    background-repeat: repeat;
}

xxx *:hover {
    outline: 1px solid rgba(255, 0, 0, .15);
    outline-offset: -1px;
}

/****************//****************//****************/
/****************//****************//****************/
/****************//****************//****************/
/****************//****************//****************/

html { font-size: 87.5% }
@media (min-height: 30em) and (min-width: 35em) { html { font-size: 100% } }

body {
    margin: 2em;
    padding: 0;
    font-size: 1em;
    line-height: 1.5em;
    
    font-family: "Proxima-Nova-Regular",...