openproject/frontend/app/assets/styleguide.jade

doctype html
html(id="STYLEGUIDE_HTML_ID")
  head
    meta(charset="utf-8")
    meta(content="IE=edge,chrome=1", http-equiv="X-UA-Compatible")
    meta(content="The LivingStyleGuide Gem – http://livingstyleguide.org", name="generator")
    meta(name="description", content=title)
    title= title
    link(rel='stylesheet', type='text/css', href='/assets/bundles/openproject-global.css')
    != stylesheet
    script(src='/assets/bundles/openproject-global.js')
    script(src='/assets/tooltips.js')
    script.
      angular.module('openproject-style-guide', ['ui.select', 'ngSanitize'])

        // Add uiComponents to the styleguide.
        // In order to be able to do that, we have to mock some
        // services that directives in uiComponents rely on.
      angular.module('openproject-style-guide')
        .service('ActivityService', function() {} )
        .service('ConfigurationService', function() {} )
        .service('AutoCompleteHelper', function() {} )
        .requires.push('openproject.uiComponents');

    // get all of angular to be known
    script(src='/assets/bundles/openproject-core-app.js')
    // avoid errors of undefined jsToolBar
    script(src='/assets/jstoolbar/jstoolbar.js')

  body.livingstyleguide(ng-app='openproject-style-guide', ng-strict-di=true)

    header.livingstyleguide--header
      .styleguide-banner
        h1.styleguide-banner--text= title

    nav.styleguide-nav
      ul.styleguide-nav--menu-items
        li: a(href="#color-variables") Colors
        li: a(href="#typography") Typography
        li: a(href="#forms") Forms
        li: a(href="#flash-messages") Flash Messages
        li: a(href="#notifications") Notifications
        li: a(href="#buttons") Buttons
        li: a(href="#boxes") Boxes
        li: a(href="#pagination") Pagination

    section.livingstyleguide--intro
      p  

    .livingstyleguide--container
      != content

    footer.livingstyleguide--footer
      Copyright © 2015 OpenProject - All rights reserved.