Step 1 in converting to a Backbone-based website

src/css/main.scss

@@ -0,0 +1,152 @@
+/*
+Crafting Guide - main.scss
+
+Copyright (c) 2014 by Redwood Labs
+All rights reserved.
+*/
+
+@import 'mixins';
+@import 'reset';
+
+// Constants ///////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+$color-background: #AAC9FF;
+$color-bedrock: #0A0A0A;
+$color-content: rgba(230, 230, 230, 0.90);
+$color-brick-dark: #7A7A7A;
+$color-brick-light: #D9D9D9;
+$color-footer: #3D1D09;
+$color-footer-text: white;
+$color-dirt: #906647;
+
+// Fonts ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+@font-face {
+  font-family: 'PressStart';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/press_start.ttf') format('truetype');
+}
+
+// Common //////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+body {
+    background: $color-background url('/images/ice.png');
+    font-size: 10px;
+}
+
+h1 {
+    margin-bottom: 1em;
+
+    * { display: inline; }
+
+    img {
+        position: relative; height: 10em; width: 10em;
+        margin-right: 1em;
+        vertical-align: bottom;
+    }
+
+    p {
+        font-family: PressStart;
+        font-size: 3em;
+        position: relative; top: -0.5em;
+    }
+}
+
+h2 {
+    margin-bottom: 1em;
+
+    * { display: inline; }
+
+    img {
+        position: relative; height: 7.5em; width: 7.5em;
+        margin-right: 1em;
+        vertical-align: bottom;
+    }
+
+    p {
+        font-family: PressStart;
+        font-size: 2em;
+        position: relative; top: -0.25em;
+    }
+}
+
+.centered {
+    text-align: center;
+}
+
+.content {
+    background: $color-content;
+    box-shadow: 10px 10px 20px #666;
+    margin: 2em auto;
+    max-width: 96em;
+    position: relative;
+    width: 100%;
+}
+
+// Views ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+.view__footer {
+    background: $color-footer;
+    color: $color-footer-text;
+    margin-top: 2em;
+
+    a {
+        color: $color-footer-text;
+    }
+
+    .divider {
+        position: relative; height: 3.2em; width: 100%;
+        clear: both;
+    }
+
+    .divider.top {
+        background: $color-dirt url('/images/grass_side.png');
+    }
+
+    .left, .center, .right  {
+        position: relative; width: 33%;
+        float: left;
+        padding: 2em;
+
+        p {
+            font-family: sans-serif;
+            font-size: 1.25em;
+            padding-bottom: 1.0em;
+
+            &:last-child {
+                padding-bottom: 0;
+            }
+        }
+
+        h2 {
+            padding-bottom: 1.0em;
+
+            p {
+                font-family: PressStart;
+                font-size: 1.5em;
+            }
+        }
+    }
+
+    .divider.bottom {
+        background: $color-bedrock url('/images/bedrock.png');
+    }
+}
+
+.view__header {
+    background: $color-brick-light url('/images/stone_brick_light.png');
+    position: relative; height: 10em;
+    margin: 5em 0 2em 0;
+
+    h1 { position: relative; top: -3em; left: -3em; }
+
+    .divider {
+        background: $color-brick-dark url('/images/stone_brick.png');
+        position: absolute; bottom: 0; height: 3.2em; width: 100%;
+    }
+}
+
+// Child Stylesheets ///////////////////////////////////////////////////////////////////////////////////////////////////
+
+@import 'templates/index';

src/css/mixins.scss

@@ -0,0 +1,26 @@
+/*
+Crafting Guide - mixins.scss
+
+Copyright (c) 2014 by Redwood Labs
+All rights reserved.
+*/
+
+@mixin box-sizing($value) {
+  -moz-box-sizing: $value;
+  -webkit-box-sizing: $value;
+  box-sizing: $value;
+}
+
+@mixin center-vertical {
+    position: absolute;
+    top: 50%;
+    @include transform(translateY(-50%));
+}
+
+@mixin transform($transforms) {
+    -moz-transform: $transforms;
+    -o-transform: $transforms;
+    -ms-transform: $transforms;
+    -webkit-transform: $transforms;
+    transform: $transforms;
+}

src/css/reset.scss

@@ -0,0 +1,75 @@
+a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    font-size: 100%;
+    @include box-sizing(border-box);
+}
+
+html,body {
+    height: 100%;
+}
+
+article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
+    display: block;
+}
+
+b,strong {
+    font-weight: bold;
+}
+
+img {
+    color: transparent;
+    vertical-align: middle;
+    -ms-interpolation-mode: bicubic;
+}
+
+ol,ul {
+    list-style: none;
+}
+
+li {
+    display: list-item;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+th,td,caption {
+    font-weight: normal;
+    vertical-align: top;
+    text-align: left;
+}
+
+q {
+    quotes: none;
+}
+
+q:before,q:after {
+    content: '';
+    content: none;
+}
+
+sub,sup,small {
+    font-size: 75%;
+}
+
+sub,sup {
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+svg {
+    overflow: hidden;
+}

src/css/templates/index.scss

@@ -0,0 +1,8 @@
+/*
+Crafting Guide - templates/index.scss
+
+Copyright (c) 2014 by Redwood Labs
+All rights reserved.
+*/
+
+@import 'recipe_catalog';

src/css/templates/recipe_catalog.scss

@@ -0,0 +1,28 @@
+/*
+Crafting Guide - recipe_books.scss
+
+Copyright (c) 2014 by Redwood Labs
+All rights reserved.
+*/
+
+.view__recipe_catalog {
+    position: relative; width: 100%;
+    padding: 0 2em;
+
+    button {
+        @include center-vertical;
+        position: absolute; right: 1em;
+    }
+
+    input { border: 0; width: 90%; }
+
+    table {
+        background: white;
+        margin: 0 auto;
+        width: 98%;
+
+        td { height: 3em; padding: 0 1em; position: relative; vertical-align: middle; }
+        td:nth-child(1) { width: 30%; }
+        td:nth-child(2) { width: 70%; border-left: 0.1em solid $color-brick-light; }
+    }
+}