{% extends "admin/base_site.html" %} {% load i18n %} {% block bodyclass %}grp-doc{% endblock %} {% block content-class %}{% endblock %} {% block title %}Grappelli Documentation » Modules{% endblock %} {% block extrahead %} {% endblock %} {% block breadcrumbs %} {% endblock %} {% block content %}

Modules

Modules & Rows

The most essential component of Grappelli is a .grp-module, wrapping pieces of related content. The horizontal layout within a module is structured by one ore more .grp-row. A row stretches over the full width of the parent module and represents one piece of content or contains multiple pieces of content which belong together. Additionally, there might be a description for a module. In that case, just put a p.grp-description in a .grp-row.

Module

Some text describing the module

Row

Row

Row

{% filter force_escape %}

Module

Some text describing the module

Row

Row

Row

{% endfilter %}

Rows Split into Cells

Rows might be split into two or more cells. To do so assign .grp-cells to the .grp-row you want to carry the cells. Each cell within that row is a .grp-cell then.

Module

Cell

Cell

Cell

{% filter force_escape %}

Module

Cell

Cell

Cell

{% endfilter %}

Nested Modules

Modules may be nested up to three levels.

Parent Module

Child Module

Row

Row

Child Module

Grandchild Module

Row

Row

Grandchild Module

Row

Row

{% filter force_escape %}

Parent Module

Child Module

Row

Row

Child Module

Grandchild Module

Row

Row

Grandchild Module

Row

Row

{% endfilter %}

Headings in Modules

A module usually contains a heading. Although that heading is optional, modules without it do not appear in document outlines — besides, the heading is required if your module is collapsible.

Heading 2

Row

Row

Row

Row

Row

{% filter force_escape %}

Heading 2

Row

Row

{% endfilter %}
{% filter force_escape %}

Row

Row

Row

{% endfilter %}

Collapsible Modules

To make a module collapsible, just add .grp-collapse. With adding .grp-open or .grp-closed you define whether the collapsible module is opened or closed by default. Moreover, you need to define a .grp-collapse-handler which is usually the heading, but you may assign that class to other elements as well. Finally, you have to use some javascript code (see source code below).

Parent Module

Child Module

Row

Row

Child Module

Row

Row

{% filter force_escape %}

Parent Module

Child Module

Row

Row

Child Module

Row

Row

{% endfilter %}
{% filter force_escape %}
(function($) {
    $(document).ready(function() {
        $("#grp-content-container .grp-collapse").grp_collapsible();
    });
})(grp.jQuery);
                    {% endfilter %}

Nesting Modules in Groups

Find out how you may nest modules in stacked & tabular groups.

{% endblock %}