App Theme

Bootstrap based theme, for application based websites.

Download on Github

Example Uses

Single pager example Single pager
App example App
Dashboard example Dashboard
Pricing example Pricing

Getting Started

This theme is a lightly modified version of what you get out of the box with Bootstrap. If you are not familiar with Bootstrap, a good first step would be to check out the docs here.

CDN (Content Delivery Network)

Thanks to RawGit, we can provide CDN links for our latest compiled and minified CSS and JavaScript:

<!-- OK Panel CSS -->
<link rel="stylesheet" href="//a.okfn.org/html/oki/panel/assets/css/frontend.css">

<!-- Theme CSS -->
<link rel="stylesheet" href="//cdn.rawgit.com/okfn/app-theme/v2.1.0/css/main.css">

<!-- Optional Modernizr -->
<script src="//cdn.rawgit.com/okfn/app-theme/2114842a6bdf0c49eb94faca4b7c5dc4a29d2249/js/vendor/modernizr-2.8.3.min.js"></script>

<!-- JQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<!-- Theme plugins JS -->
<script src="//cdn.rawgit.com/okfn/app-theme/00464f102ee73ea45c1ad5c0dd6c77708d6dbdc6/js/plugins.min.js"></script>

<!-- OK Panel JS -->
<script src="//a.okfn.org/html/oki/panel/assets/js/frontend.js"></script>

<!-- Theme JS -->
<script src="//cdn.rawgit.com/okfn/app-theme/1a0030fe829abeaf25d87ed4923efed324e77259/js/main.min.js"></script>

Source Code

All the theme files can be downloaded from here. This repository contains both the precompiled CSS and JavaScript referenced above, as well as the source files.

SASS

Stylesheets for this theme are compiled from SASS files found in css/sass. Bootstrap (3.3.3) makes up the majority of these files css/sass/bootstrap. If you make changes to the SASS files, they will need to be recompiled to css/main.css.

CSS

The main CSS file for this theme can be found here css/main.css. Additional CSS files for the Goodtables and Spending Dashboard examples, can be found in the examples folder.

JS

Javascript files can be found in js. This folder contains main.js where you can add any custom javascript, plugins.js for jQuery/helper plugins, and vendor where you’ll find Jquery, Bootstrap and Modernizr.

Plugins included:
  • equalize.js
  • smooth-scroll
  • prism.js

Markup

As a starting point, you can use the basic template below, or modify one the above examples. This HTML closely resembles what you might use with a vanilla Bootstrap instance, there are a few notable additions however.

Open Knowledge Ribbon / Panel

Lines 11, 24, 28 and 104 collectively contain all the parts required for the Open Knowledge Panel.

Logo Icon

The theme includes a quick and easy way to give your project a graphical logo. Choose one of the Bootstrap glyphicons and use it as demonstrated on line 38.

Release Badge

On line 41 you’ll see a method of adding an “alpha” or “beta” badge, after the logo.

Smooth Scroll

This theme includes a ‘smooth scroll’ plugin. Activate the scroll animation on ID links by adding data-scroll to the anchor. Example on line 47.

Inverse Jumbotron

The Bootstrap ‘Jumbotron’ can be given alternative styling by adding a class of inverse. See line 54.

Open Knowledge Footer

From line 68 to 99 you’ll find the standard Open Knowledge footer.

Full Width Panels

A .panel placed directly inside the body is styled slightly differently. See quote section in single page example.

Basic template
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>My Awesome App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- OK Panel CSS -->
  <link rel="stylesheet" href="//a.okfn.org/html/oki/panel/assets/css/frontend.css">

  <!-- Theme CSS -->
  <link rel="stylesheet" href="//cdn.rawgit.com/okfn/app-theme/v2.1.0/css/main.css">

  <!-- Optional Modernizr -->
  <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>

<body>
  <!--[if lt IE 8]>
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
  <div id="ok-panel" class="closed"><div class="container"><iframe src="//a.okfn.org/html/oki/panel/panel.html" scrolling="no"></iframe></div></div>

  <nav class="navbar navbar-static-top">
    <div class="container">
      <a class="ok-ribbon" href="//okfn.org/"><img src="//a.okfn.org/html/oki/panel/assets/images/oki-ribbon.png" alt="Open Knowledge International"></a>

      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <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 has-icon" href="./">
          <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
          <span class="text">My Awesome App</span>
        </a>
        <span class="release badge">alpha</span>
      </div>

      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="page.html">Link to page</a></li>
          <li><a href="#anID" data-scroll >Link to section of page</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- page content start -->
  <div class="jumbotron inverse">
    <div class="container">
      <h1>My Awesome App</h1>
      <p>Introductory sentence or tagline.</p>
    </div>
  </div>

  <div class="container">

    <p>Hello, world!</p>

  </div>

  <!-- footer start -->
    <footer class="site-footer">
      <div class="container">
        <a class="footer-logo" href="https://okfn.org/">
          <img src="https://a.okfn.org/img/oki/landscape-white-468x122.png" alt="Open Knowledge">
        </a>
        <div class="footer-links">
          <ul>
            <li><a href="https://okfn.org/privacy-policy/">Privacy policy</a></li>
            <li><a href="https://okfn.org/ip-policy/">IP policy</a></li>
            <li><a href="https://okfn.org/cookie-policy/">Cookie policy</a></li>
            <li><a href="https://okfn.org/terms-of-use/">Terms of use</a></li>
          </ul>
          <ul class="footer-social">
            <li><a href="https://facebook.com/OKFNetwork">
              <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/facebook-logo-circle.png" alt="Facebook">
              </a></li>
            <li>
              <a href="https://twitter.com/okfn">
                <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/twitter-logo-circle.png" alt="Twitter">
              </a>
            </li>
            <li>
              <a href="https://www.youtube.com/user/openknowledgefdn">
                <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/youtube-logo-circle.png" alt="YouTube">
              </a>
            </li>
          </ul>
        </div>
        <hr>
        <p>Open Knowledge Foundation is incorporated in England and Wales as a company Limited by guarantee. Company no. 05133759. Registered address: St. John’s Innovation Centre, Cowley Road, Cambridge, CB4 0WS, UK. VAT Registration no. GB 984404989.</p>
      </div>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="//a.okfn.org/html/oki/panel/assets/js/frontend.js" type="text/javascript"></script>
    <script src="js/main.js"></script>
  </body>
</html>