{% extends "lizard_ui/lizardbase.html" %}

{% block title %}Lizard-ui introduction{% endblock %}


{% block sidebar-title %}
Navigation
{% endblock %}

{% block sidebar %}
<div class="sidebarbox">
  <h2>Lizard-ui documentation</h2>
  <dl>
    <dt>
      <a href="blocks">Block IDs</a>
    </dt>
    <dd>
      Explanation of the various blocks you can override in templates.
    </dd>

    <dt>
      <a href="blocks_via_view">Blocks via view</a>
    </dt>
    <dd>
      Explanation of the various blocks that are handled through the class
      based view.
    </dd>

    <dt>
      <a href="textual">Textual content</a>
    </dt>
    <dd>
      Textual content in the main content area needs a bit of margin left/right.
    </dd>

    <dt>
      <a href="table">Table content</a>
    </dt>
    <dd>
      Table content in the main content area needs a bit of margin left/right.
    </dd>

    <dt>
      <a href="images">Image scaling</a>
    </dt>
    <dd>
      Automatic image scaling.
    </dd>

    <dt>
      <a href="vertical">Vertical division</a>
    </dt>
    <dd>
      Divide the main area in several equally-big vertical areas.
    </dd>

    <dt>
      <a href="jqueryui">Jquery ui</a>
    </dt>
    <dd>
      Jquery ui samples.
    </dd>

    <dt>
      <a href="icons">Icons</a>
    </dt>
    <dd>
      Icon classes.
    </dd>

    <dt>
      <a href="printbutton">Print button</a>
    </dt>
    <dd>
      Print button with screen resizing.
    </dd>

    <dt>
      <a href="collapsible">Collapsible sidebar headers</a>
    </dt>
    <dd>
      Now you see me, now you don't.
    </dd>

    <dt>
      <a href="sidebarstretch">Stretched sidebar</a>
    </dt>
    <dd>
      Stretch one sidebar item so that the sidebar is completely filled.
    </dd>

    <dt>
      <a href="accordion">Accordion</a>
    </dt>
    <dd>
      Accordion: drilling down into a selection.
    </dd>

    <dt>
      <a href="tree">Tree</a>
    </dt>
    <dd>
      Automatic tree setup.
    </dd>

    <dt>
      <a href="portaltabs">Portal tabs</a>
    </dt>
    <dd>
      Handling portal tabs.
    </dd>

    <dt>
      <a href="breadcrumbs">Breadcrumbs</a>
    </dt>
    <dd>
      Making breadcrumbs.
    </dd>

    <dt>
      <a href="appscreens">Application Screens</a>
    </dt>
    <dd>
      How to use application screens and icons.
    </dd>

  </dl>
</div>
{% endblock %}

{% block content %}
<div class="textual-content">
  <div class="hero-unit">
    <h1>Lizard UI</h1>
    <p>
      Lizard-ui provides the main user interface for the various lizard django
      sites. It is based, since early 2012,
      on <a href="http://twitter.github.com/bootstrap/">twitter bootstrap</a>.
    </p>
    <p>
      On the left side, you see examples of lizard-ui provided layouts that
      you can typically get the benefit of by using a simple html structure
      with a class or an ID.
    </p>
  </div>
</div>

{% endblock %}
