path: root/djangoproject/templates/styleguide.html

{% extends "base.html" %}

{% block title %}Django Web Styleguide{% endblock %}

{% block body_class %}styleguide{% endblock %}

{% block header %}<p>Style Guide</p>{% endblock %}

{% block content %}

  <div class="section">
    <h1>Django Web Style Guide</h1>
    <h4>Updated December 15, 2014</h4>
    <div data-xrayhtml>
      <p>
        This styleguide is a reference to maintain a design standard on djangoproject.com and related Django websites. It is meant to provide a source of available elements, and give insight into which elements to use where.
      </p>
      <p>
        It is best practice to use elements from this guide to serve any design needs before introducing new elements. If new elements must be introduced to accommodate new content, please be mindful of the guidelines here and take the liberty to update the guide.
      </p>
    </div>
  </div>

  <div class="section" id="layout">
    <h2>Page Layout</h2>

    <h3 id="layout-sidebarleft">Sidebar left</h3>

    <p>
      A sidebar on the left side of the page is the default layout, and used for most pages. This layout is used when the sidebar is used mainly for navigating.
    </p>

    <div class="example">
      <a class="iframe" href="{% url 'weblog:index' %}" target="_blank">
        <iframe src="{% url 'weblog:index' %}"></iframe>
      </a>
    </div>

    <h3 id="layout-sidebarright">Sidebar right</h3>

    <p>
      A sidebar on the right side of the page should be used to show additional, secondary content.
    </p>

    <div class="example">
      <a class="iframe" href="{% url 'download' %}" target="_blank">
        <iframe src="{% url 'download' %}"></iframe>
      </a>
    </div>

    <h3 id="layout-singlecolumn">Single column</h3>

    <p>
      Single column layout should be used for single-purpose pages, such as marketing pages, landing pages, or other pages where the attention of the user should be intentionally narrowed. The column is purposefully limited to 740px to keep text line-lengths at a nice, readable width.
    </p>

    <div class="example">
      <a class="iframe" href="{% url 'overview' %}" target="_blank">
        <iframe src="{% url 'overview' %}"></iframe>
      </a>
    </div>

    <h3 id="layout-responsive">Responsive</h3>

    <p>
      <em>Djangoproject.com</em> uses responsive styles to scale the above layouts to fit desktop and tablet browsers comfortably. When visited on a mobile device, all layouts are condensed to single-column. Mobile styles are purposefully not loaded on desktop, for example, when the browser window is scaled very small.
    </p>

  </div>

  <div class="section" id="colors">
    <h2>Colors</h2>

    <h3 id="colors-primarycolors">Primary colors</h3>

    <p>
      Colors used for main text, links and backgrounds. Hover each swatch to see the corresponding SASS variable name.
    </p>

    <ul class="swatches">
      <li class="text" title="Text"></li>
      <li class="green-dark" title="Dark Green"></li>
      <li class="green" title="Green"></li>
      <li class="green-light" title="Light Green"></li>
      <li class="white" title="White"></li>
      <li class="red-dark" title="Dark Red"></li>
    </ul>

    <h3 id="colors-secondarycolor">Secondary colors</h3>

    <p>Colors used for hover states, alternate texts, borders, etc. These are mostly slight variations of the primary colors to be paired.</p>

    <ul class="swatches">
      <li class="green-medium-dark" title="Medium Dark Green"></li>
      <li class="green-medium" title="Medium Green"></li>
      <li class="green-very-light" title="Very Light Green"></li>
      <li class="text-light" title="Text Light"></li>
      <li class="gray-line" title="Gray Line"></li>
      <li class="red" title="Red"></li>
    </ul>

  </div>

  <div class="section" id="typography">
    <h2>Typography</h2>

    <p>
      The djangoproject.com website is set in <em><a href="https://fonts.google.com/specimen/Roboto">Roboto</a></em>, a sans-serif font. 5 styles of this typeface are provided, <em>Light (300)</em>, <em>Normal (400)</em>, <em>Normal Italic</em>, <em>Bold (700)</em> and <em>Bold Italic</em>. Refrain from using weights and italics that are not loaded.
    </p>

    <p>
      For documentation styles, the monospace font is <em><a href="https://fonts.google.com/specimen/Fira+Mono">Fira Mono</a></em>. <em>Normal (400)</em> and <em>Bold (700)</em> weights are available.
    </p>

    <h3 id="typography-maincontent">Main content</h3>

    <div class="example">

      <div class="copy-banner">
        <div class="container">
          <p>Copy Banner text - 32px Roboto Light</p>
        </div>
      </div>

      <h1>H1 Header - 32px Roboto Normal</h1>
      <h2>H2 Header - 24px Roboto Normal</h2>
      <h3>H3 Header - 20px Roboto Bold</h3>
      <h4>H4 Header - 16px Roboto Bold</h4>
      <h5>H5 Header - 16px Roboto Normal</h5>


      <p>
        Serif paragraph type. Palatino font style should be used for all text copy, except for the documentation and in sidebars.
      </p>

      <pre>Monospace type. Used exclusively in documentation and code examples.</pre>

    </div>

    <h3 id="typography-secondarycontent">Secondary content</h3>

    <div class="example">

      <div role="complementary">
        <h1>H1 Header - 28px Roboto Normal</h1>
        <h2>H2 Header - 20px Roboto Normal</h2>
        <h3>H3 Header - 18px Roboto Normal</h3>
        <h4>H4 Header - 16px Roboto Bold</h4>

        <p>
          Sans-serif paragraph type.  Roboto  font is used in documentation paragraph text, sidebars, headers, and footers.
        </p>
      </div>

    </div>



  </div>

  <div class="section" id="icons">
    <h2>Icons</h2>
    <p><em>Djangoproject.com</em> makes use of <a href="https://fontawesome.com/"><em>Font Awesome</em></a> for any icons throughout the interface. This all-inclusive webfont icon set eliminates the need to design icons for specific purposes, and keeps the icon language consistent throughout.</p>

    <div class="example">
      <big>
        <span class="icon icon-flash"></span>
        <span class="icon icon-briefcase"></span>
        <span class="icon icon-lock"></span>
        <span class="icon icon-cogs"></span>
        <span class="icon icon-dashboard"></span>
      </big>
      <span class="icon icon-link"></span>
      <span class="icon icon-file-text-o"></span>
    </div>

  </div>



  <div class="section" id="elements">
    <h2>Page Elements</h2>

    <h3 id="elements-buttons">
      Buttons
    </h3>

    <p>Call to action buttons are used throughout the site, to focus users' attention on important flows of the site. An outline version is used when the call to action is less important.</p>

    <div class="example">
      <span class="cta">Call to action</span>
      <span class="cta outline">Button outline</span>
    </div>

    <h3 id="elements-forms">
      Forms
    </h3>

    <h4>General forms</h4>

    <div class="example">

      <form method="post" action="" class="form-general">

        <fieldset>
          <input id="id_username" maxlength="30" name="username" type="text" placeholder="Username" />
          <input id="id_email" name="email" type="email" placeholder="Email address" />
          <input id="id_password1" name="password1" type="password" placeholder="Password" />
        </fieldset>

        <fieldset>
          <select>
            <option>Select example</option>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
        </fieldset>

        <fieldset>
          <label>
            <input type="checkbox" />
            Receive newsletter updates
          </label>
        </fieldset>

        <fieldset>
          <button type="submit">Submit</button>
        </fieldset>

      </form>

    </div>

    <h4>Inline field forms</h4>

    <div class="example">
      <div class="form-email">
        <form class="form-input">
          <input type="email" name="email" placeholder="Enter Email">
          <button type="submit">
            <i class="icon icon-envelope-o"></i>
            <span class="visuallyhidden">Subscribe</span>
          </button>
        </form>
      </div>


      <form action="#" class="form-input" role="search">
        <label class="visuallyhidden" for="news-search">Search:</label>
        <input type="text" name="news-search" id="news-search" placeholder="Search" />
        <button type="submit">
          <i class="icon icon-search"></i>
          <span class="visuallyhidden">Search</span>
        </button>
      </form>
    </div>

    <h3 id="elements-lists">
      Lists
    </h3>

    <div class="example">
      <div role="complementary">

        <h2>Contents outline</h2>

        <ul class="list-outline">
          <li>
            <a class="reference internal" href="#">Making queries</a>
            <ul>
              <li>
                <a class="reference internal" href="#creating-objects">Creating objects</a>
              </li>
              <li>
                <a class="reference internal" href="#saving-changes-to-objects">Saving changes to objects</a>
                <ul>
                  <li>
                    <a class="reference internal" href="#saving-foreignkey-and-manytomanyfield-fields">Saving <tt class="docutils literal"><span class="pre">ForeignKey</span></tt> and <tt class="docutils literal"><span class="pre">ManyToManyField</span></tt> fields</a>
                  </li>
                </ul>
              </li>
              <li>
                <a class="reference internal" href="#retrieving-objects">Retrieving objects</a>
                <ul>
                  <li><a class="reference internal" href="#retrieving-all-objects">Retrieving all objects</a></li>
                  <li><a class="reference internal" href="#retrieving-specific-objects-with-filters">Retrieving specific objects with filters</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>

    <div class="example">

      <div role="complementary">

        <h3>List links</h3>
        <dl class="list-links">

          <dt><a href="#">Karen Tracey joins the DSF board</a></dt>
          <dd>
            by Russell Keith-Magee on Sep. 20, 2013
          </dd>
          <dt><a href="#">Karen Tracey joins the DSF board</a></dt>
          <dd>
            by Russell Keith-Magee on Sep. 20, 2013
          </dd>
          <dt><a href="#">Karen Tracey joins the DSF board</a></dt>
          <dd>
            by Russell Keith-Magee on Sep. 20, 2013
          </dd>

        </dl>
        <a href="{% url 'weblog:index' %}" class="link-readmore">See all News</a>
      </div>
    </div>

    <div class="example">

      <div role="complementary">

        <h3>List links small</h3>
        <dl class="list-links-small news-list">

          <dt><a href="#">Karen Tracey joins the DSF board</a></dt>
          <dd>
            by Russell Keith-Magee on Sep. 20, 2013
          </dd>
          <dt><a href="#">Karen Tracey joins the DSF board</a></dt>
          <dd>
            by Russell Keith-Magee on Sep. 20, 2013
          </dd>
          <dt><a href="#">Karen Tracey joins the DSF board</a></dt>
          <dd>
            by Russell Keith-Magee on Sep. 20, 2013
          </dd>

        </dl>
        <a href="{% url 'weblog:index' %}" class="link-readmore">See all News</a>
      </div>
    </div>

    <div class="example">

      <div class="list-collapsing-header">
        <h2>List collapsing</h2>
      </div>

      <ul class="list-collapsing">
        <li>
          <h2 class="bullet-icon"><i class="icon icon-rss"></i> List section</h2>
          <div class="collapsing-content">
            <dl class="list-links">
              <dt><a href="#">Now it's your turn</a></dt>
              <dd>March 29th, 2013 at 4 p.m. by <a href="#">Luke Plant</a></dd>
              <dt><a href="#">Mails amb Django - III</a></dt>
              <dd>March 28th, 2013 at 12:18 p.m. by <a href="#">Antoni Aloy López</a></dd>
              <dt><a href="#">Useful Packages for Django projects (part 1)</a></dt>
              <dd>March 28th, 2013 at 11:40 a.m. by <a href="#">Hector Garcia</a></dd>
              <dt><a href="#">Overloading Django Form Fields</a></dt>
              <dd>March 27th, 2013 at 4 p.m. by <a href="#">pydanny's blog</a></dd>
              <dt><a href="#">Django MONTH_CHOICES</a></dt>
              <dd>March 26th, 2013 at 4:10 p.m. by <a href="#">Dustin Davis</a></dd>
            </dl>
            <p class="meta"><a href="#">View more</a> or <a href="#">Add to your feed</a></p>
          </div>
        </li>
        <li>
          <h2 class="bullet-icon"><i class="icon icon-rss"></i> List section</h2>
          <div class="collapsing-content">
            <dl class="list-links">
              <dt><a href="#">Now it's your turn</a></dt>
              <dd>March 29th, 2013 at 4 p.m. by <a href="#">Luke Plant</a></dd>
              <dt><a href="#">Mails amb Django - III</a></dt>
              <dd>March 28th, 2013 at 12:18 p.m. by <a href="#">Antoni Aloy López</a></dd>
              <dt><a href="#">Useful Packages for Django projects (part 1)</a></dt>
              <dd>March 28th, 2013 at 11:40 a.m. by <a href="#">Hector Garcia</a></dd>
              <dt><a href="#">Overloading Django Form Fields</a></dt>
              <dd>March 27th, 2013 at 4 p.m. by <a href="#">pydanny's blog</a></dd>
              <dt><a href="#">Django MONTH_CHOICES</a></dt>
              <dd>March 26th, 2013 at 4:10 p.m. by <a href="#">Dustin Davis</a></dd>
            </dl>
            <p class="meta"><a href="#">View more</a> or <a href="#">Add to your feed</a></p>
          </div>
        </li>
        <li>
          <h2 class="bullet-icon"><i class="icon icon-rss"></i> List section</h2>
          <div class="collapsing-content">
            <dl class="list-links">
              <dt><a href="#">Now it's your turn</a></dt>
              <dd>March 29th, 2013 at 4 p.m. by <a href="#">Luke Plant</a></dd>
              <dt><a href="#">Mails amb Django - III</a></dt>
              <dd>March 28th, 2013 at 12:18 p.m. by <a href="#">Antoni Aloy López</a></dd>
              <dt><a href="#">Useful Packages for Django projects (part 1)</a></dt>
              <dd>March 28th, 2013 at 11:40 a.m. by <a href="#">Hector Garcia</a></dd>
              <dt><a href="#">Overloading Django Form Fields</a></dt>
              <dd>March 27th, 2013 at 4 p.m. by <a href="#">pydanny's blog</a></dd>
              <dt><a href="#">Django MONTH_CHOICES</a></dt>
              <dd>March 26th, 2013 at 4:10 p.m. by <a href="#">Dustin Davis</a></dd>
            </dl>
            <p class="meta"><a href="#">View more</a> or <a href="#">Add to your feed</a></p>
          </div>
        </li>
      </ul>

    </div>
  </div>

