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.ext.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_USE_MINIFIED |
If True , the minified version of css
files will be used. Default value is
True |
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 |