diff --git a/.gitignore b/.gitignore
index a39026ab88e91cb62fc29c0d6bdb8a180d51ee80..b7d6aa079609c904d9948e606b44b094e65ba7d1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,5 @@
 #bower components
 components/
 
+#navtree autogenerated folders
+data/
diff --git a/Gemfile b/Gemfile
index 8dc872dd9d7446fde1a1fd3eb2c1204e7fd36039..0cfc7d92cdc30770e3f5b585c9c560be5451757b 100644
--- a/Gemfile
+++ b/Gemfile
@@ -13,6 +13,7 @@ gem 'middleman-livereload'
 gem 'middleman', '~> 4.0'
 gem 'middleman-sprockets', '~> 4.0.0'
 gem 'middleman-syntax', '~> 3.0.0'
+gem 'middleman-navtree'
 
 # Markdown parser:
 gem 'redcarpet', '~> 3.3.4'
diff --git a/Gemfile.lock b/Gemfile.lock
index e3cd91e65b22e80dec440f7f9486dd4834ce9db4..cca6d8bfcca2cb45f55002ced64f3c7567c17a3a 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -77,6 +77,9 @@ GEM
       em-websocket (~> 0.5.1)
       middleman-core (>= 3.3)
       rack-livereload (~> 0.3.15)
+    middleman-navtree (0.1.11)
+      middleman-core (>= 3.3)
+      titleize (~> 1.3)
     middleman-sprockets (4.0.0)
       middleman-core (~> 4.0)
       sprockets (>= 3.0)
@@ -108,6 +111,7 @@ GEM
     thor (0.19.4)
     thread_safe (0.3.5)
     tilt (2.0.5)
+    titleize (1.4.1)
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
     uglifier (3.0.3)
@@ -119,6 +123,7 @@ PLATFORMS
 DEPENDENCIES
   middleman (~> 4.0)
   middleman-livereload
+  middleman-navtree
   middleman-sprockets (~> 4.0.0)
   middleman-syntax (~> 3.0.0)
   redcarpet (~> 3.3.4)
diff --git a/config.rb b/config.rb
index 8cee11f482c52b1d6f329ffdf4e12afc13f009c6..b9676ff174191c9087816fed99afc688515c414a 100644
--- a/config.rb
+++ b/config.rb
@@ -1,29 +1,3 @@
-patterns = resources.each_with_object({}) do |resource, result|
-  next unless resource.path.start_with?('patterns/')
-
-  resource.path =~ /^patterns\/(.+)\/(.+)\/.+$/
-  foldername = $1.downcase.parameterize
-  filename = $2.downcase.parameterize
-  path = "#{foldername}/#{filename}".to_sym
-
-  result[path] ||= []
-  result[path] << OpenStruct.new(
-    {
-      category: foldername.capitalize,
-      subcategory: filename.capitalize,
-      link: "/patterns/#{path}.html",
-      body: resource.render
-    }.merge(resource.data)
-  )
-end
-
-patterns.each do |path, patterns|
-  proxy "/patterns/#{path}.html", '/template.html',
-    locals: { patterns: patterns }
-end
-
-collection :patterns, patterns
-
 ###
 # Page options, layouts, aliases and proxies
 ###
@@ -45,67 +19,112 @@ page '/*.txt', layout: false
 # General configuration
 # Reload the browser automatically whenever files change
 configure :development do
-  activate :livereload
+    activate :livereload
 end
 
 # Middleman-Sprockets - https://github.com/middleman/middleman-sprockets
 activate :sprockets
 
 # Middleman-Syntax - https://github.com/middleman/middleman-syntax
-set :haml, { :ugly => false, :format => :html5 }
+set :haml, {:ugly => false, :format => :html5}
 set :markdown_engine, :redcarpet
 set :markdown, fenced_code_blocks: true, smartypants: true, footnotes: true,
-  link_attributes: { rel: 'nofollow' }, tables: true
+    link_attributes: {rel: 'nofollow'}, tables: true
 activate :syntax
 
+activate :navtree
+
 ###
 # Helpers
 ###
 
 # Methods defined in the helpers block are available in templates
 helpers do
