TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Spruce up the demo theme 

There is some reorg here for performance improvements, and some sugar coz it's nice
Added README for general guidance
This commit is contained in:
Samuel Georges 2016-08-27 21:19:11 +10:00
parent 1e124995fc
commit a55447edbd
22 changed files with 8229 additions and 7322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
themes/demo/README.md Normal file
View File

@ -0,0 +1,55 @@
Demo Theme
==========
OctoberCMS demo theme that demonstrates the basic core functionality and utilizes the accompanying demo plugin. It is a great theme to copy when building a site from scratch.
The theme acts as a reference implementation for default component markup when distributing plugins.
Have fun!
## Clean up instructions
If you clone this theme to use as a starting point. You may follow these instructions to clean up:
1. Delete the `pages/ajax.htm` and `pages/plugins.htm` files.
2. Delete the `partials/calcresult.htm` partial file.
3. Delete the `partials/explain/` directory and contents.
4. Delete the `content/placeholder/` directory and contents.
## Combining CSS and JavaScript
This theme doesn't combine assets for performance reasons. To combine the stylesheets, replace the following lines in the default layout.
Uncombined stylesheets:
<link href="{{ 'assets/css/vendor.css'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">
Combined stylesheets:
<link href="{{ [
'@framework.extras',
'assets/less/vendor.less',
'assets/less/theme.less'
]|theme }}" rel="stylesheet">
> **Note**: October also includes an SCSS compiler, if you prefer.
Uncombined JavaScript:
<script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>
<script src="{{ 'assets/vendor/bootstrap.js'|theme }}"></script>
<script src="{{ 'assets/javascript/app.js'|theme }}"></script>
{% framework extras %}
Combined JavaScript:
<script src="{{ [
'@jquery',
'@framework',
'@framework.extras',
'assets/vendor/bootstrap.js',
'assets/javascript/app.js'
]|theme }}"></script>
> **Important**: Make sure you keep the `{% styles %}` and `{% scripts %}` placeholder tags as these are used by plugins for injecting assets.

7577
themes/demo/assets/css/theme.css
View File

File diff suppressed because it is too large Load Diff

7345
themes/demo/assets/css/vendor.css Normal file
View File

File diff suppressed because it is too large Load Diff

41
themes/demo/assets/javascript/app.js
View File

@ -5,3 +5,44 @@
$(document).tooltip({
selector: "[data-toggle=tooltip]"
})
/*
* Auto hide navbar
*/
jQuery(document).ready(function($){
var $header = $('.navbar-autohide'),
scrolling = false,
previousTop = 0,
currentTop = 0,
scrollDelta = 10,
scrollOffset = 150
$(window).on('scroll', function(){
if (!scrolling) {
scrolling = true
if (!window.requestAnimationFrame) {
setTimeout(autoHideHeader, 250)
}
else {
requestAnimationFrame(autoHideHeader)
}
}
})
function autoHideHeader() {
var currentTop = $(window).scrollTop()
// Scrolling up
if (previousTop - currentTop > scrollDelta) {
$header.removeClass('is-hidden')
}
else if (currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
// Scrolling down
$header.addClass('is-hidden')
}
previousTop = currentTop
scrolling = false
}
});

5
themes/demo/assets/less/controls/example.less Normal file
View File

@ -0,0 +1,5 @@
//
// Example control
//
.example-control {}

8
themes/demo/assets/less/controls/all.less → themes/demo/assets/less/elements/callouts.less
View File

@ -1,9 +1,3 @@
//
// Controls
//
// These are reusable elements used in the site.
//
//
// Callouts
// --------------------------------------------------
@ -53,4 +47,4 @@
h4 {
color: @callout-success-text;
}
}
}

69
themes/demo/assets/less/elements/navbar.less Normal file
View File

