Skip to main content

Template Django conforme a linee guida AGID per l'Universita' della Calabria

Project description

Template Django conforme a linee guida AGID per l'Università della Calabria
---------------------------------------------------------------------------

Template grafico per il framework Python Django, per applicazioni
dell'Univeristà della Calabria, basato sulla libreria Bootstrap Italia
dell'Agenzia per l'Italia Digitale (AGID).

L'app estende [django-bootstrap-italia](https://github.com/francesco-filicetti/django-bootstrap-italia).

![Home](data/gallery/default.png)
_**Frontend**: Schermata di default del template_


Requirements
------------

```
django-bootstrap-italia
libsass
django-compressor
django-sass-processor
```

#### django-sass-processor

Compilazione di SASS 3 (file .scss) per Django.

https://pypi.org/project/django-sass-processor/


Installazione
-------------

```
pip install django-unical-agid-template
```
- In settings.py INSTALLED_APPS inserire *unical_agid_template*.


Utilizzo
--------

```
python manage.py collectstatic
```

- Configurare il file ```base-setup.html``` eseguendo l'overload dei blocchi
principali, al fine di personalizzare le sezioni di interesse;
- Ogni pagina HTML del proprio progetto dovrà estendere ```base-setup.html```
e definire il contenuto del blocco ```{% container %}```. Header e Footer
saranno sempre ereditati da ```base-setup.html```, a meno di variazioni su
singole pagine.


Stile e CSS/SCSS
----------------

Per la personalizzazione dello stile del template (colori, dimensioni, sfondi)
si utilizza SASS 3 (Syntactically Awesome Style Sheets), in modo
da rispettare le caratteristiche responsive ereditate.

Il foglio di stile che ridefinisce l'aspetto del tema di default è
```static/css/unical-style.scss```.

E' sempre possibile integrare fogli di stile o javascript
effettuando l'overload del blocco ```{% extra_head %}```.



Esempio di base-setup.html
--------------------

```
<!-- Extends default Bootstrap Italia template -->
{% extends 'bootstrap-italia-base.html' %}

<!-- From app django-sass-processor -->
{% load sass_tags %}

{% load static %}

<!-- Page Title -->
{% block page_title %}
Università della Calabria
{% endblock page_title %}

<!-- My custom scss sheet -->
{% block extra_head %}
<link rel="stylesheet" href="{% sass_src 'css/unical-style.scss' %}" type="text/css" />
{% endblock extra_head %}

<!-- URL link top left -->
{% block header_slim_org_url %}
https://www.unical.it
{% endblock header_slim_org_url %}

<!-- Name top left -->
{% block header_slim_org_name %}
Università della Calabria
{% endblock header_slim_org_name %}

<!-- Mobile slim_org_name -->
{% block header_slim_mobile_org_name %}
Università della Calabria
{% endblock header_slim_mobile_org_name %}

<!-- Make empty areas -->
{% block header_mobile_arrow %}{% endblock header_mobile_arrow %}
{% block header_mobile_slim_menu %}{% endblock header_mobile_slim_menu %}

<!-- Logo in Header -->
{% block header_center_logo %}
<img class="icon" src="{% static 'images/logo.png' %}" />
{% endblock header_center_logo %}

<!-- Organization name in Header -->
{% block header_center_org_name %}
Università della Calabria
{% endblock header_center_org_name %}

<!-- Organization description in Header -->
{% block header_center_org_subname %}
Il Campus per eccellenza
{% endblock header_center_org_subname %}

<!-- Logo in Footer -->
{% block footer_logo %}
<img class="icon" src="{% static 'images/logo_white.png' %}" />
{% endblock footer_logo %}

<!-- Organization name in Footer -->
{% block footer_org_name %}
Università della Calabria
{% endblock footer_org_name %}

<!-- Organization name in Footer -->
{% block footer_org_subname %}
Il Campus per eccellenza
{% endblock footer_org_subname %}
```

Esempio di pagine figlie (qui index.html)
-----------------------------------------

```
{% extends 'base-setup.html' %}

{% load static %}

{% block container %}

<div class="it-hero-wrapper it-dark it-overlay">
<!-- - img-->
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper">
<img src="{% static 'images/unical_banner.jpg' %}" title="img title" alt="imagealt">
</div>
</div>
</div>
<!-- - texts-->
<div class="container">
<div class="row">
<div class="col-12">
<div class="it-hero-text-wrapper bg-dark">
<span class="it-category">Category</span>
<h1 class="no_toc">Heading lorem ipsum dolor sit amet, consetetur sadipscing.</h1>
<p class="d-none d-lg-block">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
<div class="it-btn-container"><a class="btn btn-sm btn-secondary" href="#">Label button</a></div>
</div>
</div>
</div>
</div>
</div>



<div class="container my-4">
<h1>Lorem Ipsum</h1>
<p>Ab illo tempore, ab est sed immemorabili.<br/>
Ullamco laboris nisi ut aliquid ex ea commodi consequat.<br/>
Quis aute iure reprehenderit in voluptate velit esse.<br/>
Petierunt uti sibi concilium totius Galliae in diem certam indicere.</p>
<p>Pellentesque habitant morbi tristique senectus et netus.</p>

<div class="it-carousel-wrapper it-carousel-landscape-abstract-three-cols">
<div class="it-header-block">
<div class="it-header-block-title">
<h2 class="no_toc">Titolo del Carousel</h2>
</div>
</div>
<div class="it-carousel-all owl-carousel it-card-bg">
<div class="it-single-slide-wrapper">
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<h5 class="card-title">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<svg class="icon">
<use xlink:href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="it-single-slide-wrapper">
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<h5 class="card-title">2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<svg class="icon">
<use xlink:href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="it-single-slide-wrapper">
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<h5 class="card-title">3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<svg class="icon">
<use xlink:href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="it-single-slide-wrapper">
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<h5 class="card-title">4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<svg class="icon">
<use xlink:href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="it-single-slide-wrapper">
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<h5 class="card-title">4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<svg class="icon">
<use xlink:href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="it-single-slide-wrapper">
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<h5 class="card-title">4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<svg class="icon">
<use xlink:href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="it-single-slide-wrapper">
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<h5 class="card-title">4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<svg class="icon">
<use xlink:href="/bootstrap-italia/dist/svg/sprite.svg#it-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

</div>


{% endblock container %}

{% block bottom_scripts %}
<script src="{% static 'js/bootstrap-italia.bundle.min.js' %}"></script>

<!-- Notification per tornare alla pagina principale -->
<div class="notification dismissable with-icon" role="alert" id="notification-esempi" aria-labelledby="notification-esempi-title">
<h5 id="notification-esempi-title">
<svg class="icon">
<use xlink:href="{% static 'images/svg/sprite.svg' %}#it-info-circle"></use>
</svg>Esempio di template vuoto
</h5>
<p>
<a href="{{ site.baseurl }}/docs/esempi/">Torna alla pagina principale degli esempi</a>
</p>
<button type="button" class="btn notification-close">
<svg class="icon">
<use xlink:href="{% static 'images/svg/sprite.svg' %}#it-close"></use>
</svg>
<span class="sr-only">Chiudi notifica: Titolo notification</span>
</button>
</div>

<script>
$(document).ready(function() {
notificationShow('notification-esempi');
});
</script>
{% endblock bottom_scripts %}

```

Project details


Release history Release notifications

This version

0.1

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for django-unical-agid-template, version 0.1
Filename, size & hash File type Python version Upload date
django-unical-agid-template-00.1.tar.gz (518.6 kB) View hashes Source None

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page