1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5
<html xmlns="http://www.w3.org/1999/xhtml">
7
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9
<title>SchoolTool Style Guide — The SchoolTool Book</title>
11
<link rel="stylesheet" href="_static/flourish.css" type="text/css" />
12
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
14
<script type="text/javascript">
15
var DOCUMENTATION_OPTIONS = {
18
COLLAPSE_INDEX: false,
23
<script type="text/javascript" src="_static/jquery.js"></script>
24
<script type="text/javascript" src="_static/underscore.js"></script>
25
<script type="text/javascript" src="_static/doctools.js"></script>
26
<script type="text/javascript" src="_static/jquery.colorbox-min.js"></script>
27
<script type="text/javascript" src="_static/flourish.js"></script>
28
<link rel="shortcut icon" href="_static/favicon.ico"/>
29
<link rel="author" title="About these documents" href="about.html" />
30
<link rel="top" title="The SchoolTool Book" href="index.html" />
31
<link rel="up" title="Developers’ Handbook" href="developers.html" />
32
<link rel="next" title="Translations" href="translation-toc.html" />
33
<link rel="prev" title="Devmode for Developers" href="dev_devmode.html" />
34
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin" />
38
<div class="schooltool">
41
<a href="http://www.schooltool.org/">
42
<span class="school">school</span><span class="tool">tool</span>
43
<img alt="Logo" src="_static/logo-small.png" />
46
<ul class="navigation">
48
<a href="http://schooltool.org/">
53
<a href="features.html">
58
<a href="http://launchpad.net/schooltool-project/+announcements">
63
<a href="screenshots.html">
68
<a href="system-requirements.html">
83
<script type="text/javascript">
84
$(document).ready(function() {
85
$(window).scroll(function() {
86
var scrollTop = $(window).scrollTop();
88
$('div.related').css('position', 'fixed');
89
$('div.related').css('top', '0');
91
$('div.related').css('position', 'absolute');
92
$('div.related').css('top', '64px');
101
<li class="right" style="margin-right: 10px">
102
<a href="translation-toc.html" title="Translations"
103
accesskey="N">next</a></li>
105
<a href="dev_devmode.html" title="Devmode for Developers"
106
accesskey="P">previous</a> |</li>
107
<li><a href="index.html">The SchoolTool Book</a> »</li>
108
<li><a href="developers.html" accesskey="U">Developers’ Handbook</a> »</li>
112
<div id="search-box">
113
<form class="search-form" id="google-appliance-search-form" method="get"
114
accept-charset="UTF-8"
115
action="search.html">
117
<div id="edit-keys-wrapper" class="form-item">
118
<input type="text" class="form-text"
119
onfocus="if(this.value=='Type to search'){this.value=''}"
120
onblur="if(this.value==''){this.value='Type to search';}"
121
value="Type to search" size="20" id="edit-keys" name="q"
123
<input type="hidden" value="yes" name="check_keywords" />
124
<input type="hidden" value="default" name="area" />
126
<img src="_static/arrow.png" class="form-submit"
127
onclick="$(this).closest('form').submit()"
128
style="cursor: pointer" />
132
<!-- End Search Bar -->
136
<div class="document">
137
<div class="documentwrapper">
138
<div class="bodywrapper">
141
<div class="section" id="schooltool-style-guide">
142
<h1>SchoolTool Style Guide<a class="headerlink" href="#schooltool-style-guide" title="Permalink to this headline">¶</a></h1>
143
<div class="section" id="tabs">
144
<h2>Tabs<a class="headerlink" href="#tabs" title="Permalink to this headline">¶</a></h2>
145
<p>The row of large links across the top of each page are meant to be rendered as tabs, although it might be a while before we get around to coding the logic to keep track of which tab is active.</p>
146
<p>The tabs roughly correspond to “applications,” plus tabs needed for SchoolTool’s navigation and housekeeping, like “Home” and tabs for Years. Ultimately there is no strongly defined conceptual explanation of what does and does not belong in a tab, but it is worked out as a compromise between practical constraints:</p>
148
<div><ul class="simple">
149
<li>The overall number of tabs in a SchoolTool installation should be kept low; in particular, all tabs should fit in one row in a standard browser window.</li>
150
<li>Tabs will often correspond to software packages, but some packages may need more than one tab, or none.</li>
151
<li>Tabs are nouns. We should have more verb (task) oriented links in other parts of SchoolTool, like the home page or dashboard.</li>
152
<li>The most important thing is that the tabs make sense to users.</li>
162
<div class="sphinxsidebar">
163
<div class="sphinxsidebarwrapper">
164
<h3><a href="index.html">Table Of Contents</a></h3>
166
<li><a class="reference internal" href="#">SchoolTool Style Guide</a><ul>
167
<li><a class="reference internal" href="#tabs">Tabs</a></li>
172
<h4>Previous topic</h4>
173
<p class="topless"><a href="dev_devmode.html"
174
title="previous chapter">Devmode for Developers</a></p>
176
<p class="topless"><a href="translation-toc.html"
177
title="next chapter">Translations</a></p>
180
<div class="clearer"></div>
183
<p class="copyright">
184
© Copyright 2014, the Shuttleworth Foundation. This work is licensed under the Creative Commons Attribution 3.0 Unported License.
187
Last updated on May 22, 2014.
188
Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.2.2.
189
<a href="_sources/style-guide.txt"
190
rel="nofollow">Show Source</a>
b'\\ No newline at end of file'