Layout items¶

Layout items for Foundation components

Inherits from the default crispy_forms layout objects to force templates on the right TEMPLATE_PACK (defined from settings.CRISPY_TEMPLATE_PACK) and implements Foundation components.

class crispy_forms_foundation.layout.Div(*fields, **kwargs)¶

Bases: crispy_forms.layout.Div

It wraps fields in a <div>

You can set css_id for a DOM id and css_class for a DOM class.

Example:

Div('form_field_1', 'form_field_2', css_id='div-example',
    css_class='divs')

class crispy_forms_foundation.layout.Panel(field, *args, **kwargs)¶

Bases: crispy_forms.layout.Div

Act like Div but add a panel css class.

Example:

Panel('form_field_1', 'form_field_2', css_id='div-example',
      css_class='divs')

class crispy_forms_foundation.layout.Row(*fields, **kwargs)¶

Bases: crispy_forms_foundation.layout.base.Div

Wrap fields in a div whose default class is row. Example:

Row('form_field_1', 'form_field_2', 'form_field_3')

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

<div class"row">Content</div>

class crispy_forms_foundation.layout.RowFluid(*fields, **kwargs)¶

Bases: crispy_forms_foundation.layout.grid.Row

Wrap fields in a div whose default class is “row row-fluid”. Example:

RowFluid('form_field_1', 'form_field_2', 'form_field_3')

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">Content</div>

The CSS to add should be something like that:

/*
* Fluid row takes the full width but keep normal row and columns
* behaviors
*/
@mixin row-fluid-mixin {
    max-width: 100%;
    // Restore the initial behavior restrained to the grid
    .row{
        margin: auto;
        @include grid-row;
        // Preserve nested fluid behavior
        &.row-fluid{
            max-width: 100%;
        }
    }
}
.row.row-fluid{
    @include row-fluid-mixin;
}
@media #{$small-up} {
    .row.small-row-fluid{ @include row-fluid-mixin; }
}
@media #{$medium-up} {
    .row.medium-row-fluid{ @include row-fluid-mixin; }
}
@media #{$large-up} {
    .row.large-row-fluid{ @include row-fluid-mixin; }
}
@media #{$xlarge-up} {
    .row.xlarge-row-fluid{ @include row-fluid-mixin; }
}
@media #{$xxlarge-up} {
    .row.xxlarge-row-fluid{ @include row-fluid-mixin; }
}

It must be included after Foundation grid component is imported.

class crispy_forms_foundation.layout.Column(field, *args, **kwargs)¶

Bases: crispy_forms_foundation.layout.base.Div

Wrap fields in a div. If not defined, CSS class will default to large-12 columns. columns class is always appended, so you don’t need to specify it.

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 always appended, so you don’t need to specify it.

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

class crispy_forms_foundation.layout.Field(*args, **kwargs)¶

Bases: crispy_forms.layout.Field

Layout object, contain one field name and you can add attributes to it easily. For setting class attributes, you need to use css_class, because class is a reserved Python keyword.

Example:

Field('field_name', style="color: #333;", css_class="whatever",
      id="field_name")

class crispy_forms_foundation.layout.MultiField(label, *fields, **kwargs)¶

Bases: crispy_forms.layout.MultiField

MultiField container. Render to a MultiField

class crispy_forms_foundation.layout.SplitDateTimeField(*args, **kwargs)¶

Bases: crispy_forms_foundation.layout.fields.Field

Just an inherit from crispy_forms.layout.Field to have a common Field for displaying field with the django.forms.extra.SplitDateTimeWidget widget.

Simply use a specific template

class crispy_forms_foundation.layout.InlineField(field, label_column='large-3', input_column='large-9', label_class='', *args, **kwargs)¶

Bases: crispy_forms_foundation.layout.fields.Field

Layout object for rendering an inline field with Foundation

Example:

InlineField('field_name')

Or:

InlineField('field_name', label_column='large-8',
            input_column='large-4', label_class='')

label_column, input_column, label_class, are optional argument.

class crispy_forms_foundation.layout.InlineJustifiedField(field, *args, **kwargs)¶

