Make template site HTML5

It would really pain me if the default Jekyll site were XHTML. That'd be bad for the internet. Instead, use Twitter Bootstrap as a base (while still keeping @mojombo's origin design), to give users a great initial baseline to build beautiful, simple sites. Defaults are more than just the starting point. It's what 80% of users are going to use. Look at WordPress and the default theme. May as well lead by example and start the user off right. * Add Bootstrap base CSS as a better reset and base layer * Update default layout to HTML5 with boilerplate best practices * Add title and post date to post.html (rather than including in the post itself) * Make site title a variable and add to _config.yml * Add page title to header * Add default .gitignore to ignore `_site` * Remove unused `rss.png` and `.gitkeep` * Add Modernizr for legacy IE support
2026-04-28 03:01:03 -04:00 · 2013-04-13 13:15:31 -04:00
parent 485b37e3d1
commit 1163fa905e
15 changed files with 112 additions and 41 deletions
--- a/lib/site_template/.gitignore
+++ b/lib/site_template/.gitignore
@@ -0,0 +1 @@
+_site
--- a/lib/site_template/_config.yml
+++ b/lib/site_template/_config.yml
@@ -1 +1,2 @@
+name: Your New Jekyll Site
 pygments: true
--- a/lib/site_template/_layouts/default.html
+++ b/lib/site_template/_layouts/default.html
@@ -1,38 +1,63 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
-<head>
-   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-   <title>{{ page.title }}</title>
-   <!-- syntax highlighting CSS -->
-   <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
-   <!-- Homepage CSS -->
-   <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
-</head>
-<body>
-  <div class="site">
-    <div class="title">
-      <a href="/">Your Name</a>
-      <a class="extra" href="/">home</a>
-    </div>
-  
-    {{ content }}
-  
-    <div class="footer">
-      <div class="contact">
-        <p>
-          Your Name<br />
-          What You Are<br />
-          your@email.com
-        </p>
-      </div>
-      <div class="contact">
-        <p>
-          <a href="http://github.com/yourusername/">github.com/yourusername</a><br />
-          <a href="http://twitter.com/yourusername/">twitter.com/yourusername</a><br />
-        </p>
-      </div>
-    </div>
-  </div>
-  <a href="http://github.com/yourusername"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub" /></a>
-</body>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <title>{{ page.title }}</title>
+        <meta name="viewport" content="width=device-width">
+
+        <!-- Bootstrap base CSS -->
+        <link rel="stylesheet" href="css/bootstrap.min.css">
+        <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
+
+        <!-- syntax highlighting CSS -->
+        <link rel="stylesheet" href="/css/syntax.css">
+
+        <!-- Custom CSS -->
+        <link rel="stylesheet" href="/css/main.css">
+
+        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
+    </head>
+    <body>
+        <!--[if lt IE 7]>
+            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
+        <![endif]-->
+
+        <div class="container">
+          <div class="site">
+            <div class="title">
+              <a href="/">{{ site.name }}</a>
+              <a class="extra" href="/">home</a>
+            </div>
+     
+                {{ content }}
+
+            <footer>
+              <div class="contact">
+                <p>
+                  Your Name<br />
+                  What You Are<br />
+                  your@email.com
+                </p>
+              </div>
+              <div class="contact">
+                <p>
+                  <a href="http://github.com/yourusername/">github.com/yourusername</a><br />
+                  <a href="http://twitter.com/yourusername/">twitter.com/yourusername</a><br />
+                </p>
+              </div>
+            </footer>
+
+        </div> <!-- /container -->
+
+        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
+
+        <script src="js/vendor/bootstrap.min.js"></script>
+
+        <script src="js/main.js"></script>
+    </body>
 </html>
--- a/lib/site_template/_layouts/post.html
+++ b/lib/site_template/_layouts/post.html
@@ -1,6 +1,9 @@
 ---
 layout: default
 ---
+<h2>{{ page.title }}</h2>
+<p class="meta">{{ page.date | date_to_string }}</p>
+
 <div id="post">
 {{ content }}
 </div>
--- a/lib/site_template/css/bootstrap-responsive.min.css
+++ b/lib/site_template/css/bootstrap-responsive.min.css
--- a/lib/site_template/css/bootstrap.min.css
+++ b/lib/site_template/css/bootstrap.min.css
--- a/lib/site_template/css/screen.css
+++ b/lib/site_template/css/screen.css
@@ -115,7 +115,7 @@ ul.posts {
    color: #aaa;
  }

-  .site .footer {
+  .site footer {
    font-size: 80%;
    color: #666;
    border-top: 4px solid #eee;
@@ -123,22 +123,22 @@ ul.posts {
    overflow: hidden;
  }

-    .site .footer .contact {
+    .site footer .contact {
      float: left;
      margin-right: 3em;
    }

-      .site .footer .contact a {
+      .site footer .contact a {
        color: #8085C1;
      }

-    .site .footer .rss {
+    .site footer .rss {
      margin-top: 1.1em;
      margin-right: -.2em;
      float: right;
    }

-      .site .footer .rss img {
+      .site footer .rss img {
        border: 0;
      }

--- a/lib/site_template/images/.gitkeep
+++ b/lib/site_template/images/.gitkeep
--- a/lib/site_template/images/rss.png
+++ b/lib/site_template/images/rss.png
--- a/lib/site_template/img/glyphicons-halflings-white.png
+++ b/lib/site_template/img/glyphicons-halflings-white.png
--- a/lib/site_template/img/glyphicons-halflings.png
+++ b/lib/site_template/img/glyphicons-halflings.png
--- a/lib/site_template/js/main.js
+++ b/lib/site_template/js/main.js
@@ -0,0 +1 @@
+
--- a/lib/site_template/js/vendor/bootstrap.min.js
+++ b/lib/site_template/js/vendor/bootstrap.min.js
--- a/lib/site_template/js/vendor/jquery-1.9.1.min.js
+++ b/lib/site_template/js/vendor/jquery-1.9.1.min.js
--- a/lib/site_template/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js
+++ b/lib/site_template/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js