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¶
- Installation
pip install Flask-Pure
- 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)
- 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 %}
- 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.
Links¶
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.2
API¶
Flask-Pure - a Flask extension for Pure.css
Contributors¶
A huge thanks to all of our contributors:
- Bastian Kuhn <https://github.com/Bastian-Kuhn>
- Philip Xu <https://github.com/pyx>
Changelog¶
Version 0.5¶
- Updated Pure.css version to 0.6.2
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