thm-design

/* Media queries used on blog.staydecent.ca by Adrian Unger 
   check my full source at:
   http://blog.staydecent.ca/static/css/style-0.1.6.css */
@media only screen and (min-width:768px) and (max-width:1269px) {
    /* In my particular design, I used a fluid grid limited to a 
       max-width of 1140px, while (if there is enough room)
       pushing the menu outside of layout, requiring a total
       limit of at least 1270px. 

       So, this first query applies to any screen-width less

thm-design

	var isMobile = { 
	Android: function() { return navigator.userAgent.match(/Android/i); }, 
	BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i); }, 
	iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, 
	Opera: function() { return navigator.userAgent.match(/Opera Mini/i); }, 
	Windows: function() { return navigator.userAgent.match(/IEMobile/i); }, 
	any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); } };

	// var isTouch = ("ontouchstart" in document.documentElement); 
	// Chrome Version 37.0.2062.103 m  (this version of chrome is firing touchstart event even tho it is not a mobile browser)

thm-design

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

thm-design

<div id="warp">
  <br />
<label for="check"><input id="check" type="checkbox"><span class="strip"></span></label><br /><br />
<label for="check2"><input checked id="check2" type="checkbox"><span class="strip"></span></label>
  <br />
  <br />
  <br />
</div>

thm-design

<div class="step-bar title-bar-dark">
    <div class="steps">
      <ul class="step">
        <li class="active"><a href="#">Step 1</a></li>
        <li><a href="#">Step 2</a></li>
        <li><a href="#">Step 3</a></li>
        <li><a href="#">Step 4</a></li>
      </ul>
    </div>
  </div>

thm-design

# General Variables
sketch = Sketch.create()
particles = []
particleCount = 750
sketch.mouse.x = sketch.width / 2
sketch.mouse.y = sketch.height / 2
sketch.strokeStyle = 'hsla(200, 50%, 50%, .4)'
sketch.globalCompositeOperation = 'lighter'
  
# Particle Constructor

thm-design

<div class='buttons'>
      <a href='#' title='Title 1'>
        &#x2606;
      </a>
      <a class='active' href='#' title='Title 2'>
        &#x262F;
      </a>
      <a href='#' title='Title 3'>
        &#x2666;
      </a>

thm-design

<h1>Chameleon Theme</h1>
<h2>Adapting to <span id="color">ANY</span> color.</h2>

<input id="input-color" type="color" value="#00aaff">

<ul class="box">
  <button>Button</button>
</ul>

<p>Not really possible with CSS alone.</p>

thm-design

<h1>404</h1>

<div class="frame">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="caps"><img src="http://ademilter.com/caps.png" alt=""></div>
<canvas id="canvas"></canvas>

thm-design

<input type='checkbox'><br>
<input type='checkbox' checked><br>
<input type='checkbox'>