skip to navigation
skip to content

crispy-forms-foundation 0.3.4

Django application to add 'django-crispy-forms' layout objects for Foundation

Latest Version: 0.6.4


This is a Django application to add django-crispy-forms layout objects for Foundation.

This app does not embed a Foundation release, you will have to install it yourself.



Just register the app in your project settings like that :


Then append this part to specify usage of the Foundation set :

# Default layout to use with "crispy_forms"
CRISPY_TEMPLATE_PACK = 'foundation-5'

If not defined, the default template pack name used is foundation-5, also you can use foundation-3.

All other django-crispy-forms settings option apply, see its documentation for more details.


Import crispy-forms-foundation then you can use the layout object in your forms :

from crispy_forms_foundation.layout import Layout, Fieldset, Field, SplitDateTimeField, RowFluid, Column, Div, ButtonHolder, Submit, HTML

class YourForm(forms.ModelForm):
    *Page* form
    def __init__(self, *args, **kwargs):
        self.helper = FormHelper()
        self.helper.form_action = '.'
        self.helper.layout = Layout(
                ugettext('Display settings'),
                    Column('template', css_class='large-6'),
                    Column('order', css_class='large-3'),
                    Column('visible', css_class='large-3'),
                ugettext('Publish settings'),
                    Column(SplitDateTimeField('published'), css_class='large-6'),
                    Column('slug', css_class='large-6'),
                Submit('submit_and_continue', ugettext('Save and continue')),
                Submit('submit', ugettext('Save')),

        super(YourForm, self).__init__(*args, **kwargs)

The embedded templates are in crispy_forms_foundation/templates/foundation.

Layout items

There is some layout items dedicated to Foundation, other embedded items are just cloned from the default layout items from django-crispy-forms to use the right template.


Act as a div container row, it will embed its items in a div like that :

<div class"row">Your stuff</div>


It has a same behaviour than Row but add a CSS class “row-fluid” that you can use to have top level row that take all the container width. You have to put the CSS for this class to your CSS stylesheets. It will embed its items in a div like that :

<div class"row row-fluid">Your stuff</div>

The CSS to add should be something like that :

.row-fluid {
    width: 100%;
    max-width: 100%;
    min-width: 100%;


This is the column from the Foundation Grid, all columns should be contained in a Row or a RowFluid and you will have to define the column type in the css_class attribute.

Example :

Column('form_field_1', 'form_field_2', css_class='small-12 large-6')

Will render to something like that :

<div class"small-12 large-6 columns">...</div>

columns class is allways appended, so you don’t need to specify it.

If not defined, css_class will default to ‘large-12’.


Layout object for rendering an inline field with Foundation form.

Example :


There is also three optionnal keywords :

label_column=’small-3’, input_column=’small-9’, label_class=”

  • label_column css class to add on the label div column, default to large-3;
  • input_column css class to add on the input div column, default to large-9;
  • label_class css class to add on the label element, defaut is empty, you can use it to add alignment like right inline;

Example :

InlineField('field_name', label_column='small-6 large-3', input_column='small-6 large-9', label_class='right inline')

Note that label_column and input_column are allways filled with the css class columns.


Same as InlineField but default is to be right aligned with a vertical padding using the label_class argument.


Just like ButtonHolder but add a panel css class on the main div.

Use Foundation 5 Abide

You can use Abide validation in your form but note that there is no support within the layout objects. You will have to add the required attribute (and eventually its pattern) on your field widgets in your form.

So to enable Abide you’ll have to load its Javascript library if you don’t load yet the whole Foundation library, then in your form helper you will have to its attribute on the form like this :

class SampleForm(forms.Form):
    def __init__(self, *args, **kwargs):
        self.helper = FormHelper()
        self.helper.attrs = {'data_abide': ''}
        self.helper.form_action = '.'
        self.helper.layout = Layout(

        super(SampleForm, self).__init__(*args, **kwargs)

Then add the required attribute on a field widget like this :

textarea_input = forms.CharField(label=_('Textarea'), widget=forms.Textarea(attrs={'required':''}), required=True)


Version 0.3.3

  • Fix bad template includes in some templates;

Version 0.3.2

Version 0.3.1

Version 0.3.0

Some backward incompatible change have been done, be sure to check them before upgrading.

  • Removed sample view, url and templates. If needed you can find a Django app sample on crispy-forms-foundation-demo;
  • Moving foundation template pack name and its directory to foundation-3. You have to change your settings.CRISPY_TEMPLATE_PACK if you used the old one;
  • Add foundation-5 template pack, it is now the default template pack;
  • Removing camelcase on some css classes :
    • ctrlHolder has changed to holder;
    • buttonHolder has changed to button-holder;
    • asteriskField has changed to asterisk;
    • errorField has changed to error;
    • formHint has changed to hint;
    • inlineLabel has changed to inline-label;
    • multiField has changed to multiple-fields;
File Type Py Version Uploaded on Size
crispy-forms-foundation-0.3.4.tar.gz (md5) Source 2014-05-13 12KB