reflowjs
ReflowJS is a library for creating visually driven landing pages. It was created on behalf of the Atlanta-Journal Constitution, and I am deeply tankful for their support in creating it and their blessing to release it open source.
It's simple to install.
You can clone the whole thing into a web visible directory. But you'll need a way to put the admin.html and preview.html files behind security as they have the credentials to view your Dropbox account in plain view.
You then need to up your app as a development mode application, based on the guidance here:
In index.html you need to set:
- googleKey to a valid Google Maps API key
In admin.html you need to set:
- Dropbox.Client key
- Dropbox.Client token
- webUrl to the location of the production copy of index.html
- previewUrl to the production location of preview.html
In preview.html you need to set:
- googleKey to a valid Google Maps API key
- Dropbox.Client key
- Dropbox.Client token
The Dropbox.Client key and token go to a valid Dropbox developer account. I recommend setting up a specific account for this app since those keys allow access to everything in the app. You get those from the Dropbox developer site.
One excellent way to handle the security issue for admin.html and preview.html is to use a .htaccess file to put a simple password on them, assuming you're on an apache server that supports that. If you're using Amazon Web Services S3, you can user security policies to restrict the IP addresses that are allowed to see those files. You can see instructions in the AWS Docs.
Dependencies and Inspiration
This project would not be possible without the hard work of a lot of other folks. Most of what is being used can be inferred by looking through the vendor directory. You can run this without installing any of those other libraries, and I recommend you do.
You may also notice that the main index.html page functions without loading JQuery. This was an attempt to minimize the number of dependencies, given the large number already in play, and speed up page loading.
But you may be interested in where the various building blocks came from, in case you want to customize things on your own.
So, here goes:
- simple-slideshow.css and better-simple-slideshow.js by Mark Lee;
- Timeline.css by Christian Fei and customized by me;
- Packery by David DeSandro (under David's open source license);
- Miso.Dataset from the Miso Project;
- Sticky Toolbar by Nick Tsaganos.
If you have feature requests, suggestions or need assistance, email me: daniel.lathrop at gmail.com.