Skip to content

Commit b9b52f3

Browse files
committed
Use bullets instead
1 parent 88e5d5b commit b9b52f3

File tree

2 files changed

+24
-16
lines changed

2 files changed

+24
-16
lines changed

docs/basics.html

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,28 @@
1818
<h1 id="spreadsheets-as-databases">Spreadsheets as Databases</h1>
1919
<p>Spreadsheets are a great <em>lightweight</em> databases. Google Spreadsheets in particular are easy to work with and share, making this unlike most traditional database setups. That being said, traditional databases are great for bigger, more secure jobs. If you&#39;re storing lots and lots and lots of information, or storing sensitive or complex information—the spreadsheet is not for you. But if you&#39;re working on small to medium sized personal or community projects, try a spreadsheet!</p>
2020
<h2 id="the-short-sweet">The Short &amp; Sweet</h2>
21-
<ol>
21+
<ul>
2222
<li>Link to Sheetsee.js and <a href="https://github.com/jsoma/tabletop">Tabletop.js</a> in your HTML head.</li>
2323
<li>Link to sheetsee&#39;s default stylesheet, <code>sss.css</code>.</li>
2424
<li>Create a place holder <code>&lt;div&gt;</code>, with <code>id</code>, in your HTML the map or table you want.</li>
2525
<li>Create templates for tables in <code>&lt;script&gt;</code> tags with an <code>id</code> matching the <code>&lt;div&gt;</code> plus <code>_template</code>.</li>
26-
<li>Inside of another <code>&lt;script&gt;</code> tag initialize <a href="https://github.com/jsoma/tabletop">Tabletop.js</a>. Once it fetches your spreadsheet data, pass it onto Sheetsee.<pre><code class="lang-JS">document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
27-
var URL = &#39;YOURSPREADSHEETSKEYHERE&#39;
28-
Tabletop.init({key: URL, callback: callback, simpleSheet: true})
26+
<li>Inside of another <code>&lt;script&gt;</code> tag initialize <a href="https://github.com/jsoma/tabletop">Tabletop.js</a>. Once it fetches your spreadsheet data, pass it onto Sheetsee.</li>
27+
</ul>
28+
<pre><code class="lang-JS">document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
29+
var URL = &#39;YOURSPREADSHEETSKEYHERE&#39;
30+
Tabletop.init({key: URL, callback: callback, simpleSheet: true})
2931
})
3032
</code></pre>
31-
</li>
32-
<li>Define the function that <a href="https://github.com/jsoma/tabletop">Tabletop.js</a> calls when it returns with the data. This function will contain all the Sheetsee.js methods you want to use.<pre><code class="lang-JS">function callback (data) {
33-
// All the Sheetsee things you want to do!
33+
<ul>
34+
<li>Define the function that <a href="https://github.com/jsoma/tabletop">Tabletop.js</a> calls when it returns with the data. This function will contain all the Sheetsee.js methods you want to use.</li>
35+
</ul>
36+
<pre><code class="lang-JS">function callback (data) {
37+
// All the Sheetsee things you want to do!
3438
}
3539
</code></pre>
36-
</li>
40+
<ul>
3741
<li>Set it and forget. Now all you need to do is edit the spreadsheet and visitors will get the latest information every time they load the page.</li>
38-
</ol>
42+
</ul>
3943
<h2 id="bare-minimum-setup">Bare Minimum Setup</h2>
4044
<p>Ignoring some HTML things to conserve space, you get the point. This is a basic setup:</p>
4145
<pre><code class="lang-HTML">&lt;html&gt;

docs/basics.md

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,28 @@ Spreadsheets are a great _lightweight_ databases. Google Spreadsheets in particu
44

55
## The Short & Sweet
66

7-
1. Link to Sheetsee.js and [Tabletop.js](https://github.com/jsoma/tabletop) in your HTML head.
8-
2. Link to sheetsee's default stylesheet, `sss.css`.
9-
3. Create a place holder `<div>`, with `id`, in your HTML the map or table you want.
10-
4. Create templates for tables in `<script>` tags with an `id` matching the `<div>` plus `_template`.
11-
5. Inside of another `<script>` tag initialize [Tabletop.js](https://github.com/jsoma/tabletop). Once it fetches your spreadsheet data, pass it onto Sheetsee.
7+
- Link to Sheetsee.js and [Tabletop.js](https://github.com/jsoma/tabletop) in your HTML head.
8+
- Link to sheetsee's default stylesheet, `sss.css`.
9+
- Create a place holder `<div>`, with `id`, in your HTML the map or table you want.
10+
- Create templates for tables in `<script>` tags with an `id` matching the `<div>` plus `_template`.
11+
- Inside of another `<script>` tag initialize [Tabletop.js](https://github.com/jsoma/tabletop). Once it fetches your spreadsheet data, pass it onto Sheetsee.
12+
1213
```JS
1314
document.addEventListener('DOMContentLoaded', function() {
1415
var URL = 'YOURSPREADSHEETSKEYHERE'
1516
Tabletop.init({key: URL, callback: callback, simpleSheet: true})
1617
})
1718
```
18-
6. Define the function that [Tabletop.js](https://github.com/jsoma/tabletop) calls when it returns with the data. This function will contain all the Sheetsee.js methods you want to use.
19+
20+
- Define the function that [Tabletop.js](https://github.com/jsoma/tabletop) calls when it returns with the data. This function will contain all the Sheetsee.js methods you want to use.
21+
1922
```JS
2023
function callback (data) {
2124
// All the Sheetsee things you want to do!
2225
}
2326
```
24-
7. Set it and forget. Now all you need to do is edit the spreadsheet and visitors will get the latest information every time they load the page.
27+
28+
- Set it and forget. Now all you need to do is edit the spreadsheet and visitors will get the latest information every time they load the page.
2529

2630
## Bare Minimum Setup
2731

0 commit comments

Comments
 (0)