Merge branch 'master' of https://github.com/picocms/Pico into feature/bootstrap-theme

Conflicts:
	CHANGELOG.md
	themes/default/index.twig

.gitignore

@@ -26,6 +26,7 @@ desktop.ini
 # User themes
 /themes/*
 !/themes/default
+!/themes/alpha
 
 # User plugins
 /plugins/*

CHANGELOG.md

@@ -8,6 +8,12 @@ Released: -
 * [New] This is Picos first stable release! The Pico Community wants to thank
         all contributors and users which made this possible!
 * [New] Adding `$queryData` parameter to `Pico::getPageUrl()` method
+* [New] Default Theme: Use Twitter Bootstrap `4.0.0-alpha` + Font Awesome `4.5.0` via MaxCDN
+* [New] Default Theme: `Blog Example` included!
+* [New] Default Theme: `blog`, `blog-post` and `blog-post-full` layouts
+* [New] Default Theme: `blog/` directory in `content-sample` with new demo posts
+* [New] Default Theme: add `theme_config` to `config/config.php.template`
+* [New] Default Theme: use new `sort_by` twig filters
 * [Changed] Moving `LICENSE` to `LICENSE.md`
 * [Changed] Throw `LogicException` instead of `RuntimeException` when calling
             `Pico::setConfig()` after processing has started

README.md

@@ -11,36 +11,51 @@ Pico is a stupidly simple, blazing fast, flat file CMS. See http://picocms.org/
 
 Screenshot
 -------
-![Pico Screenshot](https://cloud.githubusercontent.com/assets/640217/11488596/70b39396-978d-11e5-885e-01341ad9dd75.gif)
+
+![Pico Screenshot](https://cloud.githubusercontent.com/assets/640217/11488304/1b17b388-978b-11e5-9827-532d14a79f2e.gif)
+
+Table of Contents
+-------
+* [Pico](#pico)
+* [Install](#install)
+    * [Pre-Bundled Release](#using-a-pre-bundled-release---for-users)
+    * [Using Composer](#using-composer---for-developers)
+* [Upgrade](#upgrade)
+* [Run](#run)
+* [Config](#config)
+* [Getting Help](#getting-help)
+    * [...as a user](#-as-a-user)
+    * [...as a developer](#-as-a-developer)
+    * [... still need help?](#-still-need-help-with-pico)
+* [Contributing](#contributing)
 
 Install
 -------
 
 You can install Pico either using a pre-bundled release or with composer. Pico is also available on [Packagist.org][] and may be included in other projects via `composer require picocms/pico`. Pico requires PHP 5.3+
 
-#### Using a pre-bundled release
+### Using a pre-bundled release - for users
 
-Just [download the latest Pico release][LatestRelease] and upload all files to the `httpdocs` directory (e.g. `/var/www/html`) of your server.
+1. [Download the latest Pico release][LatestRelease]
 
-#### Composer
+2. Upload all files to the `httpdocs` directory (e.g. `/var/www/html`) of your server.
 
-###### Step 1 - for users
-[Download the *source code* of Pico's latest release][LatestRelease], upload all files to the `httpdocs` directory (e.g. `/var/www/html`) of your server and navigate to the upload directory using a shell.
+### Using Composer - for developers
 
-###### Step 1 - for developers
-Open a shell and navigate to the desired install directory of Pico within the `httpdocs` directory (e.g. `/var/www/html`) of your server. You can now clone Pico's Git repository as follows:
+1. Open a shell and navigate to the desired install directory of Pico within the `httpdocs` directory (e.g. `/var/www/html`) of your server. You can now clone Pico's Git repository as follows:
     ```shell
     $ git clone https://github.com/picocms/Pico.git .
     ```
-Please note that this gives you the current development version of Pico, what is likely *unstable* and *not ready for production use*!
+    > Please note that this gives you the current development version of Pico, what is likely *unstable* and *not ready for production use*!
 
-###### Step 2
-Download [composer][] and run it with the `install` option:
+2. Download [composer][] and run it with the `install` option:
     ```shell
     $ curl -sS https://getcomposer.org/installer | php
     $ php composer.phar install
     ```
 
+[^ toc][]
+
 Upgrade
 -------
 
@@ -56,39 +71,49 @@ Pico follows [Semantic Versioning 2.0][SemVer] and uses version numbers like `MA
 
 Upgrading Pico 0.8 or 0.9 to Pico 1.0 is a special case. The new `PicoDeprecated` plugin ensures backwards compatibility, so you basically can follow the above upgrade instructions as if we updated the `MINOR` version. However, we recommend you to take some further steps to confine the necessity of `PicoDeprecated` as far as possible. For more information about what has changed with Pico 1.0 and a step-by-step upgrade tutorial, please refer to the [upgrade page of our website][HelpUpgrade].
 
+[^ toc][]
+
 Run
 ---
 
 You have nothing to consider specially, simply navigate to your Pico install using your favorite web browser. Pico's default contents will explain how to use your brand new, stupidly simple, blazing fast, flat file CMS.
 
-#### You don't have a web server?
-Starting with PHP 5.4 the easiest way to try Pico is using [the built-in web server of PHP][PHPServer]. Please note that PHPs built-in web server is for development and testing purposes only!
+### You don't have a web server?
+No worries! Starting with PHP 5.4 the easiest way to get started using Pico is with [PHP's built-in web server][PHPServer].
 
-###### Step 1
-Navigate to Pico's installation directory using a shell.
+1. Navigate to Pico's installation directory using a shell.
 
-###### Step 2
-Start PHPs built-in web server:
+2. Start PHPs built-in web server:
     ```shell
     $ php -S 127.0.0.1:8080
     ```
+3. Access Pico from http://localhost:8080.
 
-###### Step 3
-Access Pico from http://localhost:8080.
+    > Please note that PHPs built-in web server is for *development* and *testing* purposes *only!*
+
+[^ toc][]
+
+Config
+---
+Once Pico is installed, you will need to copy your sites config file from `config/config.php.template` to `config/config.php`. The most important config items to set are `$config['timezone']`, `$config['base_url']`, and `$config['site_title']`
+
+[^ toc][]
 
 Getting Help
 ------------
 
-#### Getting Help as a user
+### ... as a user
 If you want to get started using Pico, please refer to our [user docs][HelpUserDocs]. Please read the [upgrade notes][HelpUpgrade] if you want to upgrade from Pico 0.8 or 0.9 to Pico 1.0. You can find officially supported plugins and themes on [our website][OfficialPlugins]. A greater choice of third-party plugins and themes can be found in our [Wiki][] on the [plugins][WikiPlugins] or [themes][WikiThemes] pages respectively. If you want to create your own plugin or theme, please refer to the "Getting Help as a developer" section below.
 
-#### Getting Help as a developer
+### ... as a developer
 If you're a developer, please refer to the "Contributing" section below and our [contribution guidelines][ContributionGuidelines]. To get you started with creating a plugin or theme, please read the [dev docs on our website][HelpDevDocs].
 
-#### You still need help or experience a problem with Pico?
+### ... still need help with Pico?
 When the docs can't answer your question or when you're experiencing problems with Pico, please don't hesitate to create a new [Issue][Issues] on GitHub. Concerning problems with plugins or themes, please refer to the website of the developer of this plugin or theme.
 
-**Before creating a new Issue,** please make sure the problem wasn't reported yet using [GitHubs search engine][IssuesSearch]. Please describe your issue as clear as possible and always include steps to reproduce the problem.
+> **Before creating a new Issue,** please make sure the problem wasn't reported yet using [GitHubs search engine][IssuesSearch]. Please describe your issue as clear as possible and always include steps to reproduce the problem.
+
+[^ toc][]
 
 Contributing
 ------------
@@ -104,6 +129,9 @@ You want to contribute to Pico? We really appreciate that! You can help make Pic
 
 3. Pico's Core: The supreme discipline is to work on Pico's Core. Your contribution should help *every* Pico user to have a better experience with Pico. If this is the case, fork Pico from https://github.com/picocms/Pico and open a [pull request][PullRequests]. We look forward to your contribution!
 
+[^ toc][]
+
+[^ toc]: #table-of-contents
 [Packagist.org]: http://packagist.org/packages/picocms/pico
 [LatestRelease]: https://github.com/picocms/Pico/releases/latest
 [composer]: https://getcomposer.org/

config/config.php.template

@@ -27,6 +27,15 @@
  * THEME
  */
 // $config['theme'] = 'default';                // Set the theme (defaults to "default")
