Flask-Zurb-Foundation packages Foundation 5 (5.5.1) into an extension as a blueprint called foundation. So far it justs wrappes a project in the basic Foundation 5 styles and scripts.
Basic navigation macros have been added, I'll try to add other foundation components macros as I need them in our projects.
- How to use it in flask
- Config Variables
- How to extend your templates
- Template Blocks
- Foundation Components Macros
Just wrapp your application like this:
from flask_zurb_foundation import Foundation [...] # your initiation code here Foundation(app)
Now you will have a "foundation/base.html" template at your disposition to start developing your project fast enough.
config["FOUNDATION_MINIFIED"] - defaults to True - Will load most libraries and css minified
config["FOUNDATION_CDN"] - defaults to False - Will load most libraries from CDN
config["FOUNDATION_ICONS"] - defaults to True - will load the foundation icons css.
config["FOUNDATION_TEXT_DIRECTION"] - defaults to 'ltr' - if set to 'rtl' will switch text reading orientation for languages that are read from right to left.
config["FOUNDATION_LANG"] - defaults to "en" - accepts a string, will set the html attribute language.
{% extends "foundation/base.html" %}
<!-- your html/jinja2 code goes here -->
Here are the template blocks you can build upon.
To use them just call:
{% block <blockname> %}
...your code...
{% endblock %}
Starts before declaring the <!DOCTYPE>, can be used to overwrite everything.
opening <html> tag, used to add attributes to it.
includes everything inside the <html> tag.
includes everything inside the <head> tag. This includes the <title>, <meta> and <link> tags, it should be used with super() so it keeps calling the foundation CSS
like so:
{% block head %}
{{ super() }}
...your code...
{% endblock head %}
- it just includes::
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
it should be called with super() unless you want to overwritte this behaviour.
direct link to add a content between the <title> tags
this includes the foundation css and the foundation-icons css.
it should be used with super()
includes modernizr.js
it should be used with super()
block inside the opening <body> tag. Used to add classes, id or data attributes to it.
Goes before block content, just a way to organize your code.
main web content should go here
goes before the scripts block
JavaScript files should be linked here. it loads jquery, jquery.cookie, modernizr, placeholder, fastclick and foundation JavaScript files. It should be used with super()
There are a few built-in Foundation components macros.
The macros add the basic Foundation markup for them to work. So, basically they are just macros that wrap a call.
to use them first import the macros:
{% import "foundation/components.html" as components%}
then just open a call block importing the component like so:
{% call components.topbar(class="fixed") %}
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
{% endcall %}
It should be used inside the navbar block.
- class: adds string to the topbar container. Used for fixed, sticky, contain-to-grid clases.
- data_options: adds string to topbar data-options.
example:
{% block navbar %}
{% call components.topbar(class="fixed") %}
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
{% endcall %}
{% endblock %}
- title: accepts a string that will render as the sidenav title.
example:
{% call components.sidenav(title="Mi menu") %}
<li role="menuitem"><a href="#">Link 1</a></li>
<li role="menuitem"><a href="#">Link 2</a></li>
<li role="menuitem"><a href="#">Link 3</a></li>
<li role="menuitem"><a href="#">Link 4</a></li>
</div>
{% endcall %}
- title: accepts a string that will render as the subnav title.
example:
{% call components.subnav(title="Filter: ") %}
<dd class="active"><a href="#">All</a></dd>
<dd><a href="#">Active</a></dd>
<dd><a href="#">Pending</a></dd>
<dd class="hide-for-small-only"><a href="#">Suspended</a></dd>
{% endcall %}
Since flask-zurb-foundation comes with all the Foundation icons by default the iconbar macro allows you to work complex icon menues easily.
- number : -string - written number, ex. "one", "five"; from one to eight. It will render evely distributed icons according to the number passed to it.
- vertical: - bool - defaults to False.
- type: - string - defaults to img, acepts icon. Img will load the default Foundation SVGs, using icon will load the icons as font-icons, allowing for an easier change of icons colors.
- icons: - list - acceptsa list of strings with the name of the icons or imgs you want to load for the iconbar. Place them in the order you want them to appear. Just pass to the array the name of the foundation icons preceded by "fi-". (check the example)
- labels: - list - defaults to empty. List of strings that will display under the icons (if you need it). Write them in the same order as their corresponding icons.
example:
{% call components.iconbar(number="four", vertical=True, icons=["fi-home", "fi-bookmark", "fi-info", "fi-anchor"], labels=["Home", "Bookmarks", "info", "anchor"]) %}
{% endcall%}
Just the basic off canvas markup. Remeber all of your web content should fit inside of the call.
example:
{% call components.offcanvas() %}
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li><a href="#">Item 1</a></li>
...
</ul>
</aside>
<!-- main content goes here -->
<p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p>
{% endcall %}