- clean up and make consistent across wiki tutorials

- update templates and static assets for new design

21 files changed, 410 insertions, 595 deletions

diff --git a/docs/tutorials/wiki/authorization.rst b/docs/tutorials/wiki/authorization.rst
index 161e251bc..b0a8c155d 100644
--- a/docs/tutorials/wiki/authorization.rst
+++ b/docs/tutorials/wiki/authorization.rst
@@ -338,7 +338,7 @@ we're done:
 
 Only the highlighted lines need to be added or edited.
 
-Viewing the Application in a Browser
+Viewing the application in a browser
 ------------------------------------
 
 We can finally examine our application in a browser (See
diff --git a/docs/tutorials/wiki/definingviews.rst b/docs/tutorials/wiki/definingviews.rst
index 2ebddd4c8..ed173a706 100644
--- a/docs/tutorials/wiki/definingviews.rst
+++ b/docs/tutorials/wiki/definingviews.rst
@@ -352,7 +352,7 @@ The form POSTs back to the ``save_url`` argument supplied by the view (line
    See :ref:`renderer_system_values` for information about other names that
    are available by default when a template is used as a renderer.
 
-Static Assets
+Static assets
 -------------
 
 Our templates name static assets, including CSS and images.  We don't need
@@ -367,26 +367,25 @@ subdirectories) and are just referred to by URL or by using the convenience
 method ``static_url``, e.g.,
 ``request.static_url('<package>:static/foo.css')`` within templates.
 
-Viewing the Application in a Browser
+Viewing the application in a browser
 ====================================
 
 We can finally examine our application in a browser (See
 :ref:`wiki-start-the-application`).  Launch a browser and visit
 each of the following URLs, checking that the result is as expected:
 
-- ``http://localhost:6543/`` invokes the ``view_wiki`` view.  This always
+- http://localhost:6543/ invokes the ``view_wiki`` view.  This always
   redirects to the ``view_page`` view of the ``FrontPage`` Page resource.
 
-- ``http://localhost:6543/FrontPage/`` invokes the ``view_page`` view of the
-  front page resource.  This is because it's the :term:`default view` (a view
+- http://localhost:6543/FrontPage/ invokes the ``view_page`` view of the front
+  page resource.  This is because it's the :term:`default view` (a view
   without a ``name``) for Page resources.
 
-- ``http://localhost:6543/FrontPage/edit_page`` invokes the edit view for the
+- http://localhost:6543/FrontPage/edit_page invokes the edit view for the
   ``FrontPage`` Page resource.
 
-- ``http://localhost:6543/add_page/SomePageName`` invokes the add view for a
-  Page.
+- http://localhost:6543/add_page/SomePageName invokes the add view for a Page.
 
-- To generate an error, visit ``http://localhost:6543/add_page`` which will
+- To generate an error, visit http://localhost:6543/add_page which will
   generate an ``IndexErrorr: tuple index out of range`` error. You'll see an
   interactive traceback facility provided by :term:`pyramid_debugtoolbar`.