@ -0,0 +1,69 @@
.navbar-header .navbar-brand {
padding-left: 55px;
background-image: url('../images/october.png');
background-size: auto 60%;
background-repeat: no-repeat;
background-position: 7px 50%;
transition: color 0.2s ease 0.05s;
color: #ccc;
&:hover {
color: #fff;
}
}
.navbar-nav li.separator {
width: 1px;
background: rgba(255, 255, 255, 0.3);
height: 30px;
margin: 20px 10px 0 10px;
}
.navbar-autohide {
transition: transform .5s;
}
.navbar-autohide.is-hidden {
transform: translateY(-(@navbar-height + 2px));
}
.navbar-collapse:not(.in):not(.collapsing) .navbar-nav li {
> a {
transition: color 0.2s ease 0.05s;
}
> a:after {
position: absolute;
height: 4px;
bottom: -1px;
content: '';
border-radius: 4px;
z-index: 5;
width: 0;
left: 50%;
transition: all 0.2s ease 0.05s;
}
&.active > a:after,
> a:hover:after {
background: @navbar-link-stripe-color-active;
}
&.active > a:after {
width: 100% !important;
left: 0 !important;
}
&:hover > a:after {
width: 100%;
left: 0;
}
&.active > a:hover:after {
background: @navbar-link-stripe-color-active;
}
> a:hover:after {
background: @navbar-link-stripe-color-hover;
}
}

138
themes/demo/assets/less/elements/utilities.less Normal file
View File