{% endblock content %}

{% block content-related %} {# Always include <h1> label and <div> with aria role. #}
  <div role="complementary">
    <h2 id="aside-header">Contents</h2>
    <ul class="list-outline">
      <li><a class="reference internal" href="#">Django Web Style Guide</a>
        <ul>
          <li>
            <a class="reference internal" href="#layout">Page Layout</a>
            <ul>
              <li><a href="#layout-sidebarleft">Sidebar Left</a></li>
              <li><a href="#layout-sidebarright">Sidebar Right</a></li>
              <li><a href="#layout-singlecolumn">Single Column</a></li>
              <li><a href="#layout-responsive">Responsive</a></li>
            </ul>
          </li>
          <li>
            <a class="reference internal" href="#colors">Colors</a>
          </li>
          <li>
            <a class="reference internal" href="#typography">Typography</a>
            <ul>
              <li><a href="#typography-maincontent">Main content</a></li>
              <li><a href="#typography-secondarycontent">Secondary content</a></li>
            </ul>
          </li>
          <li><a class="reference internal" href="#icons">Icons</a></li>
          <li><a class="reference internal" href="#elements">Page Elements</a><ul>
            <li><a href="#elements-buttons" class="reference internal">Buttons</a></li>
            <li><a href="#elements-forms" class="reference internal">Forms</a></li>
            <li><a href="#elements-lists" class="reference internal">Lists</a></li>
          </ul></li>
        </ul>
      </li>
    </ul>
  </div>
{% endblock content-related %}