+// $config['theme_config'] = array(             // Configure the default theme
+//    'about_us' => '',
+//    'social_media' => array(
+//        'github' => '',
+//        'facebook' => '',
+//        'twitter' => ''
+//    ),
+//    'copyright' => ''
+// );
 // $config['twig_config'] = array(              // Twig settings
 //     'cache' => false,                        // To enable Twig caching change this to a path to a writable directory
 //     'autoescape' => false,                   // Auto-escape Twig vars

content-sample/blog.md

@@ -0,0 +1,7 @@
+---
+Title: Blog Example
+Description: Pico is a stupidly simple, blazing fast, flat file CMS.
+Template: blog
+---
+
+<!-- All posts in the 'content-sample/blog' folder will be shown here...-->

content-sample/blog/post1.md

@@ -0,0 +1,13 @@
+---
+Title: Post with Sidebar
+Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor.
+Author: PicoCMS
+Date: Dec 31 2015 11:59:59
+Template: blog-post
+---
+
+This is `post1.md` in the `blog` folder.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.

content-sample/blog/post2.md

@@ -0,0 +1,14 @@
+---
+Title: Post Full-Width
+Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor.
+Author: PicoCMS
+Date: Jan 1 2016 12:00:00
+Image: "http://placehold.it/1200x300&text=Blog+Image"
+Template: blog-post-full
+---
+
+This is `post2.md` in the `blog` folder.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.