@ -0,0 +1,138 @@
//
// Typography
// --------------------------------------------------
.t-ww { word-wrap: break-word; word-break: break-word; }
//
// Borders
// --------------------------------------------------
.border-none { border: 0; }
//
// Positioning
// --------------------------------------------------
.pos-r { position: relative !important; }
.pos-a { position: absolute !important; }
.pos-f { position: fixed !important; }
//
// Width
// --------------------------------------------------
.w-sm { width: 25% !important; }
.w-md { width: 50% !important; }
.w-lg { width: 75% !important; }
.w-full { width: 100% !important; }
.w-50 { width: 50px !important; }
.w-100 { width: 100px !important; }
.w-120 { width: 120px !important; }
.w-130 { width: 130px !important; }
.w-140 { width: 140px !important; }
.w-150 { width: 150px !important; }
.w-200 { width: 200px !important; }
.w-300 { width: 300px !important; }
.w-350 { width: 350px !important; }
//
// Margins
// --------------------------------------------------
.m-a-0 { margin: 0 !important; }
.m-t-0 { margin-top: 0 !important; }
.m-r-0 { margin-right: 0 !important; }
.m-b-0 { margin-bottom: 0 !important; }
.m-l-0 { margin-left: 0 !important; }
.m-a { margin: @spacer !important; }
.m-t { margin-top: @spacer-y !important; }
.m-r { margin-right: @spacer-x !important; }
.m-b { margin-bottom: @spacer-y !important; }
.m-l { margin-left: @spacer-x !important; }
.m-x { margin-right: @spacer-x !important; margin-left: @spacer-x !important; }
.m-y { margin-top: @spacer-y !important; margin-bottom: @spacer-y !important; }
.m-x-auto { margin-right: auto !important; margin-left: auto !important; }
.m-a-xs { margin: (@spacer-y / 4) !important; }
.m-t-xs { margin-top: (@spacer-y / 4) !important; }
.m-r-xs { margin-right: (@spacer-y / 4) !important; }
.m-b-xs { margin-bottom: (@spacer-y / 4) !important; }
.m-l-xs { margin-left: (@spacer-y / 4) !important; }
.m-x-xs { margin-right: (@spacer-x / 4) !important; margin-left: (@spacer-x / 4) !important; }
.m-y-xs { margin-top: (@spacer-y / 4) !important; margin-bottom: (@spacer-y / 4) !important; }
.m-a-sm { margin: (@spacer-y / 2) !important; }
.m-t-sm { margin-top: (@spacer-y / 2) !important; }
.m-r-sm { margin-right: (@spacer-y / 2) !important; }
.m-b-sm { margin-bottom: (@spacer-y / 2) !important; }
.m-l-sm { margin-left: (@spacer-y / 2) !important; }
.m-x-sm { margin-right: (@spacer-x / 2) !important; margin-left: (@spacer-x / 2) !important; }
.m-y-sm { margin-top: (@spacer-y / 2) !important; margin-bottom: (@spacer-y / 2) !important; }
.m-a-md { margin: (@spacer-y * 1.5) !important; }
.m-t-md { margin-top: (@spacer-y * 1.5) !important; }
.m-r-md { margin-right: (@spacer-y * 1.5) !important; }
.m-b-md { margin-bottom: (@spacer-y * 1.5) !important; }
.m-l-md { margin-left: (@spacer-y * 1.5) !important; }
.m-x-md { margin-right: (@spacer-x * 1.5) !important; margin-left: (@spacer-x * 1.5) !important; }
.m-y-md { margin-top: (@spacer-y * 1.5) !important; margin-bottom: (@spacer-y * 1.5) !important; }
.m-a-lg { margin: (@spacer-y * 3) !important; }
.m-t-lg { margin-top: (@spacer-y * 3) !important; }
.m-r-lg { margin-right: (@spacer-y * 3) !important; }
.m-b-lg { margin-bottom: (@spacer-y * 3) !important; }
.m-l-lg { margin-left: (@spacer-y * 3) !important; }
.m-x-lg { margin-right: (@spacer-x * 3) !important; margin-left: (@spacer-x * 3) !important; }
.m-y-lg { margin-top: (@spacer-y * 3) !important; margin-bottom: (@spacer-y * 3) !important; }
//
// Padding
// --------------------------------------------------
.p-a-0 { padding: 0 !important; }
.p-t-0 { padding-top: 0 !important; }
.p-r-0 { padding-right: 0 !important; }
.p-b-0 { padding-bottom: 0 !important; }
.p-l-0 { padding-left: 0 !important; }
.p-a { padding: @spacer !important; }
.p-t { padding-top: @spacer-y !important; }
.p-r { padding-right: @spacer-x !important; }
.p-b { padding-bottom: @spacer-y !important; }
.p-l { padding-left: @spacer-x !important; }
.p-x { padding-right: @spacer-x !important; padding-left: @spacer-x !important; }
.p-y { padding-top: @spacer-y !important; padding-bottom: @spacer-y !important; }
.p-a-xs { padding: (@spacer-y / 4) !important; }
.p-t-xs { padding-top: (@spacer-y / 4) !important; }
.p-r-xs { padding-right: (@spacer-y / 4) !important; }
.p-b-xs { padding-bottom: (@spacer-y / 4) !important; }
.p-l-xs { padding-left: (@spacer-y / 4) !important; }
.p-x-xs { padding-right: (@spacer-x / 4) !important; padding-left: (@spacer-x / 4) !important; }
.p-y-xs { padding-top: (@spacer-y / 4) !important; padding-bottom: (@spacer-y / 4) !important; }
.p-a-sm { padding: (@spacer-y / 2) !important; }
.p-t-sm { padding-top: (@spacer-y / 2) !important; }
.p-r-sm { padding-right: (@spacer-y / 2) !important; }
.p-b-sm { padding-bottom: (@spacer-y / 2) !important; }
.p-l-sm { padding-left: (@spacer-y / 2) !important; }
.p-x-sm { padding-right: (@spacer-x / 2) !important; padding-left: (@spacer-x / 2) !important; }
.p-y-sm { padding-top: (@spacer-y / 2) !important; padding-bottom: (@spacer-y / 2) !important; }
.p-a-md { padding: (@spacer-y * 1.5) !important; }
.p-t-md { padding-top: (@spacer-y * 1.5) !important; }
.p-r-md { padding-right: (@spacer-y * 1.5) !important; }
.p-b-md { padding-bottom: (@spacer-y * 1.5) !important; }
.p-l-md { padding-left: (@spacer-y * 1.5) !important; }
.p-x-md { padding-right: (@spacer-x * 1.5) !important; padding-left: (@spacer-x * 1.5) !important; }
.p-y-md { padding-top: (@spacer-y * 1.5) !important; padding-bottom: (@spacer-y * 1.5) !important; }
.p-a-lg { padding: (@spacer-y * 3) !important; }
.p-t-lg { padding-top: (@spacer-y * 3) !important; }
.p-r-lg { padding-right: (@spacer-y * 3) !important; }
.p-b-lg { padding-bottom: (@spacer-y * 3) !important; }
.p-l-lg { padding-left: (@spacer-y * 3) !important; }
.p-x-lg { padding-right: (@spacer-x * 3) !important; padding-left: (@spacer-x * 3) !important; }
.p-y-lg { padding-top: (@spacer-y * 3) !important; padding-bottom: (@spacer-y * 3) !important; }

