weirdoonthebus

<div id="weather_group" class="field_group"><p class="group_label">What's your favorite season?</p><label id="weather_spring_label" class="field" for="weather_spring"><input id="weather_spring" name="weather_spring" type="checkbox" value="spring"><span>Spring</span></label><label id="weather_summer_label" class="field" for="weather_summer"><input id="weather_summer" name="weather_summer" type="checkbox" value="summer"><span>Summer</span></label><label id="weather_autumn_label" class="field" for="weather_autumn"><input id="weather_autumn" name="weather_autumn" type="checkbox" value="autumn"><span>Autumn</span></label><label id="weather_winter_label" class="field" for="weather_winter"><input id="weather_winter" name="weather_winter" type="checkbox" value="winter"><span>Winter</span></label></div>

weirdoonthebus

<label id="img_category_label"class="field"for="img_category"data-value="">
	<span>Category</span>
	<div id="img_category"class="psuedo_select"name="img_category">
		<span class="selected"></span>
		<ul id="img_category_options"class="options">
			<li class="option"data-value="commercial">Commercial</li>
			<li class="option"data-value="residential">Residential</li>
		</ul>
	</div>
</label>

weirdoonthebus

Auto Resizing Material Design Textarea

A Pen by Sam Murphey on CodePen.

License.

weirdoonthebus

<main id="main"><p>I FIT!</p></main>

weirdoonthebus

<aside><section id="main_message"><p><span>Smart</span></p><p><span>Resizing</span></p><p><span>Text</span></p></section></aside>

weirdoonthebus

Cards

A Pen by Sam Murphey on CodePen.

License.

weirdoonthebus

<!--
photo background by marcelo quinan via unsplash: https://unsplash.com/marceloquinan -->
<header id="header"><h1>Right Now</h1><form><input id="search" type="text"placeholder="Search or say 'Ok Google'"></form></header>
<article>
  <section id="section"></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>

weirdoonthebus

Credit Card Flip

A Pen by Sam Murphey on CodePen.

License.

weirdoonthebus

<div class="spinner" style="height: 54px;  opacity: 1;">
  <svg viewBox="0 0 50 50">
    <circle class="progress" cx="25" cy="25" r="20"/>
  </svg>
</div>

weirdoonthebus

<header>Pull Down</header>
<main>
  <div id='refresh'>Release to Refresh</div>
  <article><!--this is considered top of the scrollable body area-->
    <section><h2>Content</h2><p>Content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p></section>
  <section><h2>Content</h2><p>Content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p></section>
  <section><h2>Content</h2><p>Content content content content content content content content content content cont