Flask-Pure - a Flask extension for Pure.css

Flask-Pure is an extension to Flask that helps integrate Pure.css to your Flask application.

Quick Start

  1. Installation
pip install Flask-Pure
  1. Configuration
from flask import Flask, render_template
from flask_pure import Pure

app = Flask(__name__)
app.config['PURECSS_RESPONSIVE_GRIDS'] = True
app.config['PURECSS_USE_CDN'] = True
app.config['PURECSS_USE_MINIFIED'] = True
Pure(app)

@app.route('/')
def hello():
    return render_template('hello.html')

if __name__ == '__main__':
    app.run(debug=True)
  1. In templates/hello.html:
{% extends "pure/layout.html" %}
{% block title %}Hello world from flask-pure{% endblock %}

{% block nav %}
<div class="pure-menu pure-menu-horizontal">
  <!-- ... -->
</div>
{% endblock %}

{% block content %}
  <h1>Hello world</h1>
{% endblock %}
  1. Profit!

How It Works

Once registered, this extension provides a template variable called pure, it has a property named css that will be rendered as HTML <link> tag to the Pure.css stylesheets either from free CDN or be served from a bundled blueprint, also called pure.

A {{ pure.css }} inside <head> tag is all you need.

A bare bone HTML5 template is also available as pure/layout.html. Please check out the example in code repository and documentation for details.

License

BSD New, see LICENSE for details.

Caveat

The stylesheet provided by template variable pure.css is the ‘Rollups’ version with all the modules in Pure. The responsive grids module that included by default can be turned off explicitly.

Thus, this extension is an ‘all-or-nothing’ approach, there is no plan to support selectable modules currently, as it is so trivial to roll your own.

The conditional IE 8/9 hack are not included, please refer to Pure’s official documentation if this is the concern.

Configuration

Option Description
PURECSS_RESPONSIVE_GRIDS If True, the responsive grids module will be included as well. Default value is True
PURECSS_USE_CDN If True, css files will be served from CDN. If False, local copies of css files will be served. Default value is True
PURECSS_CDN If PURECSS_USE_CDN is True, css files will be served from this CDN. Default value is unpkg, as recommended by Pure.css, for list of CDNs, see next section
PURECSS_USE_MINIFIED If True, the minified version of css files will be used. Default value is True

PURECSS_CDN values

Available CDNs as listed on http://purecss.io/

CDN PURECSS_CDN Value
unpkg unpkg
cdnjs cdnjs
jsDelivr jsdelivr
KeyCDN keycdn
OSS MaxCDN maxcdn
RawGit rawgit
Staticfile staticfile

Template

In addition to providing Pure.css static assets, Flask-Pure comes with HTML5 template located in pure/layout.html for layout.

Predefined Blocks Purpose
html_attribs <html>‘s attributes
head all content inside <head> and </head>
meta for all <meta> tags
title content inside <title> and </title>
style links to css stylesheets
body_attribs <body>‘s attributes
body all content inside <body> and </body>
nav navigation links
content main content
script embedded javascript

Pure.css Version

The bundled version of Pure.css is v0.6.1

API

Flask-Pure - a Flask extension for Pure.css

class flask_pure.Pure(app=None)[source]

Flask-Pure extension

provides base template layout as pure/layout.html and links to the Pure.css static assets.

css

property the will be rendered as Pure.css <link> tags

init_app(app)[source]

create and register a blueprint with the Flask application.

Parameters:app – Flask application instance

Contributors

A huge thanks to all of our contributors:

Changelog

Version 0.4

  • Updated Pure.css version to 0.6.1
  • Added alternate CDNs support

Version 0.3

  • Switched CDN url to https version (Contributed by Bastian Kuhn)

Version 0.2

  • Added option to turned off the responsive grids module
  • Used an instance of extension as namespace instead of a single template variable

Version 0.1

  • Initial public release