Bases: crispy_forms_foundation.layout.fields.InlineField

Same as InlineField but default is to be right aligned with a vertical padding

class crispy_forms_foundation.layout.SwitchField(field, *args, **kwargs)¶

Bases: crispy_forms.layout.Field

A specific field to use Foundation form switches

You must only use this with a checkbox field and this is a raw usage of this Foundation element, you should see InlineSwitchField instead.

Example:

SwitchField('field_name', style="color: #333;", css_class="whatever",
            id="field_name")

class crispy_forms_foundation.layout.InlineSwitchField(field, *args, **kwargs)¶

Bases: crispy_forms_foundation.layout.fields.InlineField

Like SwitchField it use Foundation form switches with checkbox field but within an InlineField

Contrary to SwitchField this play nice with the label to be able to display it (as Foundation form switches default behavior is to hide the label text)

Example:

InlineSwitchField('field_name')

Or:

InlineSwitchField('field_name', label_column='large-8',
                  input_column='large-4', label_class='',
                  switch_class="inline")

label_column, input_column, label_class, switch_class are optional argument.

class crispy_forms_foundation.layout.ButtonHolder(*fields, **kwargs)¶

Bases: crispy_forms.layout.ButtonHolder

It wraps fields in a <div class="button-holder">

This is where you should put Layout objects that render to form buttons like Submit. It should only hold HTML and BaseInput inherited objects.

Example:

ButtonHolder(
    HTML(<span style="display: hidden;">Information Saved</span>),
    Submit('Save', 'Save')
)

class crispy_forms_foundation.layout.ButtonHolderPanel(field, *args, **kwargs)¶

Bases: crispy_forms_foundation.layout.buttons.ButtonHolder

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

class crispy_forms_foundation.layout.ButtonGroup(*fields, **kwargs)¶

Bases: crispy_forms.layout.LayoutObject

It wraps fields in a <ul class="button-group">

This is where you should put Layout objects that render to form buttons like Submit. It should only hold HTML and BaseInput inherited objects.

Example:

ButtonGroup(
    Submit('Save', 'Save'),
    Button('Cancel', 'Cancel'),
)

class crispy_forms_foundation.layout.Button(name, value, **kwargs)¶

Bases: crispy_forms.layout.BaseInput

Used to create a Submit input descriptor for the {% crispy %} template tag:

button = Button('Button 1', 'Press Me!')

Note

The first argument is also slugified and turned into the id for the button.

class crispy_forms_foundation.layout.Submit(name, value, **kwargs)¶

Bases: crispy_forms.layout.BaseInput

Used to create a Submit button descriptor for the {% crispy %} template tag:

submit = Submit('Search the Site', 'search this site')

Note

The first argument is also slugified and turned into the id for the submit button.

class crispy_forms_foundation.layout.Hidden(name, value, **kwargs)¶

Bases: crispy_forms.layout.Hidden

Used to create a Hidden input descriptor for the {% crispy %} template tag.

class crispy_forms_foundation.layout.Reset(name, value, **kwargs)¶

Bases: crispy_forms.layout.BaseInput

Used to create a Reset button input descriptor for the {% crispy %} template tag:

reset = Reset('Reset This Form', 'Revert Me!')

Note

The first argument is also slugified and turned into the id for the reset.

class crispy_forms_foundation.layout.Fieldset(legend, *fields, **kwargs)¶

Bases: crispy_forms.layout.Fieldset

It wraps fields in a <fieldset>:

Fieldset("Text for the legend",
    'form_field_1',
    'form_field_2'
)

The first parameter is the text for the fieldset legend. This text is context aware, so you can do things like :

Fieldset("Data for {{ user.username }}",
    'form_field_1',
    'form_field_2'
)

class crispy_forms_foundation.layout.TabItem(name, *fields, **kwargs)¶

Bases: crispy_forms.bootstrap.Tab

Tab item object. It wraps fields in a div whose default class is “tabs” and takes a name as first argument.

The item name is also slugified to build an id for the tab if you don’t define it using css_id argument.

Example:

TabItem('My tab', 'form_field_1', 'form_field_2', 'form_field_3')

