#################
Getting started
#################
.. index::
single: Installation
**************
Installation
**************
Install package
===============
For a manual install run ``pip install djangocms-frontend``
Alternatively, add the following line to your project's
``requirements.txt``:
.. code::
djangocms-frontend
Make apps available to your django project
==========================================
Add the following entries to your ``INSTALLED_APPS``:
.. code::
'djangocms_icon',
'djangocms_frontend',
'djangocms_frontend.contrib.accordion',
'djangocms_frontend.contrib.alert',
'djangocms_frontend.contrib.badge',
'djangocms_frontend.contrib.card',
'djangocms_frontend.contrib.carousel',
'djangocms_frontend.contrib.collapse',
'djangocms_frontend.contrib.content',
'djangocms_frontend.contrib.grid',
'djangocms_frontend.contrib.image',
'djangocms_frontend.contrib.jumbotron',
'djangocms_frontend.contrib.link',
'djangocms_frontend.contrib.listgroup',
'djangocms_frontend.contrib.media',
'djangocms_frontend.contrib.tabs',
'djangocms_frontend.contrib.utilities',
.. note :: Using Django 2.2 to 3.1
You will need to add ``django-jsonfield-backport`` to your
``requirements.txt`` and add ``"django_jsonfield_backport"`` to your
``INSTALLED_APPS``.
Create necessary database table
===============================
Finally, run ``python manage.py migrate``
**djangocms-frontend** now is ready for use!
Adding styles and javascript manually
=====================================
django CMS frontend **does not** automatically add the styles or
javascript files to your frontend, these need to be added at your
discretion.
Out of the box, **djangocms-frontend** is configured to work with
`Bootstrap 5 `_. Styles should be added to
your ```` section of your project template (often called
``base.html``). Javascript should be added at the end of the ````
section or your template. For illustration and an easier start,
**djangocms-frontend** comes with example templates.
.. index::
single: base.html
Using example templates of djangocms-frontend
=============================================
**djangocms-frontend** comes with example templates. The simplest way to
activate `Bootstrap 5 `_ is by using the
following base template (``base.html``)
.. code::
{% extends "bootstrap5/base.html" %}
{% block brand %}My Site{% endblock %}
.. note::
We recommend developing your own ``base.html`` for your projects. The
example templates load CSS and JS files from a CDN. Good reasons to do so
are
* **djangocms-frontend** does not contain CSS or JS files from Bootstrap
or any other framework for that matter. The example tempaltes load
CSS and JS from a CDN.
* It is considered safer to host CSS and JS files yourself. Otherwise you
do not have control over the CSS and/or JS that is delivered.
* It is a common practice to customize at least the CSS part, e.g. with
brand colors.
The example template is customizable by a set of template blocks:
``{% block title %}``
Renders the page title. Defaults to ``{% page_attribute "page_title" %}``
``{% block content %}``
Here goes the main content of the page. The default setup is a ````
with a placeholder called "Page Content" and a ``