Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ondoheer/flask-zurb-foundation
A flask Wrapper to quickly use Zurb-Foundation on your Flask projects
https://github.com/ondoheer/flask-zurb-foundation
Last synced: 12 days ago
JSON representation
A flask Wrapper to quickly use Zurb-Foundation on your Flask projects
- Host: GitHub
- URL: https://github.com/ondoheer/flask-zurb-foundation
- Owner: ondoheer
- License: other
- Created: 2015-02-25T20:47:59.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-05-01T20:15:17.000Z (over 1 year ago)
- Last Synced: 2024-06-02T10:34:35.932Z (5 months ago)
- Language: HTML
- Size: 617 KB
- Stars: 19
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.rst
- License: LICENSE
Awesome Lists containing this project
README
Flask-zurb-foundation
=======================
.. image:: https://travis-ci.org/ondoheer/flask-zurb-foundation.png?branch=master
:target: https://travis-ci.org/ondoheer/flask-zurb-foundation
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.
Note:
--------
*Basic navigation macros have been added, I'll try to add other foundation components macros as I need them in our projects.*
Index
---------
- `How to use it in flask`_
- `Config Variables`_
- `How to extend your templates`_
- `Template Blocks`_
- `Foundation Components Macros`_
Usage
------
How to use it in flask
************************
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 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" %}
Template Blocks
******************
Here are the template blocks you can build upon.
To use them just call::
{% block %}
...your code...
{% endblock %}
block doc
++++++++++
Starts before declaring the , can be used to overwrite everything.
block html_attribs
+++++++++++++++++++
opening tag, used to add attributes to it.
block html
+++++++++++
includes everything inside the tag.
block head
+++++++++++
includes everything inside the tag. This includes the , and 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::
it should be called with **super()** unless you want to overwritte this behaviour.
block title
++++++++++++
direct link to add a content between the tags
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 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
block footer
+++++++++++++
goes before the scripts block
block footer_scripts
+++++++++++++++++++++
JavaScript files should be linked here.
it loads jquery, jquery.cookie, modernizr, placeholder, fastclick and foundation JavaScript files.
It should be used with **super()**
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 %}
components.topbar
++++++++++++++++++
`Foundation docs: topbar `_
It should be used inside the **navbar** block.
params
```````
- 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") %}
{% endcall %}
{% endblock %}
components.sidenav
++++++++++++++++++++
`Foundation docs: sidenav `_
params
```````
- title: accepts a string that will render as the sidenav title.
**example**::
{% call components.sidenav(title="Mi menu") %}
{% endcall %}
components.subnav
++++++++++++++++++++
`Foundation docs: subnav `_
params
```````
- title: accepts a string that will render as the subnav title.
**example**::
{% call components.subnav(title="Filter: ") %}
{% endcall %}
components.iconbar
+++++++++++++++++++
`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.
params
```````
- 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%}
components.offcanvas
++++++++++++++++++++++
`Foundation docs: offcanvas `_
Just the basic off canvas markup. Remeber all of your web content should fit inside of the **call**.
**example**::
{% call components.offcanvas() %}
- Item 1
...
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.
{% endcall %}