content-sample/index.md

@@ -106,7 +106,8 @@ There are also certain variables that you can use in your text files:
 ### Blogging
 
 Pico is not blogging software - but makes it very easy for you to use it as a
-blog. You can find many plugins out there implementing typical blogging
+blog. We even include a simple blog layout in our default template! However,
+you can find many plugins out there implementing typical blogging
 features like authentication, tagging, pagination and social plugins. See the
 below Plugins section for details.
 

themes/alpha/assets/css/bootstrap.theme.css

@@ -0,0 +1,229 @@
+/**
+ * Pico's Default Theme - Twitter Bootstrap 4
+ *
+ * @author  Gilbert Pellegrom
+ * @author  Tyler Heshka
+ * @link    http://picocms.org
+ * @license http://opensource.org/licenses/MIT
+ * @version 1.0
+ */
+
+/* Main Styles
+/*---------------------------------------------*/
+body {
+    font: 14px/1.8em 'Open Sans', Helvetica, Arial, Helvetica, sans-serif;
+    color: #444;
+    background: #FFF;
+    -webkit-font-smoothing: antialiased;
+}
+
+a, a:visited {
+    color: #2EAE9B;
+    text-decoration: none;
+}
+
+a:hover, a:active {
+    color: #000;
+    text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin-top: 1.4em;
+    margin-bottom: 0.6em;
+}
+
+p {
+    margin-bottom: 1em;
+}
+
+hr {
+    margin: 20px 0;
+    border: 0;
+    border-top: 1px solid #eeeeee;
+    border-bottom: 1px solid #ffffff;
+}
+
+blockquote {
+    padding: 0 0 0 15px;
+    margin: 0 0 20px;
+    border-left: 5px solid #eeeeee;
+}
+
+code,
+pre {
+    padding: 0 3px 2px;
+    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+    font-size: 12px;
+    color: #333333;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+
+code {
+    padding: 2px 4px;
+    color: #333;
+    white-space: nowrap;
+    background-color: #f7f7f9;
+    border: 1px solid #e1e1e8;
+}
+
+pre {
+    display: block;
+    padding: 9.5px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    line-height: 20px;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre;
+    white-space: pre-wrap;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+pre code {
+    padding: 0;
+    color: inherit;
+    white-space: pre;
+    white-space: pre-wrap;
+    background-color: transparent;
+    border: 0;
+}
+
+/* Nav Styles
+/*---------------------------------------------*/
+.navbar {
+    background: #2EAE9B !important;
+    color: #AFE1DA !important;
+    padding: 10px 0;
+    margin-bottom: 0px;
+    -webkit-border-radius: 0 !important;
+    -moz-border-radius: 0 !important;
+    border-radius: 0 !important;
+}
+
+.navbar-brand {
+    color: #FFF !important;
+    font-weight: bold;
+    font-size: 2em;
+}
+
+.nav-item a {
+    color: #AFE1DA !important;
+}
+
+.nav-item a:hover {
+    color: #FFF !important;
+}
+
+.breadcrumb {
+    margin-left: -1em;
+    margin-right: -1em;
+}
+
+/* Main column and sidebar layout
+/*---------------------------------------------*/
+
+/* Sidebar modules for boxing content */
+.sidebar-module {
+  padding: 1rem;
+}
+.sidebar-module-inset {
+  padding: 1rem;
+  background-color: #f5f5f5;
+  border-radius: .25rem;
+}
+.sidebar-module-inset p:last-child,
+.sidebar-module-inset ul:last-child,
+.sidebar-module-inset ol:last-child {
+  margin-bottom: 0;
+}
+
+/* Blog posts
+/*---------------------------------------------*/
+
+.blog-post {
+  margin-bottom: 4rem;
+}
+.blog-post-title {
+  margin-bottom: .25rem;
+  font-size: 2.5rem;
+}
+.blog-post-meta {
+  margin-bottom: 1.25rem;
+  color: #999;
+}
+
+/* Footer Styles
+/*---------------------------------------------*/
+.footer {
+    background: #707070;
+    padding: 10px 0;
+    margin-top: 100px;
+    color: #C0C0C0;
+}
+
+.footer a {
+    color: #DDD;
+}
+
+.footer a:hover {
+    color: #FFF;
+}
+
+/* Media Queries
+/*---------------------------------------------*/
+
+/* Small devices (landscape phones, 34em and up) */
+@media (min-width: 34em) {
+    .navbar {
+        padding: 20px 0;
+        margin-bottom: 5px;
+    }
+
+    .footer {
+        padding: 20px 0;
+        margin-top: 90px;
+    }
+}
+/* Medium devices (tablets, 48em and up) */
+@media (min-width: 48em) {
+    .navbar {
+        padding: 30px 0;
+        margin-bottom: 10px;
+    }
+
+    .footer {
+        padding: 30px 0;
+        margin-top: 100px;
+    }
+}
+/* Large devices (desktops, 62em and up) */
+@media (min-width: 62em) {
+    .navbar {
+        padding: 40px 0;
+        margin-bottom: 15px;
+    }
+
+    .footer {
+        padding: 40px 0;
+        margin-top: 110px;
+    }
+}
+/* Extra large devices (large desktops, 75em and up) */
+@media (min-width: 75em) {
+    .navbar {
+        padding: 50px 0;
+        margin-bottom: 20px;
+    }
+
+    .footer {
+        padding: 50px 0;
+        margin-top: 120px;
+    }
+}

themes/alpha/blog-post-full.twig

@@ -0,0 +1,20 @@
+{% include 'includes/htmlHead.twig' %}
+{% include 'includes/head.twig' %}
+<body>
+    {% include 'includes/nav.twig' %}
+    <!-- Main Content -->
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-12">
+                {% include 'includes/blog-breadcrumb.twig' %}
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-12">
+                {% include 'includes/blog-meta.twig' %}
+            </div>
+        </div>
+    </div>
+    {% include 'includes/foot.twig' %}
+</body>
+{% include 'includes/htmlFoot.twig' %}

themes/alpha/blog-post.twig

@@ -0,0 +1,23 @@
+{% include 'includes/htmlHead.twig' %}
+{% include 'includes/head.twig' %}
+<body>
+    {% include 'includes/nav.twig' %}
+    <!-- Main Content -->
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-12">
+                {% include 'includes/blog-breadcrumb.twig' %}
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-8">
+                {% include 'includes/blog-meta.twig' %}
+            </div>
+            <div class="col-sm-3 col-sm-offset-1">
+                {% include 'includes/blog-sidebar.twig' %}
+            </div>
+        </div>
+    </div>
+    {% include 'includes/foot.twig' %}
+</body>
+{% include 'includes/htmlFoot.twig' %}

themes/alpha/blog.twig

@@ -0,0 +1,18 @@
+{% include 'includes/htmlHead.twig' %}
+{% include 'includes/head.twig' %}
+<body>
+    {% include 'includes/nav.twig' %}
+    <!-- Main Content -->
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-8">
+                {% include 'includes/blog-list.twig' %}
+            </div>
+            <div class="col-sm-3 col-sm-offset-1">
+                {% include 'includes/blog-sidebar.twig' %}
+            </div>
+        </div>
+    </div>
+    {% include 'includes/foot.twig' %}
+</body>
+{% include 'includes/htmlFoot.twig' %}

themes/alpha/includes/blog-breadcrumb.twig

@@ -0,0 +1,5 @@
+<!-- Breadcrumbs -->
+<ol class="breadcrumb">
+    <li><a href="{{ "blog" | link }}">Blog</a></li>
+    <li class="active">{{ meta.title }}</li>
+</ol>

themes/alpha/includes/blog-list.twig

@@ -0,0 +1,17 @@
+<!-- Blog List -->
+{% for page in pages|sort_by("time")|reverse %}
+    {% if page.id starts with "blog/" %}
+        <!-- Blog Post Meta -->
+        <div class="blog-post">
+            <!-- Blog Post Meta -->
+            <h2 class="blog-post-title"><a href="{{ page.url }}">{{ page.title }}</a></h2>
+            <p class="blog-post-meta">
+                <i class="fa fa-calendar"></i> {{ page.date }}
+                by <strong>{{ page.author }}</strong>
+            </p>
+            <!-- Blog Content -->
+            {{ page.description|slice(0, 500) }}
+        </div>
+        <hr>
+    {% endif %}
+{% endfor %}

themes/alpha/includes/blog-meta.twig

@@ -0,0 +1,16 @@
+<!-- Blog Post -->
+<div class="blog-post">
+    <!-- Blog Post Meta -->
+    <h2 class="blog-post-title">{{ meta.title }}</h2>
+    <p class="blog-post-meta">
+        <i class="fa fa-calendar"></i> {{ meta.date }}
+        by <strong>{{ meta.author }}</strong>
+    </p>
+    <hr>
+    <!-- Blog Image -->
+    {% if meta.image %}
+        <img src="{{ meta.image }}" class="img-responsive" alt="{{ meta.image }}" /><br>
+    {% endif %}
+    <!-- Blog Content -->
+    {{content}}
+</div>

themes/alpha/includes/blog-sidebar.twig

@@ -0,0 +1,51 @@
+<!-- Sidebar -->
+<div class="sidebar-module">
+    <h4>Connect with {{ site_title }}</h4>
+    <ol class="list-unstyled">
+        {% if config.theme_config.social_media.github %}
+            <li>
+                <a href="https://github.com/{{config.theme_config.social_media.github}}">
+                    <i class="fa fa-github fa-fw fa-2x"></i><span class="lead"> GitHub</span>
+                </a>
+            </li>
+        {% else %}
+            <li>
+                <a href="https://github.com/picocms/Pico.git">
+                    <i class="fa fa-github fa-fw fa-2x"></i><span class="lead"> GitHub</span>
+                </a>
+            </li>
+        {% endif %}
+        {% if config.theme_config.social_media.facebook %}
+            <li>
+                <a href="https://facebook.com/{{config.theme_config.social_media.facebook}}">
+                    <i class="fa fa-facebook fa-fw fa-2x"></i><span class="lead"> Facebook</span>
+                </a>
+            </li>
+        {% endif %}
+        {% if config.theme_config.social_media.twitter %}
+            <li>
+                <a href="https://twitter.com/{{config.theme_config.social_media.twitter}}">
+                    <i class="fa fa-twitter fa-fw fa-2x"></i><span class="lead"> Twitter</span>
+                </a>
+            </li>
+        {% else %}
+        <li>
+            <a href="https://twitter.com/gitpicocms">
+                <i class="fa fa-twitter fa-fw fa-2x"></i><span class="lead"> Twitter</span>
+            </a>
+        </li>
+        {% endif %}
+    </ol>
+</div>
+
+<div class="sidebar-module sidebar-module-inset">
+    <h4>About {{ site_title }}</h4>
+    {% if config.theme_config.about_us %}
+        <p>{{ config.theme_config.about_us }}</p>
+    {% else %}
+        <p>Pico is a stupidly simple, blazing fast, flat file CMS,
+        this means there is no administration backend or database
+        to deal with. You simply create `.md` files in the `content-sample`
+        folder and that becomes a page.</p>
+    {% endif %}
+</div>

themes/alpha/includes/foot.twig

@@ -0,0 +1,21 @@
+<!-- Footer -->
+<footer class="footer">
+    <div class="container">
+        <p class="text-center">
+        {% if config.theme_config.copyright %}
+            {{ config.theme_config.copyright }}
+        {% else %}
+            <a href="http://picocms.org/">Pico</a>
+            was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a>
+            and is maintained by <a href="https://github.com/picocms/Pico/graphs/contributors">The Pico Community</a>.
+            Released under the MIT License.
+        {% endif %}
+        </p>
+    </div>
+</footer>
+
+<!-- Javascript -->
+<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
+<script src="//raw.githubusercontent.com/chuckcarpenter/REM-unit-polyfill/1.3.4/js/rem.min.js"></script>

themes/alpha/includes/head.twig

@@ -0,0 +1,33 @@
+<head>
+    <!-- Page Meta -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="generator" content="Pico 1.0">
+
+    <!-- Post Meta -->
+    {% if meta.description %}
+    <meta name="description" content="{{ meta.description|striptags }}">
+    {% endif %}{% if meta.robots %}
+    <meta name="robots" content="{{ meta.robots }}">
+    {% endif %}{% if meta.author %}
+    <meta name="author" content="{{ meta.author }}">
+    {% endif %}
+
+    <!-- Page Title -->
+    <title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
+
+    <!-- Fonts -->
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700" type="text/css">
+
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" type="text/css" />
+    <link rel="stylesheet" href="{{ theme_url }}/assets/css/bootstrap.theme.css" type="text/css" />
+
+    <!-- Icons -->
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+
+    <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+</head>

themes/alpha/includes/htmlFoot.twig

@@ -0,0 +1 @@
+</html>

themes/alpha/includes/htmlHead.twig

@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<html lang="en">

themes/alpha/includes/nav.twig

@@ -0,0 +1,20 @@
+<!-- Navigation -->
+<nav class="navbar navbar-light">
+    <button class="navbar-toggler hidden-sm-up pull-right" type="button" data-toggle="collapse" data-target="#CollapsingNavbar">
+        &#9776;
+    </button>
+    <div class="container">
+        <a class="navbar-brand" href="{{ 'index'|link }}">{{ site_title }}</a>
+        <div class="collapse navbar-toggleable-xs" id="CollapsingNavbar">
+            <ul class="nav navbar-nav pull-right">
+                {% for page in pages %}
+                    {% if page.id starts with "blog/" %}{% else %}
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ page.url }}">{{ page.title }}</a>
+                    </li>
+                    {% endif %}
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
+</nav>

