Skip to content

Commit

Permalink
Added styleguide. Refs django#99
Browse files Browse the repository at this point in the history
  • Loading branch information
@olasitarska
olasitarska committed Nov 16, 2014
1 parent e35ffbe commit 611d049
Show file tree
Hide file tree
Showing 2 changed files with 381 additions and 0 deletions.
3 changes: 3 additions & 0 deletions django_www/urls.py
View file
Expand Up @@ -54,6 +54,9 @@
# Trac schtuff
url(r'^trac/', include('tracdb.urls')),

# Styleguide
url(r'^styleguide/$', TemplateView.as_view(template_name='styleguide.html'), name="styleguide"),


url(r'^sitemap\.xml$', cache_page(60 * 60 * 6)(sitemap_views.sitemap), {'sitemaps': sitemaps}),
url(r'^weblog/', include('blog.urls')),
Expand Down
378 changes: 378 additions & 0 deletions templates/styleguide.html
View file
@@ -0,0 +1,378 @@
{% extends "base.html" %}
{% load static %}
{% block title %}Django Web Styleguide{% endblock %}
{% block body_class %}styleguide{% endblock %}

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

{% block content %}

<div class="section">
<h1>Django Web Style Guide</h1>
<h4>Updated October October 30, 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 'blog-index' %}" target="_blank">
<iframe src="{% url 'blog-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 'start' %}" target="_blank">
<iframe src="{% url 'start' %}"></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>
<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>
</ul>

<h3 id="colors-secondarycolor">Secondary colors</h3>
<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>
</ul>

</div>

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

<p>
The djangoproject.com website is set in both serif and sans-serif fonts. The serif font is <em>Palatino</em>, which is widely availabe as a system font. The sans-serif font is <em><a href="https://processtypefoundry.com/fonts/colfax/">Colfax Web</a></em>, a web font that is loaded via TypeKit. To keep page load down, only 2 styles of this typeface are loaded, <em>Regular</em> and <em>Medium</em>. For this reason, refrain from using italics with sans-serif type.
</p>

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

<div class="example">

<h1>H1 Header - 32px Colfax Regular</h1>
<h2>H2 Header - 24px Colfax Regular</h2>
<h3>H3 Header - 20px Colfax Medium</h3>
<h4>H4 Header - 16px Colfax Medium</h4>
<h5>H5 Header - 16px Colfax Regular</h5>


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

</div>

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

<div class="example">

<div role="complementary">
<h1>H1 Header - 28px Colfax Regular</h1>
<h2>H2 Header - 20px Colfax Regular</h2>
<h3>H3 Header - 18px Colfax Regular</h3>
<h4>H4 Header - 16px Colfax Medium</h4>

<p>
Sans-serif paragraph type. Colfax 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="http://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>

<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>
</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 'blog-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 'blog-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 %}

{% block content-related %} {# Always include <h1> label and <div> with aria role. #}
<h1 class="visuallyhidden">Additional Information</h1>
<div role="complementary">
<h2>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 %}

0 comments on commit 611d049

Please sign in to comment.