lizard-ui 3.7

lizard-ui provides a basic Django user interface, so a base Django template and some CSS + javascript. We designed it at Nelen & Schuurmans for our geographical information websites (with water management information).<br /><br />Choices, requirements, assumptions<br /><br />Lizard-ui is opinionated: it makes choices and prescribes (good!) technologies.<br /><br /> * Included: the blueprint css framework. It resets css styles so that we've got a common base. It fixes common IE layout bugs. It gives a basic typography that's quite pleasing.<br /> * Required: django-staticfiles. For a more verbose description, see Reinout's blog entry (written with lizard-ui in mind).<br /> * Required: django_compressor for combining css/javascript files in production.<br /> * Assumption: one screen, using the full width/height of the browser, without scrolling. Our main goal is showing a nice big map with a small header and a sidebar. You don't want to scroll a map. It is of course possible to have a scrollbar inside that main content area itself.<br /> * Assumption: javascript is available. Hey, we're showing a map so you need javascript. So we liberally use javascript to get the UI right, for instance by detecting and setting the main content area's width and height.<br /> * Included: jquery. Yeah, it is pretty much the standard nowadays. So we use jquery where jquery can be used instead of doing it with generic javascript.<br /> * Included: both jqueryui and jquerytools. Visual goodies. Jquerytools for the overlay and tabs, jqueryui for the rest (drag/drop and so).<br /> * Included: openlayers as map javascript library. (Lizard-map, sooooon to be released, contains our basic map interaction javascript and python code).<br /><br />Lizard-ui ships with a couple of external css/javascript libraries.<br /><br />Blueprint<br /> Modified MIT<br /><br />Jquery and jqueryui<br /> Dual licensed under the MIT or GPL Version 2 licenses. Includes Sizzle.js, released under the MIT, BSD, and GPL Licenses.<br /><br />Jquerytools<br /> No copyrights or licenses. Do what you like.<br /><br />Openlayers<br /> Clear BSD license.<br /><br />Famfamfam icon set<br /> CC attribution license.<br /><br />Treeview jquery plugin<br /> MIT/GPL<br /><br />Django settings<br /><br />Here's an excerpt of a settings.py you can use. The media and static root directory setup assumes the use of buildout, but you can translate it to your own filesystem setup:<br /><br />INSTALLED_APPS = [<br /> 'lizard_ui',<br /> 'compressor',<br /> 'staticfiles',<br /> 'django.contrib.admin',<br /> 'django.contrib.auth',<br /> 'django.contrib.contenttypes',<br /> 'django.contrib.sessions',<br /> 'django.contrib.sites',<br /> ]<br /><br /># Note: the below settings are more elaborate than needed,<br /># but we want to test django_compressor's compressing which<br /># needs a media url and root and so.<br /><br /># Set COMPRESS to True if you want to test compression when<br /># DEBUG == True. (By default, COMPRESS is the opposite of<br /># DEBUG).<br />COMPRESS = False<br /><br /># SETTINGS_DIR allows media paths and so to be relative to<br /># this settings file instead of hardcoded to<br /># c:onlyonmycomputer.<br />SETTINGS_DIR = os.path.dirname(os.path.realpath(__file__))<br /><br /># BUILDOUT_DIR is for access to the "surrounding" buildout,<br /># for instance for BUILDOUT_DIR/var/static files to give<br /># django-staticfiles a proper place to place all collected<br /># static files.<br />BUILDOUT_DIR = os.path.abspath(os.path.join(SETTINGS_DIR, '..'))<br /><br /># Absolute path to the directory that holds user-uploaded<br /># media.<br />MEDIA_ROOT = os.path.join(BUILDOUT_DIR, 'var', 'media')<br /># Absolute path to the directory where django-staticfiles'<br /># "bin/django build_static" places all collected static<br /># files from all applications' /media directory.<br />STATIC_ROOT = os.path.join(BUILDOUT_DIR, 'var', 'static')<br /><br /># URL that handles the media served from MEDIA_ROOT. Make<br /># sure to use a trailing slash if there is a path component<br /># (optional in other cases).<br />MEDIA_URL = '/media/'<br /># URL for the per-application /media static files collected<br /># by django-staticfiles. Use it in templates like "{{<br /># MEDIA_URL }}mypackage/my.css".<br />STATIC_URL = '/static_media/'<br /># URL prefix for admin media -- CSS, javascript and<br /># images. Make sure to use a trailing slash. Uses<br /># STATIC_URL as django-staticfiles nicely collects admin's<br /># static media into STATIC_ROOT/admin.<br />ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'<br /><br /># Storage engine to be used during compression<br />COMPRESS_STORAGE = "staticfiles.storage.StaticFileStorage"<br /># The URL that linked media will be read from and compressed<br /># media will be written to.<br />COMPRESS_URL = STATIC_URL<br /># The absolute file path that linked media will be read from<br /># and compressed media will be written to.<br />COMPRESS_ROOT = STATIC_ROOT<br /><br /><br /># Used for django-staticfiles<br />TEMPLATE_CONTEXT_PROCESSORS = (<br /> # Default items.<br /> "django.core.context_processors.auth",<br /> "django.core.context_processors.debug",<br /> "django.core.context_processors.i18n",<br /> "django.core.context_processors.media",<br /> # Needs to be added for django-staticfiles to allow you<br /> # to use {{ STATIC_URL }}myapp/my.css in your templates.<br /> 'staticfiles.context_processors.static_url',<br /> )<br /><br />And a suitable apache config hint:<br /><br />< Location /static_media/ ><br /> # The css/javascript/image staticfiles are cached in the<br /> # browser for a day.<br /> ExpiresActive On<br /> ExpiresDefault "access plus 1 day"<br />< /Location ><br /><br />< Location /static_media/CACHE/ ><br /> # django_compress's generated timestamp'ed files:<br /> # cache forever<br /> ExpiresActive On<br /> ExpiresDefault "access plus 10 years"<br />< /Location ><br /><br /># Static files are hosted by apache itself.<br /># User-uploaded media: MEDIA_URL = '/media/'<br />Alias /media/ ${buildout:directory}/var/media/<br /># django-staticfiles: STATIC_URL = '/static_media/'<br />Alias /static_media/ ${buildout:directory}/var/static/<br /><br />Usage<br /><br />You can mount lizard-ui's urls, but it contains only live examples. So perhaps you should only mount it in debug mode under /ui. Handy, as it contains reasonably full documentation on how to use it, including available blocks and classes/IDs that you can use.<br /><br />The base layout is defined in realbase.html. You should however extend lizard_ui/lizardbase.html and then override the blocks that you want.<br /><br />CSS and javascript should be added to the relevant blocks, but don't forget to call "block.super". An example:<br /><br />{% extends "lizard_ui/lizardbase.html" %}<br /><br />{% block css %}<br />{{ block.super }}<br />< link type="text/css"<br /> href="{{ STATIC_URL }}lizard_map/lizard_map.css"<br /> media="screen, projection"<br /> rel="stylesheet" / ><br />{% endblock css %}<br /><br />{% block javascript %}<br />{{ block.super }}<br />< script type="text/javascript"<br /> src="{{ STATIC_URL }}openlayers/OpenLayers.js" >< /script ><br />< /script ><br />< script type="text/javascript"<br /> src="{{ STATIC_URL }}lizard_map/lizard_map.js" >< /script ><br />{% endblock javascript %}<br /><br />{% block content %}<br />< div id="map" >< /div ><br />{% endblock content %}<br /><br />A example of a common task: change the logo. For that, make a media/lizard_ui directory in your django application (or site) and place a logo.png in it. Django-staticfiles' mechanism will take your logo.png in preference to lizard-ui's.<br /><br />Development installation<br /><br />The first time, you'll have to run the "bootstrap" script to set up setuptools and buildout:<br /><br />$> python bootstrap.py<br /><br />And then run buildout to set everything up:<br /><br />$> bin/buildout<br /><br />(On windows it is called binbuildout.exe).<br /><br />You'll have to re-run buildout when you or someone else made a change in setup.py or buildout.cfg.<br /><br />The current package is installed as a "development package", so changes in .py files are automatically available (just like with python setup.py develop).<br /><br />If you want to use trunk checkouts of other packages (instead of released versions), add them as an "svn external" in the local_checkouts/ directory and add them to the develop = list in buildout.cfg.<br /><br />#md5=ab207670c288327a171b93798a365830

Requirements:	No special requirements
Platforms:	*nix, Linux
Keyword:	Block,  Buildout,  Content,  Directory,  Djangostaticfiles,  Endblock,  Files,  Included,  Jquery,  Location,  Media,  Place,  Script,  Static,  Static Url,  Vascript,  Written
Users rating:	0/10