TabItem layout item has no real utility out of a TabHolder.

has_errors(form)¶: Find tab fields are listed as invalid

render_link(form)¶: Render the link for the tab-pane. It must be called after render so css_class is updated with active class name if needed.

class crispy_forms_foundation.layout.TabHolder(*fields, **kwargs)¶

Bases: crispy_forms.bootstrap.TabHolder

Tabs holder object to wrap Tab item objects in a container:

TabHolder(
    TabItem('My tab 1', 'form_field_1', 'form_field_2'),
    TabItem('My tab 2', 'form_field_3')
)

TabHolder direct children should allways be a TabItem layout item.

The first TabItem containing a field error will be marked as active if any, else this will be just the first TabItem.

class crispy_forms_foundation.layout.VerticalTabHolder(*fields, **kwargs)¶

Bases: crispy_forms_foundation.layout.containers.TabHolder

VerticalTabHolder appends vertical class to TabHolder container

class crispy_forms_foundation.layout.AccordionItem(name, *fields, **kwargs)¶

Bases: crispy_forms.bootstrap.AccordionGroup

Accordion item object. It wraps given fields inside an accordion tab. It takes accordion tab name as first argument.

The item name is also slugified to build an id for the tab if you don’t define it using css_id argument.

Example:

AccordionItem("group name", "form_field_1", "form_field_2")

class crispy_forms_foundation.layout.AccordionHolder(*fields, **kwargs)¶

Bases: crispy_forms.bootstrap.Accordion

Accordion items holder object to wrap Accordion item objects in a container:

AccordionHolder(
    AccordionItem("group name", "form_field_1", "form_field_2"),
    AccordionItem("another group name", "form_field"),
)

AccordionHolder direct children should allways be a AccordionItem layout item.

The first AccordionItem containing a field error will be marked as active if any, else this will be just the first AccordionItem.

Base¶

Basic layout items

class crispy_forms_foundation.layout.base.Div(*fields, **kwargs)¶

Bases: crispy_forms.layout.Div

It wraps fields in a <div>

You can set css_id for a DOM id and css_class for a DOM class.

Example:

Div('form_field_1', 'form_field_2', css_id='div-example',
    css_class='divs')

class crispy_forms_foundation.layout.base.Panel(field, *args, **kwargs)¶

Bases: crispy_forms.layout.Div

Act like Div but add a panel css class.

Example:

Panel('form_field_1', 'form_field_2', css_id='div-example',
      css_class='divs')

Fields¶

Field layout items

See :

Foundation forms for input field components;
Foundation Switches for switches components;

class crispy_forms_foundation.layout.fields.Field(*args, **kwargs)¶

Bases: crispy_forms.layout.Field

Layout object, contain one field name and you can add attributes to it easily. For setting class attributes, you need to use css_class, because class is a reserved Python keyword.

Example:

Field('field_name', style="color: #333;", css_class="whatever",
      id="field_name")

class crispy_forms_foundation.layout.fields.InlineField(field, label_column='large-3', input_column='large-9', label_class='', *args, **kwargs)¶

Bases: crispy_forms_foundation.layout.fields.Field

Layout object for rendering an inline field with Foundation

Example:

InlineField('field_name')

Or:

InlineField('field_name', label_column='large-8',
            input_column='large-4', label_class='')

label_column, input_column, label_class, are optional argument.

class crispy_forms_foundation.layout.fields.InlineJustifiedField(field, *args, **kwargs)¶

Bases: crispy_forms_foundation.layout.fields.InlineField

Same as InlineField but default is to be right aligned with a vertical padding

class crispy_forms_foundation.layout.fields.InlineSwitchField(field, *args, **kwargs)¶

Bases: crispy_forms_foundation.layout.fields.InlineField

Like SwitchField it use Foundation form switches with checkbox field but within an InlineField

Contrary to SwitchField this play nice with the label to be able to display it (as Foundation form switches default behavior is to hide the label text)

Example:

InlineSwitchField('field_name')

Or:

InlineSwitchField('field_name', label_column='large-8',
                  input_column='large-4', label_class='',
                  switch_class="inline")