-  def navigation
-    navigation = {}
-    collection(:patterns).values.flatten.each do |pattern|
-      key = pattern.category
-      navigation[key] ||= []
-      options = OpenStruct.new({
-        name: pattern.subcategory,
-        link: pattern.link
-      })
-      navigation[key] << options unless navigation[key].include?(options)
+    
+    def navigation(value, depth = Float::INFINITY, key = nil, level = 0)
+        html = ''
+        
+        if value.is_a?(String)
+            # This is a file.
+            # Get the Sitemap resource for this file.
+            # note: sitemap.extensionless_path converts the path to its 'post-build' extension.
+            
+            # Make sure the extension path ends with .html (in case we're parsing someting like .adoc)
+            extensionlessPath = sitemap.extensionless_path(value)
+            unless extensionlessPath.end_with? ".html"
+                extensionlessPath << ".html"
+            end
+            
+            this_resource = sitemap.find_resource_by_path(extensionlessPath)
+            if this_resource
+                # Define string for active states.
+                active = this_resource == current_page ? 'active' : ''
+                title = discover_title(this_resource)
+                link = link_to(title, this_resource)
+                html << "<li class='no-padding #{active}'>"
+                html << "<ul class='collapsible collapsible-accordion'>"
+                html << "<li class='bold'>"
+                html << "#{link}"
+                html << "</li></ul></li>"
+                # html << "<li class='child #{active}'>#{link}</li>"
+            end
+        else
+            # This is the first level source directory. We treat it special because
+            # it has no key and needs no list item.
+            if key.nil?
+                value.each do |newkey, child|
+                    html << navigation(child, depth, newkey, level + 1)
+                end
+                # Continue rendering deeper levels of the tree, unless restricted by depth.
+            elsif depth >= (level + 1)
+                # This is a directory.
+                # The directory has a key and should be listed in the page hieararcy with HTML.
+                dir_name = format_directory_name(key)
+                html << "<li class='no-padding #{active}'>"
+                html << "<ul class='collapsible collapsible-accordion'>"
+                html << "<li class='bold'>"
+                html << "<a class='collapsible-header waves-effect waves-teal'>"
+                html << "#{dir_name}"
+                html << "</a>"
+                html << "<div class='collapsible-body'>"
+                html << "<ul>"
+                
+                # Loop through all the directory's contents.
+                value.each do |newkey, child|
+                    html << navigation(child, depth, newkey, level + 1)
+                end
+                html << "</ul></div></li></ul></li>"
+            end
+        end
+        return html
     end
-    navigation
-  end
-
-  def page_title
-    if current_page.data.title.present?
-      current_page.data.title
-    else
-      current_page.locals[:patterns].first.subcategory
+    
+    def page_title
+        if current_page.data.title.present?
+            current_page.data.title
+        end
     end
-  end
 end
 
 # Add bower's directory to sprockets asset path
 after_configuration do
-  @bower_config = JSON.parse(IO.read("#{root}/.bowerrc"))
-  sprockets.append_path File.join "#{root}", @bower_config["directory"]
+    @bower_config = JSON.parse(IO.read("#{root}/.bowerrc"))
+    sprockets.append_path File.join "#{root}", @bower_config["directory"]
 end
 
 # Build-specific configuration
 configure :build do
-
-  # Minify CSS on build
-  # activate :minify_css
-
-  # Minify Javascript on build
-  # activate :minify_javascript
-
-  # Use relative URLs
-  # activate :relative_assets
-  # set :relative_links, true
-
-  # Ignoring Files
-  ignore '/template.html'
+    
+    # Minify CSS on build
+    # activate :minify_css
+    
+    # Minify Javascript on build
+    # activate :minify_javascript
+    
+    # Use relative URLs
+    # activate :relative_assets
+    # set :relative_links, true
+    
+    # Ignoring Files
+    ignore '/template.html'
 end
diff --git a/source/index.html.haml b/source/index.html.haml
index be925b2660ee37011f67a9f47bec6bbf37ac827d..6e2455ce6dc1122883d4a699a1ed48cea4b34495 100644
--- a/source/index.html.haml
+++ b/source/index.html.haml
@@ -3,7 +3,7 @@ title: Overview
 ---
 - content_for :additional_header do
   .row.center
