MobileVis Pattern Guide
This repository contains the code that generates http://patterns.mobilev.is. It is a collection of best practices for creating data visualization on mobile devices. The findings are based on observations made from the examples submitted to http://mobilev.is. Please submit examples there if that is your intention, otherwise proceed to see how you can add best practices or help us with the website itself:
Adding best practices
- Submit a ticket with your suggestion.
- Set up the dev environment and add a file describing it. See instructions below.
Setting up Build Environment
Note that the build process relies on you having the other MobileVis repo
checked out somewhere on your machine (because they share styles and assets.)
git clone email@example.com:bocoup/mobilevis somewhere outside your repo and
save that path for the
--root option below.
- Clone this repository onto your machine by running
git clone firstname.lastname@example.org:bocoup/mobilevis-patterns
npm installfrom the root
- This application uses Middleman as a static site
generator. To get it you will need to have ruby installed on your machine. When
you do, run
bundle installfrom the root to get all required gems.
When you're ready to do development, run:
grunt dev --root="YourMobileVisGalleryPath"in one terminal. It will watch for changes in various files.
cd build && python -m SimpleHTTPServerin another terminal. This will serve the resulting build files. Even though Middleman comes with built in dev server, we are using grunt to rebuilt the static files that are generated on file changes. It's a bit slower, so it'd be nice to move away from this system in the future.
When you're ready to build your changes, run:
grunt build --root="YourMobileVisGalleryPath"
When sending in a pull request, don't check in
When you want to add a new pattern, simply look in the
for some examples.
The general required template is:
--- title: Your Pattern Title description: Brief description submitted_by: "twitter handle (no @ please)" timestamp: 2014-06-03 11:28:16 -0400 --- <div class="col-md-8"> Your content here! </div>
The file name should start with an
It should be an
It shouldn't use
_ as a separator in the file name.
Any assets/images you're adding should go in the
source/src/assets folder. Note that
most of the images are SVGs! Try to follow this example. For backup, we also create
PNGs that we default to if SVG is not supported.
If you have any questions, ping @ireneros or find iros on freenode.