Pinax theme based on Zurb's Foundation
Project description
Pinax 0.9+ based on Zurb Foundation is a popular CSS framework that is light weight, but includes all the basics including;
A responsive grid
Forms, buttons and modal dialogs
Typography
Visibility classes, panels, accordions and responsive video
Navigation including a top navigation bar fro your site
Responsive tables
Responsive content slider
Symbol Icon
You can read more about the ideas behind Zurb Foundation. and how you can use it for rapid prototyping in this article. Remember to check out the official Foundation documentation.
Contributors
What’s New
We now support Foundation 3. This means that you can now all the neat Foundation 3’s features such as the new Nav bar.
Support for responsive tables
Removed support for responsive design patterns as its not compatible with Foundation 3
Simplified the demo site
Updated documentation to reflect the use of Foundation 3
Numerous bug fixes.
Quickstart
Create a virtual environment for your project and activate it:
$ virtualenv mysite-env $ source mysite-env/bin/activate (mysite-env)$
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 settings.py file and comment out the entry for “pinax_theme_bootstrap” and add “pinax_theme_foundation” in your INSTALLED APPS:
# theme #"pinax_theme_bootstrap", "pinax_theme_foundation",
Inside your project run:
(mysite-env)$ python manage.py syncdb (mysite-env)$ python manage.py runserver
Templates
The Pinax setup_project creates a site_base.html template which extends theme_base.html. Your own templates should generally inherit from site_base.html. Due to some inconsistencies between Bootstrap and Foundation you may need to perform an additional step to ensure that the top nav bar is displays properly. If have created a basic project you need to edit the generated site_base.html to remove the extra ul tags found in the {% nav block %}. In the basic project {% nav block %} contains the profile and notices drop down menu items. The generated project’s 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 %} </ul> {% endif %} {% endblock %}
You need to 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.
Also it is important to note that in Foundation 3 padding and borders no longer increase the width of an element, they only go inward, so for example, .three.columns always has a width of 25% with a 15px padding on the left and right.
In Foundation 2 it was common to override the max-width css styling. This is no longer necessary.
You may find the Foundation 3 migration guide here
Documentation
See the full documentation for more details.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Hashes for pinax-theme-foundation-0.1.6.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | d0119c1d5aedc24d4cfa5f12dcfb723e247f1e220d0386a3cb6adf17f5f43047 |
|
MD5 | 8ed0729326447150e9cf28e1cbf57e02 |
|
BLAKE2b-256 | 985bb2b72ed278fb2143f7209ae5ece03a7763b3cd9e2eb2588d8614b631cd13 |