-    %a#download-button.btn-large.waves-effect.waves-light{:href => "http://materializecss.com/getting-started.html"} Get Started
+    %a#download-button.btn-large.waves-effect.waves-light{:href => "http://materializecss.com/getting-started.html.haml"} Get Started
   .row.center
     %a.red-text.text-lighten-4{:href => "https://github.com/Syncleus/aparapi"} beta release v1.0.0
   .buysellads-header.buysellads-homepage.row.center
diff --git a/source/introduction/getting-started.html.haml b/source/introduction/getting-started.html.haml
new file mode 100644
index 0000000000000000000000000000000000000000..5c9e52136056717251f1f1bc0d46eafd75ad3c4a
--- /dev/null
+++ b/source/introduction/getting-started.html.haml
@@ -0,0 +1,4 @@
+---
+title: Getting Started
+---
+<div>Hello World!</div>
diff --git a/source/javascripts/search.js b/source/javascripts/search.js
index 965648fa067b6655a2b717fb4e3c1c9183c7452e..e414e76c7b8b85dfe205e342893f07915d931a30 100644
--- a/source/javascripts/search.js
+++ b/source/javascripts/search.js
@@ -98,7 +98,7 @@
     });
 
     window.index.add({
-      href: 'http://materializecss.com/getting-started.html',
+      href: 'http://materializecss.com/getting-started.html.haml',
       title: 'Getting Started',
       body: 'Learn how to easily start using Materialize in your website.'
     });
diff --git a/source/layout.html.haml b/source/layout.html.haml
index 09a434c1f08bae7322bf3b7a03f6c82c1755191a..4f577346d5ecb0fccb3531cc2c15b279c9c3476a 100644
--- a/source/layout.html.haml
+++ b/source/layout.html.haml
@@ -9,15 +9,15 @@
     %title
       Aparapi | #{page_title}
     / Favicons
-    %link{:href => "images/favicon/apple-touch-icon-152x152.png", :rel => "apple-touch-icon-precomposed"}/
+    %link{:href => "/images/favicon/apple-touch-icon-152x152.png", :rel => "apple-touch-icon-precomposed"}/
     %meta{:content => "#FFFFFF", :name => "msapplication-TileColor"}/
-    %meta{:content => "images/favicon/mstile-144x144.png", :name => "msapplication-TileImage"}/
-    %link{:href => "images/favicon/favicon-32x32.png", :rel => "icon", :sizes => "32x32"}/
+    %meta{:content => "/images/favicon/mstile-144x144.png", :name => "msapplication-TileImage"}/
+    %link{:href => "/images/favicon/favicon-32x32.png", :rel => "icon", :sizes => "32x32"}/
     / Android 5 Chrome Color
     %meta{:content => "#EE6E73", :name => "theme-color"}/
     / CSS
-    %link{:href => "stylesheets/prism.css", :rel => "stylesheet"}/
-    %link{:href => "stylesheets/ghpages-materialize.css", :media => "screen,projection", :rel => "stylesheet", :type => "text/css"}/
+    %link{:href => "/stylesheets/prism.css", :rel => "stylesheet"}/
+    %link{:href => "/stylesheets/ghpages-materialize.css", :media => "screen,projection", :rel => "stylesheet", :type => "text/css"}/
     %link{:href => "http://fonts.googleapis.com/css?family=Inconsolata", :rel => "stylesheet", :type => "text/css"}/
     %link{:href => "http://fonts.googleapis.com/icon?family=Material+Icons", :rel => "stylesheet"}/
   %body
@@ -28,38 +28,17 @@
       %ul#nav-mobile.side-nav.fixed
         %li.logo
           %a#logo-container.brand-logo{:href => "http://materializecss.com/"}
-            %object#front-page-logo{:data => "images/logo.svg", :type => "image/svg+xml"} Your browser does not support SVG
+            %object#front-page-logo{:data => "/images/logo.svg", :type => "image/svg+xml"} Your browser does not support SVG
         %li.search
           .search-wrapper.card
             %input#search/
             %i.material-icons search
             .search-results
