Django Frontend

https://travis-ci.org/jonfaustman/django-frontend.png?branch=master

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

Contents

Getting Started

Install

  1. install django-frontend (pip install, add to your requirements files, etc.)
  2. add ‘djfrontend’ to your INSTALLED_APPS
  3. make sure ‘django.contrib.staticfiles’ is also in your INSTALLED_APPS

Extend

Extend djfrontend’s base template in your template(s)

{% extends 'djfrontend/base.html' %}

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
  • affix
  • alert
  • button
  • carousel
  • collapse
  • dropdown
  • modal
  • popover
  • scrollspy
  • tab
  • tooltip
  • transition
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

Road Map