20
themes/demo/assets/less/layouts/all.less
View File

@ -1,20 +0,0 @@
//
// Layouts
//
// Styles specific to different page layouts.
//
// Used by the fixed navigation
body {
padding-top: 50px;
}
header#layout-header {
.navbar-brand {
padding-left: 50px;
background-image: url('../images/october.png');
background-size: auto 80%;
background-repeat: no-repeat;
background-position: 7px 50%;
}
}

10
themes/demo/assets/less/layouts/default.less Normal file
View File

@ -0,0 +1,10 @@
//
// Layouts
//
// Styles specific to different page layouts.
//
// Used by the fixed navbar
body {
padding-top: 70px;
}

5
themes/demo/assets/less/pages/ajax.less Normal file
View File

@ -0,0 +1,5 @@
//
// AJAX
//
// Styles specific to the AJAX page
//

5
themes/demo/assets/less/pages/all.less
View File

@ -1,5 +0,0 @@
//
// Pages
//
// Styles specific to individual pages.
//

5
themes/demo/assets/less/pages/plugins.less Normal file
View File

@ -0,0 +1,5 @@
//
// Plugins
//
// Styles specific to the plugins page
//

53
themes/demo/assets/less/theme.less
View File

@ -1,21 +1,46 @@
//
// Display warning notice inside the CSS file to deter any cowboy coding
// Boot theme
//
/*
*
* !! WARNING !! THIS CSS FILE HAS BEEN AUTOMATICALLY GENERATED !!
*
* Any modifications made to this file will be lost next time it is generated.
* Consider modifying the 'theme.less' file found in the 'less' folder instead
* or create a new custom CSS file to override the rules in this one.
*
* !! YOU HAVE BEEN WARNED !! MODIFY THIS FILE AT YOUR OWN RISK !!
*
*/
@import "theme/boot";
//
// Theme Includes
// Fonts
//
@import "theme/all";
@import "theme/fonts";
//
// Controls
//
// These are interactive controls used in the site.
//
@import "controls/example";
//
// Elements
//
// These are reusable elements used in the site.
//
@import "elements/callouts";
@import "elements/utilities";
@import "elements/navbar";
//
// Layouts
//
// Include these here, or directly on the layouts
//
@import "layouts/default";
//
// Pages
//
// Include these here, or directly on the pages
//
@import "pages/ajax";
@import "pages/plugins";

20
themes/demo/assets/less/theme/all.less
View File

@ -1,20 +0,0 @@
//
// Boot variables and mixins
//
@import "boot";
//
// Vendor and Fonts
//
@import "vendor";
@import "fonts";
//
// Pages, Layouts and Controls
//
@import "../pages/all";
@import "../layouts/all";
@import "../controls/all";

32
themes/demo/assets/less/theme/variables.less
View File

@ -6,13 +6,41 @@
// Icons
// --------------------------------------------------
@FontAwesomePath: "../vendor/font-awesome/font";
// Brands
// --------------------------------------------------
@brand-primary: #3097d1;
@brand-info: #8eb4cb;
@brand-success: #4eb76e;
@brand-warning: #cbb956;
@brand-danger: #bf5329;
// Typography
// --------------------------------------------------
@font-family-sans-serif: "lato", sans-serif;
@line-height-base: 1.6;
@font-size-base: 16px;
@text-color: #586667;
@headings-color: #1f3f50;
@jumbotron-heading-color: @headings-color;
// Spacing
// --------------------------------------------------
@spacer: 20px;
@spacer-y: @spacer;
@spacer-x: @spacer;
// Navbar
// --------------------------------------------------
@navbar-height: 70px;
@navbar-margin-bottom: 0;
@navbar-inverse-bg: #000;
@navbar-inverse-link-color: rgba(255,255,255,0.6);
@navbar-link-stripe-color-active: #000;
@navbar-link-stripe-color-hover: #e67e22;
// Callouts
// --------------------------------------------------

66
themes/demo/assets/less/vendor.less Normal file
View File

