{% extends "admin/base_site.html" %} {% load i18n %}{% load url from future %} {% 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 very essential component of Grappelli is a .grp-module.
It wraps pieces of content which belong together.

The horizontal layout within a module is basically structured by one ore more .grp-row.
A row stretches over the full width of the parent module.
It represents one piece of content or contains multiple pieces of content which belong together.

There might be a description for a module - 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

Usually a module starts with a heading but you might as well use it without one.
Just be aware of the fact that modules without headings do not appear in document outlines.

Especially when nesting modules headings are meaningful because they give a description of the nested levels.

If you are going to use collapsible modules you have to use headings (as they act as collapsible-handlers).

Heading 2

Row

Row

Row

Row

Row

{% filter force_escape %}

Heading 2

Row

Row

{% endfilter %}
{% filter force_escape %}

Row

Row

Row

{% endfilter %}

Collapsible Modules

It's very easy to turn modules into collapsible ones.

To do so just add .grp-collapse to the .grp-module you want to be collapsible.

With adding .grp-open or .grp-closed you define whether the collapsible module is opened or closed initially.

Now you have to define a .grp-collapse-handler. Usually that's the heading of the collapsible module but you may assign to other elements as well.

Finally you have to use some javascript code (e.g. with the 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 %}