diff --git a/docs/tutorials/wiki/src/tests/tutorial/static/favicon.ico b/docs/tutorials/wiki/src/tests/tutorial/static/favicon.ico
deleted file mode 100644
index 71f837c9e..000000000
--- a/docs/tutorials/wiki/src/tests/tutorial/static/favicon.ico
+++ /dev/null
diff --git a/docs/tutorials/wiki/src/tests/tutorial/static/footerbg.png b/docs/tutorials/wiki/src/tests/tutorial/static/footerbg.png
deleted file mode 100644
index 1fbc873da..000000000
--- a/docs/tutorials/wiki/src/tests/tutorial/static/footerbg.png
+++ /dev/null
diff --git a/docs/tutorials/wiki/src/tests/tutorial/static/headerbg.png b/docs/tutorials/wiki/src/tests/tutorial/static/headerbg.png
deleted file mode 100644
index 0596f2020..000000000
--- a/docs/tutorials/wiki/src/tests/tutorial/static/headerbg.png
+++ /dev/null
diff --git a/docs/tutorials/wiki/src/tests/tutorial/static/ie6.css b/docs/tutorials/wiki/src/tests/tutorial/static/ie6.css
deleted file mode 100644
index b7c8493d8..000000000
--- a/docs/tutorials/wiki/src/tests/tutorial/static/ie6.css
+++ /dev/null
@@ -1,8 +0,0 @@
-* html img,
-* html .png{position:relative;behavior:expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
-this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "',sizingMethod='image')",
-this.src = "static/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
-this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "',sizingMethod='crop')",
-this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
-);}
-#wrap{display:table;height:100%}
diff --git a/docs/tutorials/wiki/src/tests/tutorial/static/middlebg.png b/docs/tutorials/wiki/src/tests/tutorial/static/middlebg.png
deleted file mode 100644
index 2369cfb7d..000000000
--- a/docs/tutorials/wiki/src/tests/tutorial/static/middlebg.png
+++ /dev/null
diff --git a/docs/tutorials/wiki/src/tests/tutorial/static/pylons.css b/docs/tutorials/wiki/src/tests/tutorial/static/pylons.css
deleted file mode 100644
index 4b1c017cd..000000000
--- a/docs/tutorials/wiki/src/tests/tutorial/static/pylons.css
+++ /dev/null
@@ -1,372 +0,0 @@
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
-{
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  font-size: 100%; /* 16px */
-  vertical-align: baseline;
-  background: transparent;
-}
-
-body
-{
-  line-height: 1;
-}
-
-ol, ul
-{
-  list-style: none;
-}
-
-blockquote, q
-{
-  quotes: none;
-}
-
-blockquote:before, blockquote:after, q:before, q:after
-{
-  content: '';
-  content: none;
-}
-
-:focus
-{
-  outline: 0;
-}
-
-ins
-{
-  text-decoration: none;
-}
-
-del
-{
-  text-decoration: line-through;
-}
-
-table
-{
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-sub
-{
-  vertical-align: sub;
-  font-size: smaller;
-  line-height: normal;
-}
-
-sup
-{
-  vertical-align: super;
-  font-size: smaller;
-  line-height: normal;
-}
-
-ul, menu, dir
-{
-  display: block;
-  list-style-type: disc;
-  margin: 1em 0;
-  padding-left: 40px;
-}
-
-ol
-{
-  display: block;
-  list-style-type: decimal-leading-zero;
-  margin: 1em 0;
-  padding-left: 40px;
-}
-
-li
-{
-  display: list-item;
-}
-
-ul ul, ul ol, ul dir, ul menu, ul dl, ol ul, ol ol, ol dir, ol menu, ol dl, dir ul, dir ol, dir dir, dir menu, dir dl, menu ul, menu ol, menu dir, menu menu, menu dl, dl ul, dl ol, dl dir, dl menu, dl dl
-{
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-ol ul, ul ul, menu ul, dir ul, ol menu, ul menu, menu menu, dir menu, ol dir, ul dir, menu dir, dir dir
-{
-  list-style-type: circle;
-}
-
-ol ol ul, ol ul ul, ol menu ul, ol dir ul, ol ol menu, ol ul menu, ol menu menu, ol dir menu, ol ol dir, ol ul dir, ol menu dir, ol dir dir, ul ol ul, ul ul ul, ul menu ul, ul dir ul, ul ol menu, ul ul menu, ul menu menu, ul dir menu, ul ol dir, ul ul dir, ul menu dir, ul dir dir, menu ol ul, menu ul ul, menu menu ul, menu dir ul, menu ol menu, menu ul menu, menu menu menu, menu dir menu, menu ol dir, menu ul dir, menu menu dir, menu dir dir, dir ol ul, dir ul ul, dir menu ul, dir dir ul, dir ol menu, dir ul menu, dir menu menu, dir dir menu, dir ol dir, dir ul dir, dir menu dir, dir dir dir
-{
-  list-style-type: square;
-}
-
-.hidden
-{
-  display: none;
-}
-
-p
-{
-  line-height: 1.5em;
-}
-
-h1
-{
-  font-size: 1.75em;
-  line-height: 1.7em;
-  font-family: helvetica, verdana;
-}
-
-h2
-{
-  font-size: 1.5em;
-  line-height: 1.7em;
-  font-family: helvetica, verdana;
-}
-
-h3
-{
-  font-size: 1.25em;
-  line-height: 1.7em;
-  font-family: helvetica, verdana;
-}
-
-h4
-{
-  font-size: 1em;
-  line-height: 1.7em;
-  font-family: helvetica, verdana;
-}
-
-html, body
-{
-  width: 100%;
-  height: 100%;
-}
-
-body
-{
-  margin: 0;
-  padding: 0;
-  background-color: #fff;
-  position: relative;
-  font: 16px/24px NobileRegular, "Lucida Grande", Lucida, Verdana, sans-serif;
-}
-
-a
-{
-  color: #1b61d6;
-  text-decoration: none;
-}
-
-a:hover
-{
-  color: #e88f00;
-  text-decoration: underline;
-}
-
-body h1, body h2, body h3, body h4, body h5, body h6
-{
-  font-family: NeutonRegular, "Lucida Grande", Lucida, Verdana, sans-serif;
-  font-weight: 400;
-  color: #373839;
-  font-style: normal;
-}
-
-#wrap
-{
-  min-height: 100%;
-}
-
-#header, #footer
-{
-  width: 100%;
-  color: #fff;
-  height: 40px;
-  position: absolute;
-  text-align: center;
-  line-height: 40px;
-  overflow: hidden;
-  font-size: 12px;
-  vertical-align: middle;
-}
-
-#header
-{
-  background: #000;
-  top: 0;
-  font-size: 14px;
-}
-
-#footer
-{
-  bottom: 0;
-  background: #000 url(footerbg.png) repeat-x 0 top;
-  position: relative;
-  margin-top: -40px;
-  clear: both;
-}
-
-.header, .footer
-{
-  width: 750px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.wrapper
-{
-  width: 100%;
-}
-
-#top, #top-small, #bottom
-{
-  width: 100%;
-}
-
-#top
-{
-  color: #000;
-  height: 230px;
-  background: #fff url(headerbg.png) repeat-x 0 top;
-  position: relative;
-}
-
-#top-small
-{
-  color: #000;
-  height: 60px;
-  background: #fff url(headerbg.png) repeat-x 0 top;
-  position: relative;
-}
-
-#bottom
-{
-  color: #222;
-  background-color: #fff;
-}
-
-.top, .top-small, .middle, .bottom
-{
-  width: 750px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.top
-{
-  padding-top: 40px;
-}
-
-.top-small
-{
-  padding-top: 10px;
-}
-
-#middle
-{
-  width: 100%;
-  height: 100px;
-  background: url(middlebg.png) repeat-x;
-  border-top: 2px solid #fff;
-  border-bottom: 2px solid #b2b2b2;
-}
-
-.app-welcome
-{
-  margin-top: 25px;
-}
-
-.app-name
-{
-  color: #000;
-  font-weight: 700;
-}
-
-.bottom
-{
-  padding-top: 50px;
-}
-
-#left
-{
-  width: 350px;
-  float: left;
-  padding-right: 25px;
-}
-
-#right
-{
-  width: 350px;
-  float: right;
-  padding-left: 25px;
-}
-
-.align-left
-{
-  text-align: left;
-}
-
-.align-right
-{
-  text-align: right;
-}
-
-.align-center
-{
-  text-align: center;
-}
-
-ul.links
-{
-  margin: 0;
-  padding: 0;
-}
-
-ul.links li
-{
-  list-style-type: none;
-  font-size: 14px;
-}
-
-form
-{
-  border-style: none;
-}
-
-fieldset
-{
-  border-style: none;
-}
-
-input
-{
-  color: #222;
-  border: 1px solid #ccc;
-  font-family: sans-serif;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-input[type=text], input[type=password]
-{
-  width: 205px;
-}
-
-input[type=submit]
-{
-  background-color: #ddd;
-  font-weight: 700;
-}
-
-/*Opera Fix*/
-body:before
-{
-  content: "";
-  height: 100%;
-  float: left;
-  width: 0;
-  margin-top: -32767px;
-}
diff --git a/docs/tutorials/wiki/src/tests/tutorial/static/pyramid-16x16.png b/docs/tutorials/wiki/src/tests/tutorial/static/pyramid-16x16.png
new file mode 100644
index 000000000..979203112
--- /dev/null
+++ b/docs/tutorials/wiki/src/tests/tutorial/static/pyramid-16x16.png
diff --git a/docs/tutorials/wiki/src/tests/tutorial/static/pyramid-small.png b/docs/tutorials/wiki/src/tests/tutorial/static/pyramid-small.png
deleted file mode 100644
index a5bc0ade7..000000000
--- a/docs/tutorials/wiki/src/tests/tutorial/static/pyramid-small.png
+++ /dev/null
diff --git a/docs/tutorials/wiki/src/tests/tutorial/static/pyramid.png b/docs/tutorials/wiki/src/tests/tutorial/static/pyramid.png
index 347e05549..4ab837be9 100644
--- a/docs/tutorials/wiki/src/tests/tutorial/static/pyramid.png
+++ b/docs/tutorials/wiki/src/tests/tutorial/static/pyramid.png
diff --git a/docs/tutorials/wiki/src/tests/tutorial/static/theme.css b/docs/tutorials/wiki/src/tests/tutorial/static/theme.css
new file mode 100644
index 000000000..0f4b1a4d4
--- /dev/null
+++ b/docs/tutorials/wiki/src/tests/tutorial/static/theme.css
@@ -0,0 +1,154 @@
+@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
+body {
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 300;
+  color: #ffffff;
+  background: #bc2131;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 300;
+}
+p {
+  font-weight: 300;
+}
+.font-normal {
+  font-weight: 400;
+}
+.font-semi-bold {
+  font-weight: 600;
+}
+.font-bold {
+  font-weight: 700;
+}
+.starter-template {
+  margin-top: 250px;
+}
+.starter-template .content {
+  margin-left: 10px;
+}
+.starter-template .content h1 {
+  margin-top: 10px;
+  font-size: 60px;
+}
+.starter-template .content h1 .smaller {
+  font-size: 40px;
+  color: #f2b7bd;
+}
+.starter-template .content .lead {
+  font-size: 25px;
+  color: #f2b7bd;
+}
+.starter-template .content .lead .font-normal {
+  color: #ffffff;
+}
+.starter-template .links {
+  float: right;
+  right: 0;
+  margin-top: 125px;
+}
+.starter-template .links ul {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+.starter-template .links ul li {
+  list-style: none;
+  display: inline;
+  margin: 0 10px;
+}
+.starter-template .links ul li:first-child {
+  margin-left: 0;
+}
+.starter-template .links ul li:last-child {
+  margin-right: 0;
+}
+.starter-template .links ul li.current-version {
+  color: #f2b7bd;
+  font-weight: 400;
+}
+.starter-template .links ul li a, a {
+  color: #f2b7bd;
+  text-decoration: underline;
+}
+.starter-template .links ul li a:hover, a:hover {
+  color: #ffffff;
+  text-decoration: underline;
+}
+.starter-template .links ul li .icon-muted {
+  color: #eb8b95;
+  margin-right: 5px;
+}
+.starter-template .links ul li:hover .icon-muted {
+  color: #ffffff;
+}
+.starter-template .copyright {
+  margin-top: 10px;
+  font-size: 0.9em;
+  color: #f2b7bd;
+  text-transform: lowercase;
+  float: right;
+  right: 0;
+}
+@media (max-width: 1199px) {
+  .starter-template .content h1 {
+    font-size: 45px;
+  }
+  .starter-template .content h1 .smaller {
+    font-size: 30px;
+  }
+  .starter-template .content .lead {
+    font-size: 20px;
+  }
+}
+@media (max-width: 991px) {
+  .starter-template {
+    margin-top: 0;
+  }
+  .starter-template .logo {
+    margin: 40px auto;
+  }
+  .starter-template .content {
+    margin-left: 0;
+    text-align: center;
+  }
+  .starter-template .content h1 {
+    margin-bottom: 20px;
+  }
+  .starter-template .links {
+    float: none;
+    text-align: center;
+    margin-top: 60px;
+  }
+  .starter-template .copyright {
+    float: none;
+    text-align: center;
+  }
+}
+@media (max-width: 767px) {
+  .starter-template .content h1 .smaller {
+    font-size: 25px;
+    display: block;
+  }
+  .starter-template .content .lead {
+    font-size: 16px;
+  }
+  .starter-template .links {
+    margin-top: 40px;
+  }
+  .starter-template .links ul li {
+    display: block;
+    margin: 0;
+  }
+  .starter-template .links ul li .icon-muted {
+    display: none;
+  }
+  .starter-template .copyright {
+    margin-top: 20px;
+  }
+}
diff --git a/docs/tutorials/wiki/src/tests/tutorial/static/theme.min.css b/docs/tutorials/wiki/src/tests/tutorial/static/theme.min.css
new file mode 100644
index 000000000..2f924bcc5
--- /dev/null
+++ b/docs/tutorials/wiki/src/tests/tutorial/static/theme.min.css
@@ -0,0 +1 @@
+@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);body{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;color:#fff;background:#bc2131}h1,h2,h3,h4,h5,h6{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300}p{font-weight:300}.font-normal{font-weight:400}.font-semi-bold{font-weight:600}.font-bold{font-weight:700}.starter-template{margin-top:250px}.starter-template .content{margin-left:10px}.starter-template .content h1{margin-top:10px;font-size:60px}.starter-template .content h1 .smaller{font-size:40px;color:#f2b7bd}.starter-template .content .lead{font-size:25px;color:#f2b7bd}.starter-template .content .lead .font-normal{color:#fff}.starter-template .links{float:right;right:0;margin-top:125px}.starter-template .links ul{display:block;padding:0;margin:0}.starter-template .links ul li{list-style:none;display:inline;margin:0 10px}.starter-template .links ul li:first-child{margin-left:0}.starter-template .links ul li:last-child{margin-right:0}.starter-template .links ul li.current-version{color:#f2b7bd;font-weight:400}.starter-template .links ul li a{color:#fff}.starter-template .links ul li a:hover{text-decoration:underline}.starter-template .links ul li .icon-muted{color:#eb8b95;margin-right:5px}.starter-template .links ul li:hover .icon-muted{color:#fff}.starter-template .copyright{margin-top:10px;font-size:.9em;color:#f2b7bd;text-transform:lowercase;float:right;right:0}@media (max-width:1199px){.starter-template .content h1{font-size:45px}.starter-template .content h1 .smaller{font-size:30px}.starter-template .content .lead{font-size:20px}}@media (max-width:991px){.starter-template{margin-top:0}.starter-template .logo{margin:40px auto}.starter-template .content{margin-left:0;text-align:center}.starter-template .content h1{margin-bottom:20px}.starter-template .links{float:none;text-align:center;margin-top:60px}.starter-template .copyright{float:none;text-align:center}}@media (max-width:767px){.starter-template .content h1 .smaller{font-size:25px;display:block}.starter-template .content .lead{font-size:16px}.starter-template .links{margin-top:40px}.starter-template .links ul li{display:block;margin:0}.starter-template .links ul li .icon-muted{display:none}.starter-template .copyright{margin-top:20px}}
\ No newline at end of file
diff --git a/docs/tutorials/wiki/src/tests/tutorial/static/transparent.gif b/docs/tutorials/wiki/src/tests/tutorial/static/transparent.gif
deleted file mode 100644
index 0341802e5..000000000
--- a/docs/tutorials/wiki/src/tests/tutorial/static/transparent.gif
+++ /dev/null
diff --git a/docs/tutorials/wiki/src/tests/tutorial/templates/edit.pt b/docs/tutorials/wiki/src/tests/tutorial/templates/edit.pt
index c3a0acf6b..823fa8972 100644
--- a/docs/tutorials/wiki/src/tests/tutorial/templates/edit.pt
+++ b/docs/tutorials/wiki/src/tests/tutorial/templates/edit.pt
@@ -1,58 +1,72 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
-      xmlns:tal="http://xml.zope.org/namespaces/tal">
-<head>
-  <title>${page.__name__} - Pyramid tutorial wiki (based on
-      TurboGears 20-Minute Wiki)</title>
-  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
-  <meta name="keywords" content="python web application" />
-  <meta name="description" content="pyramid web application" />
-  <link rel="shortcut icon"
-        href="/static/favicon.ico" />
-  <link rel="stylesheet"
-        href="/static/pylons.css"
-        type="text/css" media="screen" charset="utf-8" />
-  <!--[if lte IE 6]>
-  <link rel="stylesheet"
-        href="/static/ie6.css"
-        type="text/css" media="screen" charset="utf-8" />
-  <![endif]-->
-</head>
-<body>
-  <div id="wrap">
-    <div id="top-small">
-      <div class="top-small align-center">
-        <div>
-          <img width="220" height="50" alt="pyramid"
-        src="/static/pyramid-small.png" />
+<!DOCTYPE html>
+<html lang="${request.locale_name}">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="pyramid web application">
+    <meta name="author" content="Pylons Project">
+    <link rel="shortcut icon" href="${request.static_url('tutorial:static/pyramid-16x16.png')}">
+
+    <title>${page.__name__} - Pyramid tutorial wiki (based on
+    TurboGears 20-Minute Wiki)</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Custom styles for this scaffold -->
+    <link href="${request.static_url('tutorial:static/theme.css')}" rel="stylesheet">
+
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+      <script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+
+    <div class="starter-template">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-2">
+            <img class="logo img-responsive" src="${request.static_url('tutorial:static/pyramid.png')}" alt="pyramid web framework">
+          </div>
+          <div class="col-md-10">
+            <div class="content">
+              <p tal:condition="logged_in" class="pull-right">
+                <a href="${request.application_url}/logout">Logout</a>
+              </p>
+              <p>
+                  Editing <strong><span tal:replace="page.__name__">
+                  Page Name Goes Here</span></strong>
+              </p>
+              <p>You can return to the
+                <a href="${request.application_url}">FrontPage</a>.
+              </p>
+              <form action="${save_url}" method="post">
+                <div class="form-group">
+                  <textarea class="form-control" name="body" tal:content="page.data" rows="10" cols="60"></textarea>
+                </div>
+                <div class="form-group">
+                  <button type="submit" name="form.submitted" value="Save" class="btn btn-default">Save</button>
+                </div>
+              </form>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-    <div id="middle">
-      <div class="middle align-right">
-        <div id="left" class="app-welcome align-left">
-          Editing <b><span tal:replace="page.__name__">Page Name
-            Goes Here</span></b><br/>
-          You can return to the
-          <a href="${request.application_url}">FrontPage</a>.<br/>
-        </div>
-        <div id="right" class="app-welcome align-right">
-          <span tal:condition="logged_in">
-              <a href="${request.application_url}/logout">Logout</a>
-          </span>
+        <div class="row">
+          <div class="copyright">
+            Copyright &copy; Pylons Project
+          </div>
         </div>
       </div>
     </div>
-    <div id="bottom">
-      <div class="bottom">
-        <form action="${save_url}" method="post">
-          <textarea name="body" tal:content="page.data" rows="10"
-                    cols="60"/><br/>
-          <input type="submit" name="form.submitted" value="Save"/>
-        </form>
-      </div>
-    </div>
-  </div>
-</body>
+
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="//oss.maxcdn.com/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
+  </body>
 </html>
diff --git a/docs/tutorials/wiki/src/tests/tutorial/templates/login.pt b/docs/tutorials/wiki/src/tests/tutorial/templates/login.pt
index 3612dccde..4a938e9bb 100644
--- a/docs/tutorials/wiki/src/tests/tutorial/templates/login.pt
+++ b/docs/tutorials/wiki/src/tests/tutorial/templates/login.pt
@@ -1,54 +1,74 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
-      xmlns:tal="http://xml.zope.org/namespaces/tal">
-<head>
-  <title>Login - Pyramid tutorial wiki (based on TurboGears
-    20-Minute Wiki)</title>
-  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
-  <meta name="keywords" content="python web application" />
-  <meta name="description" content="pyramid web application" />
-  <link rel="shortcut icon"
-        href="/static/favicon.ico" />
-  <link rel="stylesheet"
-        href="/static/pylons.css"
-        type="text/css" media="screen" charset="utf-8" />
-  <!--[if lte IE 6]>
-  <link rel="stylesheet"
-        href="/static/ie6.css"
-        type="text/css" media="screen" charset="utf-8" />
-  <![endif]-->
-</head>
-<body>
-  <div id="wrap">
-    <div id="top-small">
-      <div class="top-small align-center">
-        <div>
-          <img width="220" height="50" alt="pyramid"
-        src="/static/pyramid-small.png" />
+<!DOCTYPE html>
+<html lang="${request.locale_name}">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="pyramid web application">
+    <meta name="author" content="Pylons Project">
+    <link rel="shortcut icon" href="${request.static_url('tutorial:static/pyramid-16x16.png')}">
+
+    <title>Login - Pyramid tutorial wiki (based on
+    TurboGears 20-Minute Wiki)</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Custom styles for this scaffold -->
+    <link href="${request.static_url('tutorial:static/theme.css')}" rel="stylesheet">
+
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+      <script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+
+    <div class="starter-template">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-2">
+            <img class="logo img-responsive" src="${request.static_url('tutorial:static/pyramid.png')}" alt="pyramid web framework">
+          </div>
+          <div class="col-md-10">
+            <div class="content">
+              <p>
+                <strong>
+                  Login
+                </strong><br>
+                <span tal:replace="message"></span>
+              </p>
+              <form action="${url}" method="post">
+                <input type="hidden" name="came_from" value="${came_from}">
+                <div class="form-group">
+                  <label for="login">Username</label>
+                  <input type="text" name="login" value="${login}">
+                </div>
+                <div class="form-group">
+                  <label for="password">Password</label>
+                  <input type="password" name="password" value="${password}">
+                </div>
+                <div class="form-group">
+                  <button type="submit" name="form.submitted" value="Log In" class="btn btn-default">Log In</button>
+                </div>
+              </form>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-    <div id="middle">
-      <div class="middle align-right">
-        <div id="left" class="app-welcome align-left">
-          <b>Login</b><br/>
-          <span tal:replace="message"/>
+        <div class="row">
+          <div class="copyright">
+            Copyright &copy; Pylons Project
+          </div>
         </div>
-        <div id="right" class="app-welcome align-right"></div>
-      </div>
-    </div>
-    <div id="bottom">
-      <div class="bottom">
-        <form action="${url}" method="post">
-          <input type="hidden" name="came_from" value="${came_from}"/>
-          <input type="text" name="login" value="${login}"/><br/>
-          <input type="password" name="password"
-                 value="${password}"/><br/>
-          <input type="submit" name="form.submitted" value="Log In"/>
-        </form>
       </div>
     </div>
-  </div>
-</body>
+
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="//oss.maxcdn.com/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
+  </body>
 </html>
diff --git a/docs/tutorials/wiki/src/tests/tutorial/templates/view.pt b/docs/tutorials/wiki/src/tests/tutorial/templates/view.pt
index 90e20764d..fa35d758d 100644
--- a/docs/tutorials/wiki/src/tests/tutorial/templates/view.pt
+++ b/docs/tutorials/wiki/src/tests/tutorial/templates/view.pt
@@ -1,61 +1,72 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
-      xmlns:tal="http://xml.zope.org/namespaces/tal">
-<head>
-  <title>${page.__name__} - Pyramid tutorial wiki (based on
+<!DOCTYPE html>
+<html lang="${request.locale_name}">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="pyramid web application">
+    <meta name="author" content="Pylons Project">
+    <link rel="shortcut icon" href="${request.static_url('tutorial:static/pyramid-16x16.png')}">
+
+    <title>${page.__name__} - Pyramid tutorial wiki (based on
     TurboGears 20-Minute Wiki)</title>
-  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
-  <meta name="keywords" content="python web application" />
-  <meta name="description" content="pyramid web application" />
-  <link rel="shortcut icon"
-        href="/static/favicon.ico" />
-  <link rel="stylesheet"
-        href="/static/pylons.css"
-        type="text/css" media="screen" charset="utf-8" />
-  <!--[if lte IE 6]>
-  <link rel="stylesheet"
-        href="/static/ie6.css"
-        type="text/css" media="screen" charset="utf-8" />
-  <![endif]-->
-</head>
-<body>
-  <div id="wrap">
-    <div id="top-small">
-      <div class="top-small align-center">
-        <div>
-          <img width="220" height="50" alt="pyramid"
-        src="/static/pyramid-small.png" />
+
+    <!-- Bootstrap core CSS -->
+    <link href="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Custom styles for this scaffold -->
+    <link href="${request.static_url('tutorial:static/theme.css')}" rel="stylesheet">
+
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+      <script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+
+    <div class="starter-template">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-2">
+            <img class="logo img-responsive" src="${request.static_url('tutorial:static/pyramid.png')}" alt="pyramid web framework">
+          </div>
+          <div class="col-md-10">
+            <div class="content">
+              <p tal:condition="logged_in" class="pull-right">
+                <a href="${request.application_url}/logout">Logout</a>
+              </p>
+              <div tal:replace="structure content">
+                Page text goes here.
+              </div>
+              <p>
+                <a tal:attributes="href edit_url" href="">
+                  Edit this page
+                </a>
+              </p>
+              <p>
+                  Viewing <strong><span tal:replace="page.__name__">
+                  Page Name Goes Here</span></strong>
+              </p>
+              <p>You can return to the
+                <a href="${request.application_url}">FrontPage</a>.
+              </p>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-    <div id="middle">
-      <div class="middle align-right">
-        <div id="left" class="app-welcome align-left">
-          Viewing <b><span tal:replace="page.__name__">Page Name
-            Goes Here</span></b><br/>
-          You can return to the
-          <a href="${request.application_url}">FrontPage</a>.<br/>
-        </div>
-        <div id="right" class="app-welcome align-right">
-          <span tal:condition="logged_in">
-            <a href="${request.application_url}/logout">Logout</a>
-          </span>
-        </div>
-      </div>
-    </div>
-    <div id="bottom">
-      <div class="bottom">
-        <div tal:replace="structure content">
-          Page text goes here.
+        <div class="row">
+          <div class="copyright">
+            Copyright &copy; Pylons Project
+          </div>
         </div>
-        <p>
-          <a tal:attributes="href edit_url" href="">
-            Edit this page
-          </a>
-        </p>
       </div>
     </div>
-  </div>
-</body>
+
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="//oss.maxcdn.com/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
+  </body>
 </html>
diff --git a/docs/tutorials/wiki/tests.rst b/docs/tutorials/wiki/tests.rst
index e724f3e18..e255812fc 100644
--- a/docs/tutorials/wiki/tests.rst
+++ b/docs/tutorials/wiki/tests.rst
@@ -2,38 +2,36 @@
 Adding Tests
 ============
 
-We will now add tests for the models and the views and a few functional
-tests in the ``tests.py``.  Tests ensure that an application works, and
-that it continues to work after some changes are made in the future.
+We will now add tests for the models and the views and a few functional tests
+in ``tests.py``.  Tests ensure that an application works, and that it
+continues to work when changes are made in the future.
 
-
-Test the Models
+Test the models
 ===============
 
-We write tests for the model classes and the appmaker.  Changing
-``tests.py``, we'll write a separate test class for each model class, and
+We write tests for the ``model`` classes and the ``appmaker``.  Changing
+``tests.py``, we'll write a separate test class for each ``model`` class, and
 we'll write a test class for the ``appmaker``.
 
 To do so, we'll retain the ``tutorial.tests.ViewTests`` class that was
-generated as part of the ``zodb`` scaffold.  We'll add three test
-classes: one for the ``Page`` model named ``PageModelTests``, one for the
-``Wiki`` model named ``WikiModelTests``, and one for the appmaker named
-``AppmakerTests``.
+generated as part of the ``zodb`` scaffold.  We'll add three test classes: one
+for the ``Page`` model named ``PageModelTests``, one for the ``Wiki`` model
+named ``WikiModelTests``, and one for the appmaker named ``AppmakerTests``.
 
-Test the Views
+Test the views
 ==============
 
 We'll modify our ``tests.py`` file, adding tests for each view function we
-added above.  As a result, we'll *delete* the ``ViewTests`` test in the file,
-and add four other test classes: ``ViewWikiTests``, ``ViewPageTests``,
-``AddPageTests``, and ``EditPageTests``.  These test the ``view_wiki``,
-``view_page``, ``add_page``, and ``edit_page`` views respectively.
-
+added previously.  As a result, we'll *delete* the ``ViewTests`` class that
+the ``zodb`` scaffold provided, and add four other test classes:
+``ViewWikiTests``, ``ViewPageTests``, ``AddPageTests``, and ``EditPageTests``.
+These test the ``view_wiki``, ``view_page``, ``add_page``, and ``edit_page``
+views.
 
 Functional tests
 ================
 
-We test the whole application, covering security aspects that are not
+We'll test the whole application, covering security aspects that are not
 tested in the unit tests, like logging in, logging out, checking that
 the ``viewer`` user cannot add or edit pages, but the ``editor`` user
 can, and so on.
@@ -41,14 +39,14 @@ can, and so on.
 View the results of all our edits to ``tests.py``
 =================================================
 
-Once we're done with the ``tests.py`` module, it will look a lot like the
-below:
+Open the ``tutorial/tests.py`` module, and edit it such that it appears as
+follows:
 
 .. literalinclude:: src/tests/tutorial/tests.py
    :linenos:
    :language: python
 
-Running the Tests
+Running the tests
 =================
 
 We can run these tests by using ``setup.py test`` in the same way we did in
@@ -62,7 +60,7 @@ Change the ``requires`` list in ``setup.py`` to include ``WebTest``.
    :lines: 11-22
    :emphasize-lines: 11
 
-After we've added a dependency on WebTest in ``setup.py``, we need to rerun
+After we've added a dependency on WebTest in ``setup.py``, we need to run
 ``setup.py develop`` to get WebTest installed into our virtualenv.  Assuming
 our shell's current working directory is the "tutorial" distribution
 directory:
@@ -94,7 +92,7 @@ On Windows:
 
    c:\pyramidtut\tutorial> %VENV%\Scripts\python setup.py test -q
 
-The expected result looks something like:
+The expected result should look like the following:
 
 .. code-block:: text
 
diff --git a/docs/tutorials/wiki2/authorization.rst b/docs/tutorials/wiki2/authorization.rst
index 125579e7f..d2ad7a9ca 100644
--- a/docs/tutorials/wiki2/authorization.rst
+++ b/docs/tutorials/wiki2/authorization.rst
@@ -374,7 +374,7 @@ we're done:
 
 Only the highlighted lines need to be added or edited.
 
-Viewing the Application in a Browser
+Viewing the application in a browser
 ------------------------------------
 
 We can finally examine our application in a browser (See
diff --git a/docs/tutorials/wiki2/definingviews.rst b/docs/tutorials/wiki2/definingviews.rst
index d7f63100d..0b495445a 100644
--- a/docs/tutorials/wiki2/definingviews.rst
+++ b/docs/tutorials/wiki2/definingviews.rst
@@ -345,14 +345,14 @@ something like:
 
 The highlighted lines are the ones that need to be added or edited.
 
-Viewing the Application in a Browser
+Viewing the application in a browser
 ====================================
 
 We can finally examine our application in a browser (See
 :ref:`wiki2-start-the-application`).  Launch a browser and visit
 each of the following URLs, checking that the result is as expected:
 
-- ``http://localhost:6543/`` invokes the ``view_wiki`` view.  This always
+- http://localhost:6543/ invokes the ``view_wiki`` view.  This always
   redirects to the ``view_page`` view of the ``FrontPage`` page object.
 
 - http://localhost:6543/FrontPage invokes the ``view_page`` view of the front
@@ -367,4 +367,3 @@ each of the following URLs, checking that the result is as expected:
   will generate a ``NoResultFound: No row was found for one()`` error. You'll
   see an interactive traceback facility provided by
   :term:`pyramid_debugtoolbar`.
-
diff --git a/docs/tutorials/wiki2/tests.rst b/docs/tutorials/wiki2/tests.rst
index e96fb0bae..9db95334a 100644
--- a/docs/tutorials/wiki2/tests.rst
+++ b/docs/tutorials/wiki2/tests.rst
@@ -2,26 +2,25 @@
 Adding Tests
 ============
 
-We will now add tests for the models and the views and a few functional
-tests in ``tests.py``.  Tests ensure that an application works, and
-that it continues to work when changes are made in the future.
+We will now add tests for the models and the views and a few functional tests
+in ``tests.py``.  Tests ensure that an application works, and that it
+continues to work when changes are made in the future.
 
-Testing the Models
-==================
+Test the models
+===============
 
-To test the model class ``Page`` we'll add a new ``PageModelTests``
-class to our ``tests.py`` file that was generated as part of the
-``alchemy`` scaffold.
+To test the model class ``Page`` we'll add a new ``PageModelTests`` class to
+our ``tests.py`` file that was generated as part of the ``alchemy`` scaffold.
 
-Testing the Views
-=================
+Test the views
+==============
 
-We'll modify our ``tests.py`` file, adding tests for each view
-function we added previously.  As a result, we'll *delete* the
-``ViewTests`` class that the ``alchemy`` scaffold provided, and add
-four other test classes: ``ViewWikiTests``, ``ViewPageTests``,
-``AddPageTests``, and ``EditPageTests``.  These test the
-``view_wiki``, ``view_page``, ``add_page``, and ``edit_page`` views.
+We'll modify our ``tests.py`` file, adding tests for each view function we
+added previously.  As a result, we'll *delete* the ``ViewTests`` class that
+the ``alchemy`` scaffold provided, and add four other test classes:
+``ViewWikiTests``, ``ViewPageTests``, ``AddPageTests``, and ``EditPageTests``.
+These test the ``view_wiki``, ``view_page``, ``add_page``, and ``edit_page``
+views.
 
 Functional tests
 ================
@@ -31,8 +30,8 @@ tested in the unit tests, like logging in, logging out, checking that
 the ``viewer`` user cannot add or edit pages, but the ``editor`` user
 can, and so on.
 
-Viewing the results of all our edits to ``tests.py``
-====================================================
+View the results of all our edits to ``tests.py``
+=================================================
 
 Open the ``tutorial/tests.py`` module, and edit it such that it appears as
 follows:
@@ -41,7 +40,7 @@ follows:
    :linenos:
    :language: python
 
-Running the Tests
+Running the tests
 =================
 
 We can run these tests by using ``setup.py test`` in the same way we did in
@@ -55,7 +54,7 @@ Change the ``requires`` list in ``setup.py`` to include ``WebTest``.
    :lines: 11-22
    :emphasize-lines: 11
 
-After we've added a dependency on WebTest in ``setup.py``, we need to rerun
+After we've added a dependency on WebTest in ``setup.py``, we need to run
 ``setup.py develop`` to get WebTest installed into our virtualenv.  Assuming
 our shell's current working directory is the "tutorial" distribution
 directory:
@@ -87,7 +86,7 @@ On Windows:
 
    c:\pyramidtut\tutorial> %VENV%\Scripts\python setup.py test -q
 
-The expected result ends something like:
+The expected result should look like the following:
 
 .. code-block:: text