@ -0,0 +1,66 @@
//
// Vendor file
//
// Includes all vendor LESS files that contain usable output
//
@import "theme/boot";
//
// Bootstrap
//
// Reset
@import "../vendor/bootstrap/less/normalize";
@import "../vendor/bootstrap/less/print";
// Core CSS
@import "../vendor/bootstrap/less/scaffolding";
@import "../vendor/bootstrap/less/type";
@import "../vendor/bootstrap/less/code";
@import "../vendor/bootstrap/less/grid";
@import "../vendor/bootstrap/less/tables";
@import "../vendor/bootstrap/less/forms";
@import "../vendor/bootstrap/less/buttons";
// Components
@import "../vendor/bootstrap/less/component-animations";
@import "../vendor/bootstrap/less/dropdowns";
@import "../vendor/bootstrap/less/button-groups";
@import "../vendor/bootstrap/less/input-groups";
@import "../vendor/bootstrap/less/navs";
@import "../vendor/bootstrap/less/navbar";
@import "../vendor/bootstrap/less/breadcrumbs";
@import "../vendor/bootstrap/less/pagination";
@import "../vendor/bootstrap/less/pager";
@import "../vendor/bootstrap/less/labels";
@import "../vendor/bootstrap/less/badges";
@import "../vendor/bootstrap/less/jumbotron";
@import "../vendor/bootstrap/less/thumbnails";
@import "../vendor/bootstrap/less/alerts";
@import "../vendor/bootstrap/less/progress-bars";
@import "../vendor/bootstrap/less/media";
@import "../vendor/bootstrap/less/list-group";
@import "../vendor/bootstrap/less/panels";
@import "../vendor/bootstrap/less/wells";
@import "../vendor/bootstrap/less/close";
// Components w/ JavaScript
@import "../vendor/bootstrap/less/modals";
@import "../vendor/bootstrap/less/tooltip";
@import "../vendor/bootstrap/less/popovers";
@import "../vendor/bootstrap/less/carousel";
// Utility classes
@import "../vendor/bootstrap/less/utilities";
@import "../vendor/bootstrap/less/responsive-utilities";
//
// Font Awesome
//
@import "../vendor/font-awesome/less/path";
@import "../vendor/font-awesome/less/core";
@import "../vendor/font-awesome/less/bootstrap";
@import "../vendor/font-awesome/less/extras";
@import "../vendor/font-awesome/less/icons";

0
themes/demo/assets/javascript/jquery.js → themes/demo/assets/vendor/jquery.js vendored
View File

54
themes/demo/layouts/default.htm
View File

@ -4,45 +4,22 @@ description = "Default layout"
<html>
<head>
<meta charset="utf-8">
<title>OctoberCMS - {{ this.page.title }}</title>
<title>October CMS - {{ this.page.title }}</title>
<meta name="description" content="{{ this.page.meta_description }}">
<meta name="title" content="{{ this.page.meta_title }}">
<meta name="author" content="OctoberCMS">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="OctoberCMS">
<link rel="icon" type="image/png" href="{{ 'assets/images/october.png'|theme }}" />
<link rel="icon" type="image/png" href="{{ 'assets/images/october.png'|theme }}">
<link href="{{ 'assets/css/vendor.css'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">
{% styles %}
<link href="{{ [
'assets/css/theme.css'
]|theme }}" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header id="layout-header">
<!-- Nav -->
<nav id="layout-nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ 'home'|page }}">October Demo</a>
</div>
<div class="collapse navbar-collapse navbar-main-collapse">
<ul class="nav navbar-nav">
<li class="{% if this.page.id == 'home' %}active{% endif %}"><a href="{{ 'home'|page }}">Basic concepts</a></li>
<li class="{% if this.page.id == 'ajax' %}active{% endif %}"><a href="{{ 'ajax'|page }}">AJAX framework</a></li>
<li class="{% if this.page.id == 'plugins' %}active{% endif %}"><a href="{{ 'plugins'|page }}">Plugin components</a></li>
</ul>
</div>
</div>
</nav>
{% partial 'site/header' %}
</header>
<!-- Content -->
@ -52,26 +29,13 @@ description = "Default layout"
<!-- Footer -->
<footer id="layout-footer">
{% partial "footer" %}
{% partial 'site/footer' %}
</footer>
<!-- Scripts -->
<script src="{{ [
'assets/javascript/jquery.js',
'assets/vendor/bootstrap/js/transition.js',
'assets/vendor/bootstrap/js/alert.js',
'assets/vendor/bootstrap/js/button.js',
'assets/vendor/bootstrap/js/carousel.js',
'assets/vendor/bootstrap/js/collapse.js',
'assets/vendor/bootstrap/js/dropdown.js',
'assets/vendor/bootstrap/js/modal.js',
'assets/vendor/bootstrap/js/tooltip.js',
'assets/vendor/bootstrap/js/popover.js',
'assets/vendor/bootstrap/js/scrollspy.js',
'assets/vendor/bootstrap/js/tab.js',
'assets/vendor/bootstrap/js/affix.js',
'assets/javascript/app.js'
]|theme }}"></script>
<script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>
<script src="{{ 'assets/vendor/bootstrap.js'|theme }}"></script>
<script src="{{ 'assets/javascript/app.js'|theme }}"></script>
{% framework extras %}
{% scripts %}

