skip to navigation
skip to content

pinax-theme-foundation 0.2a1

Pinax theme based on Zurb's Foundation

Latest Version: 0.2.3

A Foundation 3 Theme for Pinax

A Pinax theme + based on `Zurb Foundation`_
Foundation is a popular CSS framework that is light weight, but includes
all the basics such as; a responsive grid, forms, dialog, navigation tabs,
buttons, typography and so on.
You can read more about the ideas behind
Foundation and how to use it for rapid prototyping in this `article`_.

.. _Zurb Foundation:
.. _article:

* `Christopher Clarke <https:"" chrisdev="">`_
* `Kewsi Aguillera <https:"" kaguillera="">`_
* `Lendl R Smith <https:"" ilendl2="">`_

What's New

- This release supports Foundation 3.1 which includes features such as
right-to-left language support, new UI Styles for Progress Bars
and Image Thumbs, updated jQuery and so on, read more about 3.1
`here <http:"" docs="" support.php="">`_
- Fully utilize the Foundation 3.1 responsive Top
Navigation bar rather than our home grown solution
- Included Icon Fonts, Responsive Tables and SVG Social Icons
Zurb add-ons which are not part of core release
- Lay the groundwork for supporting the `--template`
flag on the ` start project` in the next release

Create a virtual environment for your project and activate it::

$ virtualenv mysite-env
$ source mysite-env/bin/activate

Next install Pinax::

(mysite-env)$ pip install Pinax

Once Pinax is installed use **pinax-admin** to create a project for your site

(mysite-env)$ pinax-admin setup_project mysite -b basic mysite

The example above will create a starter Django project in the mysite folder based on the Pinax **basic** project.
Of course you can use any of the Pinax starter Projects.
The **basic** project provides features such as account management, user profiles and notifications.
The starter project also comes with a **theme** or a collection css, javascript files.
The default theme is based on Twitter Bootstrap.

To use the **Foundation** theme in the project, include "pinax-theme-foundation" in requirements/project.txt.
Either install the package individually. ::

pip install pinax-theme-foundation

Or use the requirements file::

pip install -r requirements/project.txt

Next edit the **** file and
comment out the entry for "pinax_theme_bootstrap" and add "pinax_theme_foundation" in your INSTALLED APPS::

# theme

Inside your project run::

(mysite-env)$ python syncdb
(mysite-env)$ python runserver

The Pinax *setup_project* creates a *site_base.html* template which extends *theme_base.html*.
You own templates should normally inherit from *site_base.html*. However, due to
inconsistencies between Bootstrap and Foundation you may need to perform an additional step
to ensure that the top nav bar is styled properly.
If have created a **basic** starter project
edit the generated *site_base.html* to remove the extra
*ul* tags found in the *{% nav block %}*. In the *basic* project *{% nav block %}* contains profile and notices dropdown menu items.
The project *site_base.html* will contain ::

{% block nav %}
{% if user.is_authenticated %}
<ul>{% spaceless %}
<li id="tab_profile"><a href="{% url profile_detail user.username %}">{% trans "Profile" %}</a></li>
<li id="tab_notices"><a href="{% url notification_notices %}">{% trans "Notices" %}{% if notice_unseen_count %} ({{ notice_unseen_count }}){% endif %}</a></li>
{% endspaceless %}
{% endif %}
{% endblock %}

Remove the *ul* tags so the block looks like ::

{% block nav %}
{% if user.is_authenticated %}
<li id="tab_profile"><a href="{% url profile_detail user.username %}">{% trans "Profile" %}</a></li>
<li id="tab_notices"><a href="{% url notification_notices %}">{% trans "Notices" %}{% if notice_unseen_count %} ({{ notice_unseen_count }}){% endif %}</a></li>
{% endif %}
% endblock %}

You should provide your own "footer" template _footer.html

Also change the Site name by editing *fixture/initial_data.json* you can also use the Admin app for this purpose.
The **url** name "home" should be defined as the homepage.

Upgrading Previous Version
To upgrade you site start by upgrading to the latest version on pinax-theme-foundation ::

pip install -- upgrade pinax-theme-foundation

The big change between Foundation 2 to 3 is the grid. In Foundation 3 you no longer have to use *.container*
to define the grid. In Foundation 2 the grid was built around
*.container > .row > .columns* in Foundation 3 you now just have to use *.row > .columns*.
In Foundation 3 padding and borders no longer increase the width of an element,
they only go inward so for example in Foundation 3 .three.columns always has a width of 25%
with a 15px padding on the left and right.
You can find the Foundation 3 migration guide `here <http:"" migration.php="">`_
Remove all **max-width** from css sytling

.. end-here


See the `full documentation`_ for more details.

.. _full documentation:
.. _Pinax:  
File Type Py Version Uploaded on Size
pinax-theme-foundation-0.2a1.tar.gz (md5) Source 2012-10-18 477KB