Get readme nicer for examples

This commit is contained in:
Evan Czaplicki 2016-07-21 12:08:10 -07:00
parent 316bd92faf
commit 22c0bdaa57
4 changed files with 49 additions and 3 deletions

View File

@ -1 +1,7 @@
# Sortable Tables
## Examples
1. [U.S. Presidents by Birth Place](http://evancz.github.io/elm-sortable-tables/presidents.html)
2. [Travel Planner for the Mission District in San Francisco](http://evancz.github.io/elm-sortable-tables/travel.html)

View File

@ -1,8 +1,12 @@
# Examples
1. [U.S. Presidents by Birth Place](http://evancz.github.io/elm-sortable-tables/presidents.html)
2. [Travel Planner for the Mission District in San Francisco](http://evancz.github.io/elm-sortable-tables/travel.html)
## Build Instructions
To see the examples running without any CSS you can just run the following commands:
To see the examples *without* CSS, run the following commands:
```bash
git clone https://github.com/evancz/elm-sortable-table.git
@ -11,4 +15,25 @@ cd examples
elm-reactor
```
And then navigate to `1-presidents.elm` from [localhost:8000](http://localhost:8000/).
Then navigate to `1-presidents.elm` or `2-travel.elm` from [localhost:8000](http://localhost:8000/). When using `elm-reactor`, refreshing a page that ends with `.elm` will recompile the code in that file and show you the new result.
## Build Instructions with CSS
To see the examples *with* CSS, run the following commands:
```bash
git clone https://github.com/evancz/elm-sortable-table.git
cd elm-sortable-table
cd examples
elm-make 1-presidents.elm --yes --output=elm.js
elm-reactor
```
Then open [localhost:8000/index.html](http://localhost:8000/index.html) in your browser. That HTML file loads in some CSS and whatever code is in `elm.js`. So if you want to see the second example with CSS, you can compile it like this:
```bash
elm-make 2-travel.elm --yes --output=elm.js
```
As you make changes, you will want to recompile the Elm code with `elm-make`.

15
examples/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Sortable Tables</title>
<script type="text/javascript" src="elm.js"></script>
</head>
<body>
<script type="text/javascript">Elm.Main.fullscreen();</script>
</body>
</html>