label_column, input_column, label_class, switch_class are optional argument.

class crispy_forms_foundation.layout.fields.MultiField(label, *fields, **kwargs)¶

Bases: crispy_forms.layout.MultiField

MultiField container. Render to a MultiField

class crispy_forms_foundation.layout.fields.SplitDateTimeField(*args, **kwargs)¶

Bases: crispy_forms_foundation.layout.fields.Field

Just an inherit from crispy_forms.layout.Field to have a common Field for displaying field with the django.forms.extra.SplitDateTimeWidget widget.

Simply use a specific template

class crispy_forms_foundation.layout.fields.SwitchField(field, *args, **kwargs)¶

Bases: crispy_forms.layout.Field

A specific field to use Foundation form switches

You must only use this with a checkbox field and this is a raw usage of this Foundation element, you should see InlineSwitchField instead.

Example:

SwitchField('field_name', style="color: #333;", css_class="whatever",
            id="field_name")

Grid¶

Foundation grid layout objects

See Foundation Grid for grid components.

class crispy_forms_foundation.layout.grid.Column(field, *args, **kwargs)¶

Bases: crispy_forms_foundation.layout.base.Div

Wrap fields in a div. If not defined, CSS class will default to large-12 columns. columns class is always appended, so you don’t need to specify it.

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 always appended, so you don’t need to specify it.

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

class crispy_forms_foundation.layout.grid.Row(*fields, **kwargs)¶

Bases: crispy_forms_foundation.layout.base.Div

Wrap fields in a div whose default class is row. Example:

Row('form_field_1', 'form_field_2', 'form_field_3')

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

<div class"row">Content</div>

class crispy_forms_foundation.layout.grid.RowFluid(*fields, **kwargs)¶

Bases: crispy_forms_foundation.layout.grid.Row

Wrap fields in a div whose default class is “row row-fluid”. Example:

RowFluid('form_field_1', 'form_field_2', 'form_field_3')

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">Content</div>

The CSS to add should be something like that:

/*
* Fluid row takes the full width but keep normal row and columns
* behaviors
*/
@mixin row-fluid-mixin {
    max-width: 100%;
    // Restore the initial behavior restrained to the grid
    .row{
        margin: auto;
        @include grid-row;
        // Preserve nested fluid behavior
        &.row-fluid{
            max-width: 100%;
        }
    }
}
.row.row-fluid{
    @include row-fluid-mixin;
}
@media #{$small-up} {
    .row.small-row-fluid{ @include row-fluid-mixin; }
}
@media #{$medium-up} {
    .row.medium-row-fluid{ @include row-fluid-mixin; }
}
@media #{$large-up} {
    .row.large-row-fluid{ @include row-fluid-mixin; }
}
@media #{$xlarge-up} {
    .row.xlarge-row-fluid{ @include row-fluid-mixin; }
}
@media #{$xxlarge-up} {
    .row.xxlarge-row-fluid{ @include row-fluid-mixin; }
}

It must be included after Foundation grid component is imported.

Buttons¶

Button layout items

See :

Foundation buttons for button components;
Foundation button groups for button groups components;

class crispy_forms_foundation.layout.buttons.Button(name, value, **kwargs)¶

Bases: crispy_forms.layout.BaseInput

Used to create a Submit input descriptor for the {% crispy %} template tag:

button = Button('Button 1', 'Press Me!')

Note

The first argument is also slugified and turned into the id for the button.

class crispy_forms_foundation.layout.buttons.ButtonGroup(*fields, **kwargs)¶

Bases: crispy_forms.layout.LayoutObject

It wraps fields in a <ul class="button-group">

This is where you should put Layout objects that render to form buttons like Submit. It should only hold HTML and BaseInput inherited objects.

Example:

ButtonGroup(
    Submit('Save', 'Save'),
    Button('Cancel', 'Cancel'),
)

class crispy_forms_foundation.layout.buttons.ButtonHolder(*fields, **kwargs)¶

Bases: crispy_forms.layout.ButtonHolder

It wraps fields in a <div class="button-holder">

This is where you should put Layout objects that render to form buttons like Submit. It should only hold HTML and BaseInput inherited objects.

