Dennis Schipper dennisschipper

## index.html
<!doctype html>
<head>
	<title></title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>

	<div class="box_to_transform">
		<a href="#">
			<img src="http://www.designfordetails.com/blog/img/photoshop_logo.png">

## styles.css
BODY:before { /** create a box nefore the <body> to hold our stuff **/
	display:block;
	border: 1px solid #c5c5c5;
	cursor: default;
	background: #404040;
	color: #fff;
	font-size: 0.7em;
	padding: 5px;
	margin: 5px;
	float: right;

## sass_install
gem install sass

## generic_anchor_transition.css
A {
	-moz-transition: all .2s ease-in-out .2s;
	-webkit-transition: all .2s ease-in-out .2s;
	-ms-transition: all .2s ease-in-out .2s;
	-o-transition: all .2s ease-in-out .2s;
	transition: all .2s ease-in-out .2s;
}

A:hover {
	color: #006699;

## index.html
<!doctype html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="styles.css">
	<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>

	<div id="wrapper">

## basic.css
A {
    -moz-transition: all 0.5s ease-in-out .2s;
    -webkit-transition: all 0.5s ease-in-out .2s;
    -ms-transition: all 0.5s ease-in-out .2s;
    -o-transition: all 0.5s ease-in-out .2s;
    transition: all 0.5s ease-in-out .2s;
}

A:hover {
    color: #006699;

## index_v1.html.erb
<% content_for :head do %>
  <title>The Middleman!</title>
<% end%>

<h1>The Middleman is watching.</h1>

## 1.scss
//generic color variables

$color : #595959; // Text Color
$background : #fff; // Page abckground
$border-color : #cecece; // Border color
$text-focus : #404040; // Alternate text color for spans etc
$font : helvetica, arial, verdana, sans-serif; // Font Stack

body {
    color: $color;

## html5shim.html
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

## init.coffee
A
	<!doctype html>
	<head>
	<title></title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>

	<div class="box_to_transform">
	<a href="#">
	<img src="http://www.designfordetails.com/blog/img/photoshop_logo.png">
	BODY:before { / create a box nefore the <body> to hold our stuff /
	display:block;
	border: 1px solid #c5c5c5;
	cursor: default;
	background: #404040;
	color: #fff;
	font-size: 0.7em;
	padding: 5px;
	margin: 5px;
	float: right;
	A {
	-moz-transition: all .2s ease-in-out .2s;
	-webkit-transition: all .2s ease-in-out .2s;
	-ms-transition: all .2s ease-in-out .2s;
	-o-transition: all .2s ease-in-out .2s;
	transition: all .2s ease-in-out .2s;
	}

	A:hover {
	color: #006699;
	<!doctype html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="styles.css">
	<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	</head>
	<body>

	<div id="wrapper">
	A {
	-moz-transition: all 0.5s ease-in-out .2s;
	-webkit-transition: all 0.5s ease-in-out .2s;
	-ms-transition: all 0.5s ease-in-out .2s;
	-o-transition: all 0.5s ease-in-out .2s;
	transition: all 0.5s ease-in-out .2s;
	}

	A:hover {
	color: #006699;
	<% content_for :head do %>
	<title>The Middleman!</title>
	<% end%>

	<h1>The Middleman is watching.</h1>
	//generic color variables

	$color : #595959; // Text Color
	$background : #fff; // Page abckground
	$border-color : #cecece; // Border color
	$text-focus : #404040; // Alternate text color for spans etc
	$font : helvetica, arial, verdana, sans-serif; // Font Stack

	body {
	color: $color;