-          %li.no-padding
-            %ul.collapsible.collapsible-accordion
-              %li.bold
-                %a.waves-effect.waves-teal
-                  = link_to 'Overview', '/index.html'
-
-        - navigation.each_with_index do |(category, subcategories), index|
-          %li.no-padding
-            %ul.collapsible.collapsible-accordion
-              %li.bold
-                %a.collapsible-header.waves-effect.waves-teal
-                  = category
-                .collapsible-body
-                  %ul
-                    - subcategories.each do |subcategory|
-                      %li
-                        = link_to subcategory[:name], subcategory.link, |
-                          class: 'mdl-navigation__link',
-                          data: { title: subcategory.name }
-                    - unless index == navigation.size - 1
-                      %li
-                        %div.divider
+        = navigation(data.tree)
     %main
       #index-banner.section.no-pad-bot
         .container
-          %h1.header.center-on-small-only Aparapi
+          %h1.header.center-on-small-only #{page_title}
           .row.center
             %h4.header.col.s12.light.center Open-source framework for executing native Java code on the GPU.
           = yield_content(:additional_header) if content_for?(:additional_header)
@@ -96,12 +75,12 @@
     %script{:src => "https://code.jquery.com/jquery-2.1.4.min.js"}
     :javascript
       if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
-    %script{:src => "javascripts/jquery.timeago.js"}
-    %script{:src => "javascripts/prism.js"}
-    %script{:src => "javascripts/lunr.min.js"}
-    %script{:src => "javascripts/search.js"}
-    %script{:src => "javascripts/materialize.js"}
-    %script{:src => "javascripts/init.js"}
+    %script{:src => "/javascripts/jquery.timeago.js"}
+    %script{:src => "/javascripts/prism.js"}
+    %script{:src => "/javascripts/lunr.min.js"}
+    %script{:src => "/javascripts/search.js"}
+    %script{:src => "/javascripts/materialize.js"}
+    %script{:src => "/javascripts/init.js"}
     / Twitter Button
     :javascript
       !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