Example:

ButtonHolder(
    HTML(<span style="display: hidden;">Information Saved</span>),
    Submit('Save', 'Save')
)

class crispy_forms_foundation.layout.buttons.ButtonHolderPanel(field, *args, **kwargs)¶

Bases: crispy_forms_foundation.layout.buttons.ButtonHolder

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

class crispy_forms_foundation.layout.buttons.Hidden(name, value, **kwargs)¶

Bases: crispy_forms.layout.Hidden

Used to create a Hidden input descriptor for the {% crispy %} template tag.

class crispy_forms_foundation.layout.buttons.Reset(name, value, **kwargs)¶

Bases: crispy_forms.layout.BaseInput

Used to create a Reset button input descriptor for the {% crispy %} template tag:

reset = Reset('Reset This Form', 'Revert Me!')

Note

The first argument is also slugified and turned into the id for the reset.

class crispy_forms_foundation.layout.buttons.Submit(name, value, **kwargs)¶

Bases: crispy_forms.layout.BaseInput

Used to create a Submit button descriptor for the {% crispy %} template tag:

submit = Submit('Search the Site', 'search this site')

Note

The first argument is also slugified and turned into the id for the submit button.

Form containers¶

Form container layout objects

See :

Foundation forms for fieldset component;
Foundation Accordion for accordion components;
Foundation Tabs for tabs components;

class crispy_forms_foundation.layout.containers.AccordionHolder(*fields, **kwargs)¶

Bases: crispy_forms.bootstrap.Accordion

Accordion items holder object to wrap Accordion item objects in a container:

AccordionHolder(
    AccordionItem("group name", "form_field_1", "form_field_2"),
    AccordionItem("another group name", "form_field"),
)

AccordionHolder direct children should allways be a AccordionItem layout item.

The first AccordionItem containing a field error will be marked as active if any, else this will be just the first AccordionItem.

class crispy_forms_foundation.layout.containers.AccordionItem(name, *fields, **kwargs)¶

Bases: crispy_forms.bootstrap.AccordionGroup

Accordion item object. It wraps given fields inside an accordion tab. It takes accordion tab name as first argument.

The item name is also slugified to build an id for the tab if you don’t define it using css_id argument.

Example:

AccordionItem("group name", "form_field_1", "form_field_2")

class crispy_forms_foundation.layout.containers.Fieldset(legend, *fields, **kwargs)¶

Bases: crispy_forms.layout.Fieldset

It wraps fields in a <fieldset>:

Fieldset("Text for the legend",
    'form_field_1',
    'form_field_2'
)

The first parameter is the text for the fieldset legend. This text is context aware, so you can do things like :

Fieldset("Data for {{ user.username }}",
    'form_field_1',
    'form_field_2'
)

class crispy_forms_foundation.layout.containers.TabHolder(*fields, **kwargs)¶

Bases: crispy_forms.bootstrap.TabHolder

Tabs holder object to wrap Tab item objects in a container:

TabHolder(
    TabItem('My tab 1', 'form_field_1', 'form_field_2'),
    TabItem('My tab 2', 'form_field_3')
)

TabHolder direct children should allways be a TabItem layout item.

The first TabItem containing a field error will be marked as active if any, else this will be just the first TabItem.

class crispy_forms_foundation.layout.containers.TabItem(name, *fields, **kwargs)¶

Bases: crispy_forms.bootstrap.Tab

Tab item object. It wraps fields in a div whose default class is “tabs” and takes a name as first argument.

The item name is also slugified to build an id for the tab if you don’t define it using css_id argument.

Example:

TabItem('My tab', 'form_field_1', 'form_field_2', 'form_field_3')

TabItem layout item has no real utility out of a TabHolder.

has_errors(form)¶: Find tab fields are listed as invalid

render_link(form)¶: Render the link for the tab-pane. It must be called after render so css_class is updated with active class name if needed.

class crispy_forms_foundation.layout.containers.VerticalTabHolder(*fields, **kwargs)¶

Bases: crispy_forms_foundation.layout.containers.TabHolder

VerticalTabHolder appends vertical class to TabHolder container