-
Notifications
You must be signed in to change notification settings - Fork 16
/
style-guide.htm
executable file
·269 lines (243 loc) · 8.31 KB
/
style-guide.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="mysite-com">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Git for Writers: Style Guide</title>
<link rel="stylesheet" type="text/css" media="screen, print" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<!--[if lte IE 7>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen-ie.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
<!--REMOVE COMMENT TAGS TO USE FACEBOOK SHARE METADATA:-->
<!--
<meta name="title" content="Match this with the content of the title tag above." />
<meta name="description" content="A short description of this page." />
<link rel="image_src" href="http://example.com/media/share/thumbnail.jpg" />
-->
<!--REMOVE COMMENT TAGS TO USE FAVICON LINKS:-->
<!--
<link rel="icon" href="" type="image/png" />
<link rel="shortcut icon" href="" type="image/png" />
-->
<script type="text/javascript" src="js/mootools/mootools-core.js"></script>
<script type="text/javascript" src="js/site.js"></script>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="http://gewga.ws/git-for-writers/" rel="home">Git for Writers</a></h1>
<p class="tagline">
A guide to version tracking, revision, and collaboration for open-source writing.
</p>
<ul class="accessibility">
<li><a href="#navigation">Jump to Navigation</a></li>
<li><a href="#content">Jump to Content</a></li>
</ul>
</div>
<div id="content">
<div id="main">
<h2>Style Guide</h2>
<p>
There are certain written, structural (XHTML), and design styles
to follow for contributing to Git for Writers.
</p>
<h3>Basic Markup</h3>
<p>
Like any good XHTML page, most of the markup for <cite>Git for
Writers</cite> consists of headings, paragraphs, and lists.
</p>
<h4>Headings</h4>
<p>
The <strong>names of pages</strong> are placed in
<code><h2></code> tags; there should only be one
<code><h2></code> heading per page.
</p>
<p>
The <strong>major divisions</strong> of a page should be
written in <code><h3></code> tags. There can be multiple
<code><h3></code> tags per page.
</p>
<p>
The major divisions of a page can be broken into smaller
<strong>sub-divisions</strong>, marked using
<code><h4></code> tags. There can be multiple
<code><h4></code> subdivisions within a major division.
</p>
<h4>Paragraphs</h4>
<p>
Most running paragraph text appears in the basic
<code><p></code> tag.
</p>
<p>
Quotations of long stretches of text can appear in the
<code><blockquote></code> tag, but the quoted material
must also be marked by either paragraph tags or, in the case
of a quotation of a list, using the list tags (see the Lists
section of this document):
</p>
<pre>
<p>
According to the
<a href="http://git-scm.com">Git homepage</a>,
</p>
<blockquote>
<p>
Git is a free & open source, distributed version
control system designed to handle everything from
small to very large projects with speed and
efficiency.
</p>
</blockquote>
</pre>
<p>That will render something like this:</p>
<div class="example-rendering">
<p>
According to the <a href="http://git-scm.com">Git
homepage</a>,
</p>
<blockquote>
<p>
Git is a free & open source, distributed version
control system designed to handle everything from
small to very large projects with speed and
efficiency.
</p>
</blockquote>
</div>
<h4>Lists</h4>
<p>
For steps in a process or anything where order matters, use the ordered list, <code><ol></code>:
</p>
<pre>
<ol>
<li>Download Git</li>
<li>Install Git</li>
<li>Love Git</li>
</ol>
</pre>
<div class="example-rendering">
<ol>
<li>Download Git</li>
<li>Install Git</li>
<li>Love Git</li>
</ol>
</div>
<p>
For lists of things whose order does not matter, use the
unordered list,
<code><ul></code>:
</p>
<pre>
<ul>
<li>We love Git</li>
<li>Yes we do</li>
<li>We love Git, how about you?</li>
</ul>
</pre>
<div class="example-rendering">
<ul>
<li>We love Git</li>
<li>Yes we do</li>
<li>We love Git, how about you?</li>
</ul>
</div>
<h3>Basic Phrase Markup</h3>
<p>
You can <strong>make short bits of text bold</strong>
(<code><strong></code>), add <em>a little emphasis</em>
(<code><em></code>), or refer to the title of a work,
<cite>Git for Writers</cite> (<code><cite></code>).
</p>
<h3>Git-related Markup</h3>
<p>
Because Git is a command-line tool, most interaction with it
occurs through text, in a terminal. There are three different
tags to use for marking up Git input, output, and interactions:
</p>
<ol>
<li>
<code>kbd</code>: Use the <code><kbd></code> element for anything someone
would type. For example, <code><kbd>git status</kbd></code> appears
as <kbd>git status</kbd>.
</li>
<li>
<code>samp</code>: Use the <code><samp></code>
element for single-line responses from Git. For example,
<code><samp># On branch master</samp></code>
appears as
<samp># On branch master</samp>.
</li>
<li>
<code>pre</code>: Use the <code><pre></code> element
for multi-line interactions with Git. Output that appears
in red (in many environments) can be marked using
<code><span class="warn"></code>, and output that
appears in green can be marked as <code><span class="good"></code>. Git sometimes outputs angle
brackets, so be sure to escape those (<code>&lt;</code> for <code><</code>, <code>&gt;</code> for <code>></code>):
</li>
</ol>
<pre>
<pre>
$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD &lt;file&gt;..." to unstage)
#
# <span class="good">modified: css/screen.css</span>
#
# Changed but not updated:
# (use "git add &lt;file&gt;..." to update what will be committed)
# (use "git checkout -- &lt;file&gt;..." to discard changes in working directory)
#
# <span class="warn">modified: style-guide.htm</span>
#
</pre>
</pre>
<pre>
$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# <span class="good">modified: css/screen.css</span>
#
# Changed but not updated:
# (use "git add <file>..." to update what will be committed)
# (use "git checkout -- <file>..." to discard changes in working directory)
#
# <span class="warn">modified: style-guide.htm</span>
#
</pre>
</div>
<div id="supporting">
</div>
</div>
<ul id="navigation">
<li><a href="index.htm">Home</a></li>
<li><a href="resources.htm">Resources</a></li>
<li><a href="about.htm">About</a></li>
</ul>
<div id="footer">
<p class="copyright">
© 2010 by Gewgaws Lab. Some rights reserved. Content licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/">
Creative Commons Attribution-Share Alike 3.0 United States License
</a>.
<a class="cc-badge" rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/">
<img alt="Creative Commons License" src="http://i.creativecommons.org/l/by-sa/3.0/us/88x31.png" />
</a>
</p>
<p class="project-information">
<a href="http://github.com/gewgaws/git-for-writers">Git for Writers repository</a>
hosted at <a href="http://github.com">GitHub</a>. Learn <a href="participate.htm">how to
contribute</a> to Git for Writers.
</p>
<ul class="validators">
<li><a href="http://validator.w3.org/check?uri=referer" title="Validate this page's XHTML">XHTML</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate this page's CSS">CSS</a></li>
</ul>
</div>
</div>
</body>
</html>