diff --git a/source/patterns/components/alerts/default.html b/source/patterns/components/alerts/default.html
deleted file mode 100644
index 59b15e9bfbdd1ec6a2076f60fe1d9b903e579cb3..0000000000000000000000000000000000000000
--- a/source/patterns/components/alerts/default.html
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Default
-description: "Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four required contextual classes (e.g., .alert-success)."
----
-
-<div class="alert alert-success" role="alert">
-  <strong>Well done!</strong> You successfully read this important alert message.
-</div>
-
-<div class="alert alert-info" role="alert">
-  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
-</div>
-
-<div class="alert alert-warning" role="alert">
-  <strong>Warning!</strong> Better check yourself, you're not looking too good.
-</div>
-
-<div class="alert alert-danger" role="alert">
-  <strong>Oh snap!</strong> Change a few things up and try submitting again.
-</div>
diff --git a/source/patterns/components/alerts/link-color.html b/source/patterns/components/alerts/link-color.html
deleted file mode 100644
index ae9ad9eaf16f8b3369ad3d598690145241f738df..0000000000000000000000000000000000000000
--- a/source/patterns/components/alerts/link-color.html
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Link color
-description: Use the .alert-link utility class to quickly provide matching colored links within any alert.
----
-
-<div class="alert alert-success" role="alert">
-  <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
-</div>
-
-<div class="alert alert-info" role="alert">
-  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
-</div>
-
-<div class="alert alert-warning" role="alert">
-  <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
-</div>
-
-<div class="alert alert-danger" role="alert">
-  <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
-</div>
diff --git a/source/patterns/components/progress/contextual-alternatives.html b/source/patterns/components/progress/contextual-alternatives.html
deleted file mode 100644
index 67f52b06ec454aa0b1d98c6abe77118a81e58d7f..0000000000000000000000000000000000000000
--- a/source/patterns/components/progress/contextual-alternatives.html
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: Contextual alternatives
-description: Progress bars use some of the same button and alert classes for consistent styles.
----
-
-<progress class="progress progress-success" value="25" max="100">25%</progress>
-
-<progress class="progress progress-info" value="50" max="100">50%</progress>
-
-<progress class="progress progress-warning" value="75" max="100">75%</progress>
-
-<progress class="progress progress-danger" value="100" max="100">100%</progress>
diff --git a/source/patterns/components/progress/default.html b/source/patterns/components/progress/default.html
deleted file mode 100644
index 7599a431d9ee0086708a2468cb2bec132b2252b5..0000000000000000000000000000000000000000
--- a/source/patterns/components/progress/default.html
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Default
----
-
-<progress class="progress" value="0" max="100">0%</progress>
-
-<progress class="progress" value="25" max="100">25%</progress>
-
-<progress class="progress" value="50" max="100">50%</progress>
-
-<progress class="progress" value="75" max="100">75%</progress>
-
-<progress class="progress" value="100" max="100">100%</progress>
diff --git a/source/patterns/components/progress/striped.html b/source/patterns/components/progress/striped.html
deleted file mode 100644
index fc56845a09cf25c843f4a0d07acc3f81d41055d2..0000000000000000000000000000000000000000
--- a/source/patterns/components/progress/striped.html
+++ /dev/null
@@ -1,14 +0,0 @@
----
-title: Striped
-description: Uses a gradient to create a striped effect.
----
-
-<progress class="progress progress-striped" value="10" max="100">10%</progress>
-
-<progress class="progress progress-striped progress-success" value="25" max="100">25%</progress>
-
-<progress class="progress progress-striped progress-info" value="50" max="100">50%</progress>
-
-<progress class="progress progress-striped progress-warning" value="75" max="100">75%</progress>
-
-<progress class="progress progress-striped progress-danger" value="100" max="100">100%</progress>
diff --git a/source/patterns/elements/buttons/default.html b/source/patterns/elements/buttons/default.html
deleted file mode 100644
index 9991d53b9d2c62213d69db81a82f934c9f1ddfd7..0000000000000000000000000000000000000000
--- a/source/patterns/elements/buttons/default.html
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Default
-description: Bootstrap includes six predefined button styles, each serving its own semantic purpose.
----
-
-<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
-<button type="button" class="btn btn-primary">Primary</button>
-
-<!-- Secondary, outline button -->
-<button type="button" class="btn btn-secondary">Secondary</button>
-
-<!-- Indicates a successful or positive action -->
-<button type="button" class="btn btn-success">Success</button>
-
-<!-- Contextual button for informational alert messages -->
-<button type="button" class="btn btn-info">Info</button>
-
-<!-- Indicates caution should be taken with this action -->
-<button type="button" class="btn btn-warning">Warning</button>
-
-<!-- Indicates a dangerous or potentially negative action -->
-<button type="button" class="btn btn-danger">Danger</button>
-
-<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
-<button type="button" class="btn btn-link">Link</button>
diff --git a/source/patterns/elements/buttons/disabled.html b/source/patterns/elements/buttons/disabled.html
deleted file mode 100644
index 5cd93bb316ea9d93f42fcbc7e0d0a64117f94eae..0000000000000000000000000000000000000000
--- a/source/patterns/elements/buttons/disabled.html
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Disabled state
-description: Make buttons look inactive by adding the disabled boolean attribute to any &lt;button&gt; element.
----
-
-<button type="button" class="btn btn-primary" disabled>Primary button</button>
-
-<button type="button" class="btn btn-secondary" disabled>Button</button>
diff --git a/source/patterns/elements/buttons/outline.html b/source/patterns/elements/buttons/outline.html
deleted file mode 100644
index abb8f1bfb45bf43c2a44d56d4997eba0f0b30a19..0000000000000000000000000000000000000000
--- a/source/patterns/elements/buttons/outline.html
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: Outline buttons
-description: In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-*-outline ones to remove all background images and colors on any button.
----
-
-<button type="button" class="btn btn-outline-primary">Primary</button>
-
-<button type="button" class="btn btn-outline-secondary">Secondary</button>
-
-<button type="button" class="btn btn-outline-success">Success</button>
-
-<button type="button" class="btn btn-outline-info">Info</button>
-
-<button type="button" class="btn btn-outline-warning">Warning</button>
-
-<button type="button" class="btn btn-outline-danger">Danger</button>
diff --git a/source/patterns/elements/buttons/sizes.html b/source/patterns/elements/buttons/sizes.html
deleted file mode 100644
index bc9bf1fa4ddf06c33d650a5dff2838480f9f85da..0000000000000000000000000000000000000000
--- a/source/patterns/elements/buttons/sizes.html
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: Sizes
-description: Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.
----
-
-<button type="button" class="btn btn-primary btn-lg">Large button</button>
-
-<button type="button" class="btn btn-secondary btn-lg">Large button</button>
-
-<button type="button" class="btn btn-primary btn-sm">Small button</button>
-
-<button type="button" class="btn btn-secondary btn-sm">Small button</button>
diff --git a/source/patterns/elements/colors/color-palette.html b/source/patterns/elements/colors/color-palette.html
deleted file mode 100644
index bfa265e4fc01038d560e89b1f8c26bfcde480c58..0000000000000000000000000000000000000000
--- a/source/patterns/elements/colors/color-palette.html
+++ /dev/null
@@ -1,155 +0,0 @@
----
-title: Color palette
-description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-show_code: false
-use_source: false
----
-
-<div class="mpl-color-palette">
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #F44336;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Red</h2>
-    </div>
-    <div class="mdl-card__menu">#F44336</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #E91E63;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Pink</h2>
-    </div>
-    <div class="mdl-card__menu">#E91E63</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #9C27B0;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Purple</h2>
-    </div>
-    <div class="mdl-card__menu">#9C27B0</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #673AB7;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Deep Purple</h2>
-    </div>
-    <div class="mdl-card__menu">#673AB7</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #3F51B5;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Indigo</h2>
-    </div>
-    <div class="mdl-card__menu">#3F51B5</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #2196F3;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Blue</h2>
-    </div>
-    <div class="mdl-card__menu">#2196F3</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #03A9F4;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Light Blue</h2>
-    </div>
-    <div class="mdl-card__menu">#03A9F4</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #00BCD4;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Cyan</h2>
-    </div>
-    <div class="mdl-card__menu">#00BCD4</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #009688;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Teal</h2>
-    </div>
-    <div class="mdl-card__menu">#009688</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #4CAF50;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Green</h2>
-    </div>
-    <div class="mdl-card__menu">#4CAF50</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #8BC34A;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Light Green</h2>
-    </div>
-    <div class="mdl-card__menu">#8BC34A</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #CDDC39;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Lime</h2>
-    </div>
-    <div class="mdl-card__menu">#CDDC39</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #FFEB3B;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Yellow</h2>
-    </div>
-    <div class="mdl-card__menu">#FFEB3B</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #FFC107;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Amber</h2>
-    </div>
-    <div class="mdl-card__menu">#FFC107</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #FF9800;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Orange</h2>
-    </div>
-    <div class="mdl-card__menu">#FF9800</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #FF5722;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Deep Orange</h2>
-    </div>
-    <div class="mdl-card__menu">#FF5722</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #795548;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Brown</h2>
-    </div>
-    <div class="mdl-card__menu">#795548</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #9E9E9E;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Grey</h2>
-    </div>
-    <div class="mdl-card__menu">#9E9E9E</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #607D8B;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Blue Grey</h2>
-    </div>
-    <div class="mdl-card__menu">#607D8B</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #000000;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">Black</h2>
-    </div>
-    <div class="mdl-card__menu">#000000</div>
-  </div>
-
-  <div class="mdl-card mdl-shadow--2dp" style="background-color: #FFFFFF;">
-    <div class="mdl-card__title mdl-card--expand">
-      <h2 class="mdl-card__title-text">White</h2>
-    </div>
-    <div class="mdl-card__menu">#FFFFFF</div>
-  </div>
-</div>
diff --git a/source/patterns/elements/typography/blockquotes.html b/source/patterns/elements/typography/blockquotes.html
deleted file mode 100644
index 41cb62e0a87bbff4983faebd4c60437ebadd4dd0..0000000000000000000000000000000000000000
--- a/source/patterns/elements/typography/blockquotes.html
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Blockquotes
-description: For quoting blocks of content from another source within your document.
----
-
-<blockquote class="blockquote">
-  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-</blockquote>
diff --git a/source/patterns/elements/typography/customizing-headings.html b/source/patterns/elements/typography/customizing-headings.html
deleted file mode 100644
index 0a69e44a0a8301005f9737f68850ceb0d5e4f452..0000000000000000000000000000000000000000
--- a/source/patterns/elements/typography/customizing-headings.html
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Customizing headings
-description: Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
----
-
-<h3>
-  Fancy display heading
-  <small class="text-muted">With faded secondary text</small>
-</h3>
diff --git a/source/patterns/elements/typography/headings.html b/source/patterns/elements/typography/headings.html
deleted file mode 100644
index c0bcc1c373e69cb1320660278c6bbe9b247b9529..0000000000000000000000000000000000000000
--- a/source/patterns/elements/typography/headings.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Headings
-description: All HTML headings, &lt;h1&gt; through &lt;h6&gt;, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
----
-
-<h1>Heading 1</h1>
-<h2>Heading 2</h2>
-<h3>Heading 3</h3>
-<h4>Heading 4</h4>
-<h5>Heading 5</h5>
-<h6>Heading 6</h6>
diff --git a/source/patterns/elements/typography/inline-text-elements.html b/source/patterns/elements/typography/inline-text-elements.html
deleted file mode 100644
index 71d406f0d97fb4e3e7d7cc36392a01f2376b7dbf..0000000000000000000000000000000000000000
--- a/source/patterns/elements/typography/inline-text-elements.html
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Inline text elements
-description: Styling for common inline HTML5 elements.
----
-
-<p>You can use the mark tag to <mark>highlight</mark> text.</p>
-<p><del>This line of text is meant to be treated as deleted text.</del></p>
-<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
-<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
-<p><u>This line of text will render as underlined</u></p>
-<p><small>This line of text is meant to be treated as fine print.</small></p>
-<p><strong>This line rendered as bold text.</strong></p>
-<p><em>This line rendered as italicized text.</em></p>
diff --git a/source/patterns/elements/typography/lead.html b/source/patterns/elements/typography/lead.html
deleted file mode 100644
index 044f0f2e8b318259ec4bb8d0f425ac0909d90b7e..0000000000000000000000000000000000000000
--- a/source/patterns/elements/typography/lead.html
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Lead
-description: Make a paragraph stand out by adding .lead.
----
-
-<p class="lead">
-  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
-</p>
diff --git a/source/template.html.haml b/source/template.html.haml
deleted file mode 100644
index a8c9a750c3b245bcfdeaf929d179cdcdb69f53c5..0000000000000000000000000000000000000000
--- a/source/template.html.haml
+++ /dev/null
@@ -1,32 +0,0 @@
-- if patterns.size > 1
-  - content_for :tab_navigation do
-    .mdl-layout__tab-bar.mdl-js-ripple-effect
-      - patterns.each_with_index do |pattern, index|
-        - css_class = %w(mdl-layout__tab)
-        - css_class << 'is-active' if index == 0
-        %a{:class => css_class.join(' '), :href => "#tab-#{pattern.title.parameterize}"}
-          = pattern.title
-- patterns.each_with_index do |pattern, index|
-  - css_class = %w(mdl-layout__tab-panel)
-  - css_class << 'is-active' if index == 0
-  %section{:class => css_class.join(' '), :id => "tab-#{pattern.title.parameterize}"}
-    .page-content
-      .mpl-card-pattern.mdl-card.mdl-shadow--2dp
-        .mdl-card__title.mdl-card--expand
-          %h2.mdl-card__title-text
-            = pattern.title
-        .mdl-card__supporting-text
-          - if pattern.description.present?
-            = pattern.description
-            %hr/
-          .mpl-layout__source
-            - if pattern.use_source == false
-              = pattern.body
-            - else
-              %div{"data-iframe" => ""}
-                = pattern.body
-                = stylesheet_link_tag 'base'
-                = javascript_include_tag 'base'
-          - if pattern.show_code != false
-            %hr/
-            = code('html') { pattern.body }
\ No newline at end of file