themes/alpha/index.twig

@@ -0,0 +1,15 @@
+{% include 'includes/htmlHead.twig' %}
+{% include 'includes/head.twig' %}
+<body>
+    {% include 'includes/nav.twig' %}
+    <!-- Main Content -->
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-12">
+                {{ content }}
+            </div>
+        </div>
+    </div>
+    {% include 'includes/foot.twig' %}
+</body>
+{% include 'includes/htmlFoot.twig' %}

themes/default/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" class="no-js">
+<head>
+	<meta charset="utf-8" />
+
+	<title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
+{% if meta.description %}
+	<meta name="description" content="{{ meta.description }}">
+{% endif %}{% if meta.robots %}
+	<meta name="robots" content="{{ meta.robots }}">
+{% endif %}
+
+	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" type="text/css" />
+	<link rel="stylesheet" href="{{ theme_url }}/style.css" type="text/css" />
+
+	<script src="{{ theme_url }}/scripts/modernizr-2.6.1.min.js"></script>
+</head>
+<body>
+
+	<header id="header">
+		<div class="inner clearfix">
+			<h1><a href="{{ base_url }}" id="logo">{{ site_title }}</a></h1>
+			<nav>
+				<a href="#" class="menu-icon"></a>
+                <ul>
+                    {% for page in pages %}
+                    {% if page.id starts with "blog" %}{% else %}
+                        <li><a href="{{ page.url }}">{{ page.title }}</a></li>
+                    {% endif %}
+                    {% endfor %}
+                </ul>
+			</nav>
+		</div>
+	</header>
+
+	<section id="content">
+		<div class="inner">
+			{{ content }}
+		</div>
+	</section>
+
+	<footer id="footer">
+		<div class="inner">
+			<a href="http://picocms.org/">Pico</a> was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a>
+			from <a href="http://dev7studios.com">Dev7studios</a>.
+		</div>
+	</footer>
+
+</body>
+</html>

