Get readme nicer for examples
This commit is contained in:
		@@ -1 +1,7 @@
 | 
				
			|||||||
# Sortable Tables
 | 
					# 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)
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1,8 +1,12 @@
 | 
				
			|||||||
# Examples
 | 
					# 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
 | 
					## 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
 | 
					```bash
 | 
				
			||||||
git clone https://github.com/evancz/elm-sortable-table.git
 | 
					git clone https://github.com/evancz/elm-sortable-table.git
 | 
				
			||||||
@@ -11,4 +15,25 @@ cd examples
 | 
				
			|||||||
elm-reactor
 | 
					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
									
								
							
							
						
						
									
										15
									
								
								examples/index.html
									
									
									
									
									
										Normal 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>
 | 
				
			||||||
		Reference in New Issue
	
	Block a user