Bootstrap Italia template for uniCMS
Bootstrap Italia
The Bootstrap Italia library is the simplest and safest way to build modern, inclusive and easy to maintain web interfaces.
Completely open-source, built on the foundations of Bootstrap 5.1, of which it inherits all the features, components, grids and utility classes, customizing them according to the Design Guidelines for Italian Public Administration websites, Bootstrap Italia uses patterns and components defined in the Designers Italia UI Kit and transforms them into ready-to-use code!
Bootstrap Italia Django theme
This library for the Django Python framework provides the default template scheme, suitably divided into blocks to be overloaded, in order to provide your project with a graphical interface that respects the design guidelines for web services of the Italian Public administration.
uniCMS
uniCMS is a Web Content Management System built on top of Django Framework.
Install
pip install unicms-template-italia
Setup
Add these block positions in your settings.py
CMS_TEMPLATE_BLOCK_SECTIONS = (
('pre-head', _('Pre-Header')),
('head', _('Header')),
('menu-1', _('Navigation Main Menu')),
('menu-2', _('Navigation Menu 2')),
('menu-3', _('Navigation Menu 3')),
('menu-4', _('Navigation Menu 4')),
('banner', _('Banner/Slider')),
('slider-2', _('Carousel/Slider 2')),
('pre-footer', _('Pre-Footer')),
('footer', _('Footer')),
('post-footer', _('Post-Footer')),
# breadcrumbs
('breadcrumbs', _('Breadcrumbs')),
# section 1
('section-1',
(
('1-top-a', _('Section 1 - Top A')),
('1-top-b', _('Section 1 - Top B')),
('1-top-c', _('Section 1 - Top C')),
('1-mid-top-a', _('Section 1 - Middle Top A')),
('1-mid-top-b', _('Section 1 - Middle Top B')),
('1-mid-top-c', _('Section 1 - Middle Top C')),
('1-left-a', _('Section 1 - Left A')),
('1-left-b', _('Section 1 - Left B')),
('1-center-top-a', _('Section 1 - Center Top A')),
('1-center-top-b', _('Section 1 - Center Top B')),
('1-center-top-c', _('Section 1 - Center Top C')),
('1-center-content', _('Section 1 - Center Content')),
('1-center-bottom-a', _('Section 1 - Center Bottom A')),
('1-center-bottom-b', _('Section 1 - Center Bottom B')),
('1-center-bottom-c', _('Section 1 - Center Bottom C')),
('1-right-a', _('Section 1 - Right A')),
('1-right-b', _('Section 1 - Right B')),
('1-mid-bottom-a', _('Section 1 - Middle Bottom A')),
('1-mid-bottom-b', _('Section 1 - Middle Bottom B')),
('1-mid-bottom-c', _('Section 1 - Middle Bottom C')),
('1-bottom-a', _('Section 1 - Bottom A')),
('1-bottom-b', _('Section 1 - Bottom B')),
('1-bottom-c', _('Section 1 - Bottom C')),
)
),
# section 2
('section-2',
(
('2-top-a', _('Section 2 - Top A')),
('2-top-b', _('Section 2 - Top B')),
('2-top-c', _('Section 2 - Top C')),
('2-mid-top-a', _('Section 2 - Middle Top A')),
('2-mid-top-b', _('Section 2 - Middle Top B')),
('2-mid-top-c', _('Section 2 - Middle Top C')),
('2-left-a', _('Section 2 - Left A')),
('2-left-b', _('Section 2 - Left B')),
('2-center-top-a', _('Section 2 - Center Top A')),
('2-center-top-b', _('Section 2 - Center Top B')),
('2-center-top-c', _('Section 2 - Center Top C')),
('2-center-content', _('Section 2 - Center Content')),
('2-center-bottom-a', _('Section 2 - Center Bottom A')),
('2-center-bottom-b', _('Section 2 - Center Bottom B')),
('2-center-bottom-c', _('Section 2 - Center Bottom C')),
('2-right-a', _('Section 2 - Right A')),
('2-right-b', _('Section 2 - Right B')),
('2-mid-bottom-a', _('Section 2 - Middle Bottom A')),
('2-mid-bottom-b', _('Section 2 - Middle Bottom B')),
('2-mid-bottom-c', _('Section 2 - Middle Bottom C')),
('2-bottom-a', _('Section 2 - Bottom A')),
('2-bottom-b', _('Section 2 - Bottom B')),
('2-bottom-c', _('Section 2 - Bottom C')),
)
),
# section 1
('section-3',
(
('3-top-a', _('Section 3 - Top A')),
('3-top-b', _('Section 3 - Top B')),
('3-top-c', _('Section 3 - Top C')),
('3-mid-top-a', _('Section 3 - Middle Top A')),
('3-mid-top-b', _('Section 3 - Middle Top B')),
('3-mid-top-c', _('Section 3 - Middle Top C')),
('3-left-a', _('Section 3 - Left A')),
('3-left-b', _('Section 3 - Left B')),
('3-center-top-a', _('Section 3 - Center Top 1')),
('3-center-top-b', _('Section 3 - Center Top 2')),
('3-center-top-c', _('Section 3 - Center Top 3')),
('3-center-content', _('Section 3 - Center Content')),
('3-center-bottom-a', _('Section 3 - Center Bottom A')),
('3-center-bottom-b', _('Section 3 - Center Bottom B')),
('3-center-bottom-c', _('Section 3 - Center Bottom C')),
('3-mid-bottom-a', _('Section 3 - Middle Bottom A')),
('3-mid-bottom-b', _('Section 3 - Middle Bottom B')),
('3-mid-bottom-c', _('Section 3 - Middle Bottom C')),
('3-bottom-a', _('Section 3 - Bottom A')),
('3-bottom-b', _('Section 3 - Bottom B')),
('3-bottom-c', _('Section 3 - Bottom C')),
)
),
)
Run ./manage.py unicms_collect_templates to load new template files.
This template has a built-in grid system that provides all the Bootstrap layout building flexibily and powerful responsive behaviour.
Sections
Content area is divided in three horizontal sections (rows, named “1”, “2”, “3”), each of which includes the same, rich structure of block positions.
Block Positions
Every section block position has a numeric prefix that identifies the parent section (eg. 1, 2, 3).
We’ll use ‘{}’ to generalize the prefix.
Position |
Description |
|---|---|
menu-1 |
Main menu |
banner |
Main banner |
menu-2 |
Secondary menu |
breadcrumbs |
Breadcrumbs |
{}-top-a |
Top area, position A |
{}-top-b |
Top area, position B |
{}-top-c |
Top area, position C |
{}-mid-top-a |
Middle-Top area, position A |
{}-mid-top-b |
Middle-Top area, position B |
{}-mid-top-c |
Middle-Top area, position C |
{}-left-a |
Left area, position A |
{}-left-b |
Left area, position B |
{}-center-top-a |
Center-Top area, position A |
{}-center-top-b |
Center-Top area, position B |
{}-center-top-c |
Center-Top area, position C |
{}-center-content |
Center content |
{}-center-bottom-a |
Center-Bottom area, position A |
{}-center-bottom-b |
Center-Bottom area, position B |
{}-center-bottom-c |
Center-Bottom area, position C |
{}-mid-bottom-a |
Middle-Bottom area, position A |
{}-mid-bottom-b |
Middle-Bottom area, position B |
{}-mid-bottom-c |
Middle-Bottom area, position C |
{}-bottom-a |
Bottom area, position A |
{}-bottom-b |
Bottom area, position B |
{}-bottom-c |
Bottom area, position C |
Blocks ratio
Every block position has a specific Bootstrap style class that define its ratio in the parent area (top, middle-top, etc…).
There is a Django template block surrounding HTML class attribute to permit an easy override in custom templates based on this.
Class Django block |
Description (class value of) |
Value |
|---|---|---|
{% block section_{}_classes %} |
section-{} |
py-5 |
{% block section_2_classes %} |
section-2 |
py-5 neutral-2-bg |
{% block {}_top_abc_a %} |
{}-top-a if A,B,C are visible |
col-12 col-md-4 |
{% block {}_top_abc_b %} |
{}-top-b if A,B,C are visible |
col-12 col-md-4 |
{% block {}_top_abc_b %} |
{}-top-c if A,B,C are visible |
col-12 col-md-4 |
{% block {}_top_ab_a %} |
{}-top-a if A,B are visible |
col-12 col-md-8 |
{% block {}_top_ab_b %} |
{}-top-b if A,B are visible |
col-12 col-md-4 |
{% block {}_top_ac_a %} |
{}-top-a if A,C are visible |
col-12 col-md-6 |
{% block {}_top_ac_c %} |
{}-top-c if A,C are visible |
col-12 col-md-6 |
{% block {}_top_bc_b %} |
{}-top-a if B,C are visible |
col-12 col-md-4 |
{% block {}_top_bc_c %} |
{}-top-c if B,C are visible |
col-12 col-md-8 |
{% block {}_mid_top_abc_a %} |
{}-mid-top-a if A,B,C are visible |
col-12 col-md-4 |
{% block {}_mid_top_abc_b %} |
{}-mid-top-b if A,B,C are visible |
col-12 col-md-4 |
{% block {}_mid_top_abc_b %} |
{}-mid-top-c if A,B,C are visible |
col-12 col-md-4 |
{% block {}_mid_top_ab_a %} |
{}-mid-top-a if A,B are visible |
col-12 col-md-8 |
{% block {}_mid_top_ab_b %} |
{}-mid-top-b if A,B are visible |
col-12 col-md-4 |
{% block {}_mid_top_ac_a %} |
{}-mid-top-a if A,C are visible |
col-12 col-md-6 |
{% block {}_mid_top_ac_c %} |
{}-mid-top-c if A,C are visible |
col-12 col-md-6 |
{% block {}_mid_top_bc_b %} |
{}-mid-top-a if B,C are visible |
col-12 col-md-4 |
{% block {}_mid_top_bc_c %} |
{}-mid-top-c if B,C are visible |
col-12 col-md-8 |
{% block {}_left_ab %} |
{}-left column if left A,B are visible |
col-12 col-md-4 |
{% block {}_left_a %} |
{}-left column if left A is visible |
col-12 col-md-3 |
{% block {}_left_b %} |
{}-left column if left B is visible |
col-12 col-md-2 |
{% block {}_left_ab_a %} |
{}-left-a column if A,B are visible |
col-12 col-md-6 |
{% block {}_left_ab_b %} |
{}-left-b column if A,B are visible |
col-12 col-md-6 |
{% block {}_left_no_center_ab %} |
{}-left column if left A,B are visible but no center |
col-12 col-md-6 |
{% block {}_left_no_center_a %} |
{}-left column if left A is visible but no center |
col-12 col-md-6 |
{% block {}_left_no_center_b %} |
{}-left column if left B is visible but no center |
col-12 col-md-6 |
{% block {}_left_no_center_ab_a %} |
{}-left-a column if A,B are visible but no center |
col-12 col-md-6 |
{% block {}_left_no_center_ab_b %} |
{}-left-b column if A,B are visible but no center |
col-12 col-md-6 |
{% block {}_center_left_ab %} |
{}-center column if left A,B are visible |
col |
{% block {}_center_left_a %} |
{}-center column if left A is visible |
col |
{% block {}_center_left_b %} |
{}-center column if left B is visible |
col offset-md-1 |
{% block {}_center %} |
{}-center column if left is not visible |
col |
{% block {}_center_top_abc_a %} |
{}-center-top-a column if A,B,C are visible |
col-12 col-md-4 |
{% block {}_center_top_abc_b %} |
{}-center-top-b column if A,B,C are visible |
col-12 col-md-4 |
{% block {}_center_top_abc_c %} |
{}-center-top-c column if A,B,C are visible |
col-12 col-md-4 |
{% block {}_center_top_ab_a %} |
{}-center-top-a column if A,B are visible |
col-12 col-md-8 |
{% block {}_center_top_ab_b %} |
{}-center-top-b column if A,B are visible |
col-12 col-md-4 |
{% block {}_center_top_ab_a %} |
{}-center-top-a column if A,C are visible |
col-12 col-md-6 |
{% block {}_center_top_ac_c %} |
{}-center-top-c column if A,C are visible |
col-12 col-md-6 |
{% block {}_center_top_bc_b %} |
{}-center-top-b column if B,C are visible |
col-12 col-md-4 |
{% block {}_center_top_bc_c %} |
{}-center-top-c column if B,C are visible |
col-12 col-md-8 |
{% block {}_center_bottom_abc_a %} |
{}-center-bottom-a column if A,B,C are visible |
col-12 col-md-4 |
{% block {}_center_bottom_abc_b %} |
{}-center-bottom-b column if A,B,C are visible |
col-12 col-md-4 |
{% block {}_center_bottom_abc_c %} |
{}-center-bottom-c column if A,B,C are visible |
col-12 col-md-4 |
{% block {}_center_bottom_ab_a %} |
{}-center-bottom-a column if A,B are visible |
col-12 col-md-8 |
{% block {}_center_bottom_ab_b %} |
{}-center-bottom-b column if A,B are visible |
col-12 col-md-4 |
{% block {}_center_bottom_ab_a %} |
{}-center-bottom-a column if A,C are visible |
col-12 col-md-6 |
{% block {}_center_bottom_ac_c %} |
{}-center-bottom-c column if A,C are visible |
col-12 col-md-6 |
{% block {}_center_bottom_bc_b %} |
{}-center-bottom-b column if B,C are visible |
col-12 col-md-4 |
{% block {}_center_bottom_bc_c %} |
{}-center-bottom-c column if B,C are visible |
col-12 col-md-8 |
{% block {}_right_ab %} |
{}-right column if A,B are visible |
col-12 col-md-4 |
{% block {}_right_a %} |
{}-right column if A is visible |
col-12 col-md-3 |
{% block {}_right_b %} |
{}-right column if B is visible |
col-12 col-md-2 offset-md-1 |
{% block {}_right_ab_a %} |
{}-right-a column if A,B are visible |
col-12 col-md-6 |
{% block {}_right_ab_b %} |
{}-right-b column if A,B are visible |
col-12 col-md-6 |
{% block {}_right_no_center_ab %} |
{}-right column if right A,B are visible but no center |
col-12 col-md-6 |
{% block {}_right_no_center_a %} |
{}-right column if right A is visible but no center |
col-12 col-md-6 |
{% block {}_right_no_center_b %} |
{}-right column if right B is visible but no center |
col-12 col-md-6 |
{% block {}_right_no_center_ab_a %} |
{}-right-a column if A,B are visible but no center |
col-12 col-md-6 |
{% block {}_right_no_center_ab_b %} |
{}-right-b column if A,B are visible but no center |
col-12 col-md-6 |
{% block {}_bottom_abc_a %} |
{}-bottom-a if A,B,C are visible |
col-12 col-md-4 |
{% block {}_bottom_abc_b %} |
{}-bottom-b if A,B,C are visible |
col-12 col-md-4 |
{% block {}_bottom_abc_b %} |
{}-bottom-c if A,B,C are visible |
col-12 col-md-4 |
{% block {}_bottom_ab_a %} |
{}-bottom-a if A,B are visible |
col-12 col-md-8 |
{% block {}_bottom_ab_b %} |
{}-bottom-b if A,B are visible |
col-12 col-md-4 |
{% block {}_bottom_ac_a %} |
{}-bottom-a if A,C are visible |
col-12 col-md-6 |
{% block {}_bottom_ac_c %} |
{}-bottom-c if A,C are visible |
col-12 col-md-6 |
{% block {}_bottom_bc_b %} |
{}-bottom-a if B,C are visible |
col-12 col-md-4 |
{% block {}_bottom_bc_c %} |
{}-bottom-c if B,C are visible |
col-12 col-md-8 |
{% block {}_mid_bottom_abc_a %} |
{}-mid-bottom-a if A,B,C are visible |
col-12 col-md-4 |
{% block {}_mid_bottom_abc_b %} |
{}-mid-bottom-b if A,B,C are visible |
col-12 col-md-4 |
{% block {}_mid_bottom_abc_b %} |
{}-mid-bottom-c if A,B,C are visible |
col-12 col-md-4 |
{% block {}_mid_bottom_ab_a %} |
{}-mid-bottom-a if A,B are visible |
col-12 col-md-8 |
{% block {}_mid_bottom_ab_b %} |
{}-mid-bottom-b if A,B are visible |
col-12 col-md-4 |
{% block {}_mid_bottom_ac_a %} |
{}-mid-bottom-a if A,C are visible |
col-12 col-md-6 |
{% block {}_mid_bottom_ac_c %} |
{}-mid-bottom-c if A,C are visible |
col-12 col-md-6 |
{% block {}_mid_bottom_bc_b %} |
{}-mid-bottom-a if B,C are visible |
col-12 col-md-4 |
{% block {}_mid_bottom_bc_c %} |
{}-mid-bottom-c if B,C are visible |
col-12 col-md-8 |
{% block {}_bottom_abc_a %} |
{}-bottom-a if A,B,C are visible |
col-12 col-md-4 |
{% block {}_bottom_abc_b %} |
{}-bottom-b if A,B,C are visible |
col-12 col-md-4 |
{% block {}_bottom_abc_b %} |
{}-bottom-c if A,B,C are visible |
col-12 col-md-4 |
{% block {}_bottom_ab_a %} |
{}-bottom-a if A,B are visible |
col-12 col-md-8 |
{% block {}_bottom_ab_b %} |
{}-bottom-b if A,B are visible |
col-12 col-md-4 |
{% block {}_bottom_ac_a %} |
{}-bottom-a if A,C are visible |
col-12 col-md-6 |
{% block {}_bottom_ac_c %} |
{}-bottom-c if A,C are visible |
col-12 col-md-6 |
{% block {}_bottom_bc_b %} |
{}-bottom-a if B,C are visible |
col-12 col-md-4 |
{% block {}_bottom_bc_c %} |
{}-bottom-c if B,C are visible |
col-12 col-md-8 |
Page templates
pages/italia.html template contains all the Bootstrap Italia grid.
After running python manage.py unicms_collect_templates,
create a uniCMS PageTemplate using italia.html to
apply Bootstrap Italia to your pages.
Block templates
blocks/italia_hero_slider.html
… in progress …
Customization
…in progress…