themes/default/index.twig

@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="no-js">
-<head>
-    <meta charset="utf-8" />
-
-    <title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
-    {% if meta.description %}
-        <meta name="description" content="{{ meta.description|striptags }}">
-    {% endif %}{% if meta.robots %}
-        <meta name="robots" content="{{ meta.robots }}">
-    {% endif %}
-
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" type="text/css" />
-    <link rel="stylesheet" href="{{ theme_url }}/style.css" type="text/css" />
-
-    <script src="{{ theme_url }}/scripts/modernizr-2.6.1.min.js"></script>
-</head>
-<body>
-
-    <header id="header">
-        <div class="inner clearfix">
-            <h1><a href="{{ "index"|link }}" id="logo">{{ site_title }}</a></h1>
-            <nav>
-                <a href="#" class="menu-icon"></a>
-                <ul>
-                    {% for page in pages if page.title %}
-                        <li{% if page.id == current_page.id %} class="active"{% endif %}>
-                            <a href="{{ page.url }}">{{ page.title }}</a>
-                        </li>
-                    {% endfor %}
-                </ul>
-            </nav>
-        </div>
-    </header>
-
-    <section id="content">
-        <div class="inner">
-            {{ content }}
-        </div>
-    </section>
-
-    <footer id="footer">
-        <div class="inner">
-            <a href="http://picocms.org/">Pico</a> was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a>
-            and is maintained by <a href="https://github.com/picocms/Pico/graphs/contributors">The Pico Community</a>.
-            Released under the <a href="https://github.com/picocms/Pico/blob/master/LICENSE.md">MIT license</a>.
-        </div>
-    </footer>
-
-</body>
-</html>