Skip to main content

A Foundation Wrapper for Flask

Project description

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

Just wrapp your aplication like this:

from flask_zurb_foundation import Foundation

[...] # your initiation code here


Now you will have a “foundation/base.html” template at your disposition to start developing your project fast enough.

Config Variables

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.

How to extend your templates

{% extends “foundation/base.html” %}

<!– your html/jinja2 code goes here –>

Template Blocks

Here are the template blocks you can build upon. To use them just call:

{% block <blockname> %}
        ...your code...
{% endblock %}

block doc

Starts before declaring the <!DOCTYPE>, can be used to overwrite everything.

block html_attribs

opening <html> tag, used to add attributes to it.

block html

includes everything inside the <html> tag.

block head

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 %}

block metas

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.

block styles

this includes the foundation css and the foundation-icons css.

it should be used with super()

block head_scripts

includes modernizr.js

it should be used with super()

block body_attributes

block inside the opening <body> tag. Used to add classes, id or data attributes to it.

block navbar

Goes before block content, just a way to organize your code.

block content

main web content should go here

Foundation Components Macros

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") %}


{%      endcall %}


Foundation docs: topbar

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.


{% block navbar %}
        {% call   components.topbar(class="fixed") %}


        {%      endcall %}

{% endblock %}


Foundation docs: sidenav

  • title: accepts a string that will render as the sidenav title.


{% 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>
{% endcall %}


Foundation docs: subnav

  • title: accepts a string that will render as the subnav title.


{% 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 %}


Foundation docs: iconbar

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.


{% call components.iconbar(number="four", vertical=True, icons=["fi-home", "fi-bookmark", "fi-info", "fi-anchor"], labels=["Home", "Bookmarks", "info", "anchor"]) %}

{% endcall%}


Foundation docs: offcanvas

Just the basic off canvas markup. Remeber all of your web content should fit inside of the call.


    {% call components.offcanvas() %}
            <!-- Off Canvas Menu -->
                <aside class="left-off-canvas-menu">
                    <!-- whatever you want goes here -->
                      <li><a href="#">Item 1</a></li>

                <!-- 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 %}

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for Flask-Zurb-Foundation, version 0.2.1
Filename, size File type Python version Upload date Hashes
Filename, size Flask-Zurb-Foundation-0.2.1.tar.gz (598.9 kB) File type Source Python version None Upload date Hashes View

Supported by

Pingdom Pingdom Monitoring Google Google Object Storage and Download Analytics Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page