This repository is used to prototype user interface ideas for rva-screening. We use it to mock up multiple versions of some aspect of the user interface so that we can compare and decide on the appropriate implementation.
This is a minimal Flask app with a constantly growing set of sass, css, and html files. The Flask app has an index page, at /, which uses the app/templates/index.html template and if you navigate to any other URL, it simply tries to render a corresponding template. For example, /mytemplate should render and return app/templates/mytemplate.html.
Static data for prototyping can be placed into app/data.py
To have a place to make multiple versions of UI components without cluttering the actual rva-screening
The installation commands assume that you are using a UNIX-based command line, as found in the Terminal appplication on Mac and Linux operating systems.
Install git and create a Github account.
Install node.js and use npm to install gulp globally:
sudo npm install --global gulpClone the repo
git clone https://github.com/codeforamerica/rva-screening-ui-prototypes.gitcd into the project folder, activate the virtual environment, and install the dependencies
cd rva-screening-ui-prototypes/
source .venv/bin/activate # this assumes that you've set up a virtualenv
make installrun the application
make runKeep in mind that this repo is only for UI ideas. If you'd like to contribute to the RVA screening app directly, you should go there instead.
Once you have the code installed and running, edit or create templates and css or sass files. Use git and github to commit your work to a fork of the project, and create a pull request. Feel free to email us if you'd like more guidance on how to contribute.
To add a new template:
app/templates/, for example app/templates/mynewtemplate.htmllist the slug with a description in app/views.py, for example:
# in app/views.py
templates = {
'text_fields': 'Different ideas for simple text fields',
'mynewtemplate': '3 proposals for a thing in the UI',
}