21
themes/demo/pages/home.htm
View File

@ -28,9 +28,7 @@ layout = "default"
The layout file <code>layouts/default.htm</code> defines the page scaffold &mdash;
everything that repeats on each page, such as the HTML, HEAD and BODY tags, StyleSheet and JavaScript references.
</p>
<p>
The page menu and footer in the Demo theme are defined in the layout as well.
</p>
<p>The page menu and footer in the Demo theme are defined in the layout as well.</p>
<hr />
@ -42,9 +40,9 @@ layout = "default"
<p>
The page file <code>pages/home.htm</code> defines the page URL (<code>/</code> for this page) and the page content.
Pages are rendered inside layouts with this function that should be called in the layout code:
<pre>{{ "{% page %}" }}</pre>
Using a layout for pages is optional &mdash; you can define everything right in the page file.
</p>
<pre>{{ "{% page %}" }}</pre>
<p>Using a layout for pages is optional &mdash; you can define everything right in the page file.</p>
<hr />
@ -54,12 +52,13 @@ layout = "default"
<i class="icon-tags"></i> &nbsp; Partials contain reusable chunks of HTML markup.
</p>
<p>
Partials are chunks of HTML defined in separate files which can be included anywhere.
In this example we placed the footer content to the <code>partials/footer.htm</code> partial.
Partials are chunks of HTML defined in separate files that can be included anywhere.
Partials are rendered with:
<pre>{{ "{% partial \"partial-name\" %}" }}</pre>
It can be used inside pages, templates or other partials.
</p>
<pre>{{ "{% partial \"partial-name\" %}" }}</pre>
<p>You may place partials inside folders too. In this example we placed the footer content to the <code>partials/site/footer.htm</code> partial.</p>
<pre>{{ "{% partial \"site/footer\" %}" }}</pre>
<p>Partials can be used inside pages, layouts or other partials.</p>
<hr />
@ -88,11 +87,11 @@ layout = "default"
</p>
<div class="row">
<div class="col-md-6">
Layout file:
<p>Layout file:</p>
<pre>{% content "placeholder/layout.txt" %}</pre>
</div>
<div class="col-md-6">
Page file:
<p>Page file:</p>
<pre>{% content "placeholder/page.txt" %}</pre>
</div>
</div>

0
themes/demo/partials/footer.htm → themes/demo/partials/site/footer.htm
View File

22
themes/demo/partials/site/header.htm Normal file
View File

@ -0,0 +1,22 @@
<!-- Nav -->
<nav id="layout-nav" class="navbar navbar-inverse navbar-fixed-top navbar-autohide" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ 'home'|page }}">October Demo</a>
</div>
<div class="collapse navbar-collapse navbar-main-collapse">
<ul class="nav navbar-nav">
<li class="separator hidden-xs"></li>
<li class="{% if this.page.id == 'home' %}active{% endif %}"><a href="{{ 'home'|page }}">Basic concepts</a></li>
<li class="{% if this.page.id == 'ajax' %}active{% endif %}"><a href="{{ 'ajax'|page }}">AJAX framework</a></li>
<li class="{% if this.page.id == 'plugins' %}active{% endif %}"><a href="{{ 'plugins'|page }}">Plugin components</a></li>
</ul>
</div>
</div>
</nav>