Django Frontend¶
Django Frontend is a collection of static files and templates to jumpstart Django front-end development.
With the convenience of an installable Django application, easily add some of the most widely used static files and create custom templates built on top of one of the most well-known, widespread templates (HTML5 Boilerplate .)
Package: | https://pypi.python.org/pypi/django-frontend |
---|---|
Source: | https://github.com/jonfaustman/django-frontend |
Starring¶
Contents¶
Getting Started¶
Install¶
- install django-frontend (pip install, add to your requirements files, etc.)
- add ‘djfrontend’ to your INSTALLED_APPS
- make sure ‘django.contrib.staticfiles’ is also in your INSTALLED_APPS
Load¶
Load all the djfrontend tags if you want to add or change the template’s defaults.
{% load djfrontend %}
Granularity¶
Version 1.0.0 introduced a new level of granularity by including template tags with a default value, which can be overriden in settings, which in turn can be overridden by passing the template tag an argument. This allows you to change default values within settings, while giving a template tag final word.
If you use an optional value other than the ones listed, you will have to add the files into the same directory structure as djfrontend.
Template tag | Setting | Default Value | Optional Value(s) |
---|---|---|---|
DJFRONTEND_STATIC_URL | |||
djfrontend_h5bp_html | DJFRONTEND_H5BP_HTML | en | ISO 639-1 codes |
djfrontend_h5bp_css | DJFRONTEND_H5BP_CSS | 5.3.0 | |
djfrontend_normalize | DJFRONTEND_NORMALIZE | 4.2.0 | |
djfrontend_fontawesome | DJFRONTEND_FONTAWESOME | 4.6.3 | |
djfrontend_modernizr | DJFRONTEND_MODERNIZR | 2.8.3 | |
djfrontend_jquery | DJFRONTEND_JQUERY | 1.12.4 | 2.2.4, 3.1.0 |
djfrontend_jqueryui | DJFRONTEND_JQUERYUI | 1.11.4 | |
DJFRONTEND_JQUERY_DATATABLES_VERSION | |||
djfrontend_jquery_datatables | DJFRONTEND_JQUERY_DATATABLES | 1.10.12 | |
djfrontend_jquery_datatables_css | DJFRONTEND_JQUERY_DATATABLES_CSS | 1.10.12 | |
djfrontend_jquery_formset | DJFRONTEND_JQUERY_FORMSET | 1.2.2 | |
djfrontend_jquery_scrollto | DJFRONTEND_JQUERY_SCROLLTO | 2.1.2 | |
djfrontend_jquery_smoothscroll | DJFRONTEND_JQUERY_SMOOTHSCROLL | 1.7.2 | |
DJFRONTEND_TWBS_VERSION | |||
djfrontend_twbs_css | DJFRONTEND_TWBS_CSS | 3.3.7 | |
djfrontend_twbs_theme_css | DJFRONTEND_TWBS_THEME_CSS | 3.3.7 | |
djfrontend_twbs_js | DJFRONTEND_TWBS_JS_VERSION DJFRONTEND_TWBS_JS_FILES | 3.3.7 all |
|
djfrontend_ga | DJFRONTEND_GA | ||
DJFRONTEND_GA_SETDOMAINNAME | |||
DJFRONTEND_GA_SETALLOWLINKER |
Template tags¶
Use the included djfrontend template tags to suit your needs.
djfrontend¶
Loads all the Django Frontend template tags.
{% load djfrontend %}
Each template tag now has a default value. You only need to include an argument if you wish to change the default.
djfrontend_h5bp_html¶
Returns HTML tag according to chosen language. The default, ‘en’ is used if another language is not set.
{% djfrontend_h5bp_html %}
renders:
<html class="no-js" lang="en">
djfrontend_h5bp_css¶
Returns HTML5 Boilerplate CSS file according to version number. The default version is the included ‘5.3.0’.
{% djfrontend_h5bp_css %}
renders:
<link rel="stylesheet" href="/static/djfrontend/css/h5bp/5.3.0/h5bp.css">
djfrontend_normalize¶
Returns Normalize CSS file according to version number. The default version is the included ‘4.2.0’.
{% djfrontend_normalize %}
renders:
<link rel="stylesheet" href="/static/djfrontend/css/normalize/4.2.0/normalize.css">
djfrontend_fontawesome¶
Returns Font Awesome CSS file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file. The default version is the included ‘4.6.3’.
{% djfrontend_fontawesome %}
renders:
<link rel="stylesheet" href="/static/djfrontend/css/fontawesome/4.6.3/font-awesome.css">
Or without TEMPLATE_DEBUG:
<link rel="stylesheet" href="/static/djfrontend/css/fontawesome/4.6.3/font-awesome.min.css">
djfrontend_modernizr¶
Returns Modernizr JavaScript file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file from cdnjs with local callback. The default version is the included ‘2.8.3’.
{% djfrontend_modernizr %}
renders:
<script src="/static/djfrontend/js/modernizr/2.8.3/modernizr.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script>window.Modernizr || document.write(\'<script src="static/djfrontend/js/modernizr/2.8.3/modernizr.min.js"><\/script>\')</script>
djfrontend_jquery¶
Returns jQuery JavaScript file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file from Google CDN with local fallback. The default version is the included ‘1.12.4’.
{% djfrontend_jquery %}
renders:
<script src="/static/djfrontend/js/jquery/1.12.4/jquery.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/static/djfrontend/js/jquery/1.12.4/jquery.min.js"><\/script>')</script>
djfrontend_jqueryui¶
Returns jQuery UI plugin JavaScript file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file from Google CDN with local fallback. The default version is the included ‘1.11.4’.
{% djfrontend_jqueryui %}
renders:
<script src="/static/djfrontend/js/jquery/jqueryui/1.11.4/jquery-ui.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write(\'<script src="/static/djfrontend/js/jquery/jqueryui/1.11.4/jquery-ui.min.js"><\/script>\')</script>
djfrontend_jquery_datatables¶
Returns the jQuery DataTables plugin JavaScript file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file from cdnjs with local fallback. The default version is the included ‘1.10.12’.
{% djfrontend_jquery_datatables %}
renders:
<script src="/static/djfrontend/js/jquery/jquery.dataTables/1.10.12/jquery.dataTables.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/jquery.dataTables.min.js"></script>
<script>window.jQuery.fn.DataTable || document.write('<script src="/static/djfrontend/js/jquery/jquery.dataTables/1.10.12/jquery.dataTables.min.js"><\/script>')</script>
djfrontend_jquery_datatables_css¶
Returns the jQuery DataTables CSS file according to version number. The default version is the included ‘1.10.12’.
{% djfrontend_jquery_datatables_css %}
renders:
<link rel="stylesheet" href="/static/djfrontend/css/jquery/jquery.dataTables/1.10.12/jquery.dataTables.css">
Or without TEMPLATE_DEBUG:
<link rel="stylesheet" href="/static/djfrontend/css/jquery/jquery.dataTables/1.10.12/jquery.dataTables.min.css">
djfrontend_jquery_formset¶
Returns the jQuery Dynamic Formset plugin JavaScript file according to version number. TTEMPLATE_DEBUG returns full file, otherwise returns minified file from cdnjs with local fallback. The default version is the included ‘1.2.2’.
{% djfrontend_jquery_formset %}
renders:
<script src="/static/djfrontend/js/jquery/jquery.formset/1.2.2/jquery.formset.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.formset/1.2.2/jquery.formset.min.js"></script>
<script>window.jQuery.fn.formset || document.write('<script src="/static/djfrontend/js/jquery/jquery.formset/1.2.2/jquery.formset.min.js"><\/script>')</script>
djfrontend_jquery_scrollto¶
Returns the jQuery ScrollTo plugin JavaScript file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file from cdnjs with local fallback. The default version is the included ‘2.1.2’.
{% djfrontend_jquery_scrollto %}
renders:
<script src="/static/djfrontend/js/jquery/jquery.scrollTo/2.1.2/jquery.scrollTo.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
<script>window.jQuery.fn.scrollTo || document.write('<script src="/static/djfrontend/js/jquery/jquery.scrollTo/2.1.2/jquery.scrollTo.min.js"><\/script>')</script>
djfrontend_jquery_smoothscroll¶
Returns the jQuery Smooth Scroll plugin JavaScript file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file from cdnjs with local fallback. The default version is the included ‘1.7.2’.
{% djfrontend_jquery_smoothscroll %}
renders:
<script src="/static/djfrontend/js/jquery/jquery.smooth-scroll/1.7.2/jquery.smooth-scroll.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.7.2/jquery.smooth-scroll.min.js"></script>
<script>window.jQuery.fn.smoothScroll || document.write('<script src="/static/djfrontend/js/jquery/jquery.smooth-scroll/1.7.2/jquery.smooth-scroll.min.js"><\/script>')</script>
djfrontend_twbs_css¶
Returns Twitter Bootstrap CSS file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file. The default version is the included ‘3.3.7’.
{% djfrontend_twbs_css %}
renders:
<link rel="stylesheet" href="/static/djfrontend/css/twbs/3.3.7/bootstrap.css">
Or without TEMPLATE_DEBUG:
<link rel="stylesheet" href="/static/djfrontend/css/twbs/3.3.7/bootstrap.min.css">
djfrontend_twbs_theme_css¶
Returns Twitter Bootstrap Theme CSS file according to version number. The default version is the included ‘3.3.7’.
{% djfrontend_twbs_theme_css %}
renders:
<link rel="stylesheet" href="/static/djfrontend/css/twbs/3.3.7/bootstrap-theme.css">
Or without TEMPLATE_DEBUG:
<link rel="stylesheet" href="/static/djfrontend/css/twbs/3.3.7/bootstrap-theme.min.css">
djfrontend_twbs_js¶
Returns Twitter Bootstrap JavaScript file(s) according to version number and file name(s). The default ‘all’ returns a concatenated file; full file for TEMPLATE_DEBUG, otherwise returns minified file from cdnjs with local fallback. The default version is the included ‘3.3.7’.
- affix
- alert
- button
- carousel
- collapse
- dropdown
- modal
- popover (adds tooltip if not included)
- scrollspy
- tab
- tooltip
- transition
Individual files are not minified.
{% djfrontend_twbs_js %}
renders:
<script src="/static/djfrontend/js/twbs/3.3.7/bootstrap.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>window.jQuery.fn.scrollspy || document.write('<script src="/static/djfrontend/js/twbs/3.3.7/bootstrap.min.js"><\/script>')</script>
{% bootstrap_js files='alert affix' %}
renders:
<script src="/static/djfrontend/js/twbs/3.3.7/bootstrap-affix.js"></script>
<script src="/static/djfrontend/js/twbs/3.3.7/bootstrap-alert.js"></script>
Shout out to Ryan Brady and his Django Bootstrapped for inspiration and initial code.
djfrontend_ga¶
Returns Google Analytics Universal Analytics snippet if TEMPLATE_DEBUG is not set. Use DJFRONTEND_GA_SETDOMAINNAME to set domain for multiple, or cross-domain tracking. Set DJFRONTEND_GA_SETALLOWLINKER to use _setAllowLinker method on target site for cross-domain tracking.
<script>(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("create", "UA-XXXXX-X", "auto");ga("send", "pageview");</script>
Or with DJFRONTEND_GA_SETDOMAINNAME set:
<script>(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("create", "UA-XXXXX-X", "example.com");ga("send", "pageview");</script>
Or with DJFRONTEND_GA_SETDOMAINNAME and DJFRONTEND_GA_SETALLOWLINKER set:
<script>(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("require", "linker");ga("linker:autoLink", ["example.com"]);ga("create", "UA-XXXXX-X", "auto", {"allowLinker": true});ga("send", "pageview");</script>
Template blocks¶
Use the included template blocks to suit your needs.
html¶
Override the HTML doctype, or use in conjunction with {% djfrontend_h5bp_html ‘’ %} to change the HTML lang attribute.
title¶
Add your application specific title to the title tag.
meta_viewport¶
Override the default meta viewport’s content attribute.
meta_description¶
Add your application specific information to the meta description.
head_css¶
Parent CSS block to override or extend the included CSS files.
head_js¶
Override or extend with JavaScript files that need to loaded in the head.
body_id¶
Add an id to the body if needed.
body_class¶
Add class(es) to the body if needed.
body_content¶
Override the Internet Explorer warning, and/or extend with the main content from your application.
body_js¶
Override or extend the included JavaScript files with any file that does not need to be loaded in the head.
Optional Settings¶
For greater granularity, you can optionally set versions of included files through your settings.
Settings are overridden if also set within a template.
DJFRONTEND_STATIC_URL¶
Set a dedicated static server or CDN for serving static files.
DJFRONTEND_H5BP_HTML¶
Sets the lang attribute value.
DJFRONTEND_H5BP_CSS¶
Sets the version of the HTML5 Boilerplate CSS file.
DJFRONTEND_NORMALIZE¶
Sets the version of the Normalize CSS file.
DJFRONTEND_FONTAWESOME¶
Sets the version of the Font Awesome CSS file.
DJFRONTEND_MODERNIZR¶
Sets the version of the Modernizr JavaScript file.
DJFRONTEND_JQUERY¶
Sets the version of the jQuery JavaScript file.
DJFRONTEND_JQUERYUI¶
Sets the version of the jQuery UI file.
DJFRONTEND_JQUERY_DATATABLES_VERSION¶
Sets the version of the jQuery DataTables JavaScript and CSS file. Can be overridden by ‘DJFRONTEND_JQUERY_DATATABLES’ or ‘DJFRONTEND_JQUERY_DATATABLES_CSS’.
DJFRONTEND_JQUERY_DATATABLES¶
Sets the version of the jQuery DataTables JavaScript file.
DJFRONTEND_JQUERY_DATATABLES_CSS¶
Sets the version of the jQuery DataTables CSS file.
DJFRONTEND_JQUERY_FORMSET¶
Sets the version of the jQuery Dynamic Formset JavaScript file.
DJFRONTEND_JQUERY_SCROLLTO¶
Sets the version of the jQuery ScrollTo JavaScript file.
DJFRONTEND_JQUERY_SMOOTHSCROLL¶
Sets the version of the jQuery SmoothScroll JavaScript file.
DJFRONTEND_TWBS_VERSION¶
Sets the version of Twitter Bootstrap’s JavaScript and CSS file(s). Can be overridden by ‘DJFRONTEND_TWBS_CSS’, ‘DJFRONTEND_TWBS_THEME_CSS’ or ‘DJFRONTEND_TWBS_JS_VERSION’.
DJFRONTEND_TWBS_CSS¶
Sets the version of the Twitter Bootstrap CSS file.
DJFRONTEND_TWBS_THEME_CSS¶
Sets the version of the Twitter Bootstrap Theme CSS file.
DJFRONTEND_TWBS_JS_VERSION¶
Sets the version of the Twitter Bootstrap JavaScript file(s).
DJFRONTEND_TWBS_JS_FILES¶
Sets the Twitter Bootstrap JavaScript file(s).
DJFRONTEND_GA¶
Sets the Google Analtyics account.
DJFRONTEND_GA_SETDOMAINNAME¶
Set domain for multiple, or cross-domain tracking with Google Analytics.
DJFRONTEND_GA_SETALLOWLINKER¶
To use _setAllowLinker method on target site for cross-domain tracking with Google Analytics. Set to ‘True’ to enable. Requires H5BP_GA_SETDOMAINNAME to be set.
License¶
MIT License
Component Specific Licenses¶
- HTML5 Boilerplate: MIT License
- Modernizr: MIT License
- normalize.css: MIT License
- jQuery: MIT License
- jQuery UI: MIT License
- jQuery DataTables: Dual GPL v2.0 and BSD License
- jQuery Dynamic Formset: BSD New License
- jQuery ScrollTo: Dual MIT and GPL License
- jQuery Smooth Scroll: MIT License
- Twitter Bootstrap: Apache License, Version 2.0
- iOS-Orientationchange-Fix: MIT/GPL v2.0 License
- Font Awesome: SIL OFL 1.1, MIT License
Changelog¶
1.8.0¶
- Templatetag updated for Django 1.9 - thanks avm/
- Updated normalize.css to v4.2.0.
- Updated jQuery to v1.12.4 and v2.2.4.
- Added jQuery v3.1.0.
- Updated jQuery DataTables to v1.10.12.
- Updated jQuery Dynamic Formset to v1.2.2.
- Updated jQuery ScrollTo to v2.1.2.
- Updated Twitter Bootstrap to v3.3.7.
- Updated jQuery Smooth Scroll to v1.7.2.
- Updated Font Awesome to v4.6.3.
- Updated HTML5 Boilerplate CSS to v5.3.0.
1.7.0¶
- Updated HTML5 Boilerplate CSS to v5.2.0.
- Removed iOS-Orientationchange-Fix.
- Updated Twitter Bootstrap to v3.3.5.
- Updated jQuery ScrollTo to v2.1.1.
- Updated jQuery DataTables to v1.10.7.
- Updated jQuery to v1.11.3 and v2.1.4.
- Updated normalize.css to v3.0.3
1.6.1¶
- Updated classifiers to include Python 3 - thanks dstegelman.
1.6.0¶
- Updated HTML5 Boilerplate CSS to v5.0.0.
- Lower-case doctype per H5BP v5.0.0.
- Updated normalize.css to v3.0.2.
- Updated Font Awesome to v4.3.0.
- Updated jQuery to v1.11.2 and v2.1.3.
- Updated jQuery UI to v1.11.4.
- Updated jQuery DataTables to v1.10.5.
- Updated jQuery ScrollTo to v2.1.0.
- Updated jQuery Smooth Scroll to v1.5.5.
- Updated Twitter Bootstrap to v3.3.4.
- Updated tests to latest 10 stable Django releases.
1.5.0¶
- Updated jQuery UI to v1.11.1.
- Updated jquery.dataTables to v1.10.2.
- Updated jquery.scrollTo to v1.4.13.
- Updated jquery.smooth-scroll to v.1.5.0.
- Updated Font Awesome to v4.2.0.
1.4.0¶
- Updated Modernizr to v2.8.3.
- Updated jquery.dataTables to v1.10.1.
- Added jquery.dataTables minified CSS.
- Added djfrontend_jquery_datatables_themeroller template tag.
1.3.0¶
- Updated jQuery UI to v1.11.0
- Updated TWBS to v3.2.0
1.2.0¶
- Fixed jquery.dataTables CSS loading as a script.
- Fixed URL to TWBS Glyphicons.
- Added TWBS CSS maps.
- Updated Modernizr to v2.8.2
- Updated Normalize.css to v3.0.1
- Updated jQuery to v1.11.1 and 2.1.1
- Added jQuery map.
- Updated jquery.dataTables to v1.10.0
- Updated jquery.scrollTo to v1.4.12
- Updated FontAwesome to v4.1.0
1.1.0¶
- Updated Twitter Bootstrap to v3.1.1
- Updated Normalize.css to v3.0.0
- Updated jquery.scrollTo to v1.4.11
1.0.0¶
- Removed famfamfam Silk Icons.
- Updated Fontawesome to v4.0.3.
- Removed Fontawesome’s IE7 CSS.
- Removed djfrontend_fontawesome_ie template tag.
- Updated Twitter Bootstrap to v3.0.3.
- Updated Modernizr to v2.7.1.
- Updated jQuery.ScrollTo to v1.4.9.
- Updated jQuery.smooth-scroll to v1.4.13.
- Updated jQuery to v1.11.0.
- Updated jQuery to v2.1.0.
- Updated jQuery UI v1.10.3 to v1.10.4.
- Changed template arguments to optional arguments.
- Allow settings to override defaults.
- Load CDN for all non-local JavaScript
- Included tests and Travis CI integration.
- Removed conditional HTML classes.
- Updated IE warning and added ie-warning class.
- Added meta_viewport block.
- Updated H5BP CSS to master.
- Updated Normalize.css to v2.1.3.
- Updated Google Analytics snippets to Universal Analytics.
0.4.0¶
- Updated jQuery Smooth Scroll to v1.4.12.
- Updated h5bp.css to v4.3.0.
- Updated Normalize.css to v1.1.3.
- Removed Chrome Frame value from meta content attribute.
- Added initial CDNJS load for jQuery Dynamic Formset, jQuery ScrollTo and jQuery Smooth Scroll.
- Added Font Awesome (3.2.1).
- Added djfront_fontawesome template tag.
- Added djfront_fontawesome_ie template tag.
- Fixed jQuery UI initial load.
0.3.1¶
- Fixed URL to TWBS Glyphicons in bootstrap.min.css
0.3.0¶
- Updated Twitter Bootstrap to v3.0.0
- Added djfrontend_twbs_theme_css template tag
- Added bootstrap-theme.css and bootstrap-theme.min.css
- Added djfrontend_jquery_scrollto template tag
- Added jquery.scrollTo.js and jquery.scrollTo.min.js
- Removed djfrontend_twbs_glyphicons template tag
- Removed bootstrap-glyphicons.css
0.2.1¶
- Updated Twitter Bootstrap to v3.0.0 RC2
0.2.0¶
- Updated jQuery to v1.10.2 and v2.0.3
- Updated Twitter Bootstrap to v3.0.0 RC1
- Added djfrontend_twbs_glyphicons template tag
- Added cdnjs initial loading for Modernizr and jQuery DataTables
- Removed djfrontend_twbs_responsive_css template tag
- Removed bootstrap-typeahead.js
0.1.0¶
- Initial release