What’s inside

Note

This Boilerplate includes and configures a number of components.

Webpack & Babel

For JavaScript bundling and preprocessing we use Webpack, Babel with ES2015 preset and some essential plugins for smaller builds and easier testing.

We use Gulp as a wrapper around Webpack for consistency.

Sass

For CSS pre-processing, we use Sass. In particular, we use:

All styles should be created in /private/sass, and will be compiled to /static/css.

Note

We do not use Webpack capabilities for bundling CSS by default, but it is not forbidden.

Bootstrap

The full Bootstrap library is imported via the Sass component and the JavaScript component.

Note

django CMS Boilerplate Webpack uses the default 12 column based grid setting. You can change this setting in private/sass/settings/_bootstrap.scss.

The Glyhpicon icon set has been disabled in favour of the custom icon set that can be built with gulp icons.

JavaScript

We are implementing the latest 3.x.x versions of jQuery as they are released.

In addition several commonly-used shims are available to you including:

Gulp

We use Gulp to manage our frontend workflow.

Template Language

As this is a django CMS based boilerplate, naturally we are using the Django template language.

In order to implements assets efficiently, django-sekizai and aldryn-snake are implemented within the base_root.html template. This gives you the {% addtoblock "js" %}{% endaddtoblock %} and {% addtoblock "css" %}{% endaddtoblock %} template tags in addition to the django defaults.

Example

{% load sekizai_tags %}
{% addtoblock "css" %}<link href="{% static 'css/theme.css' %}" rel="stylesheet">{% endaddtoblock %}
{% addtoblock "js" %}<script src="{% static 'libs/jquery.min.js' %}"></script>{% endaddtoblock %}

Configuration

There are several configuration files included such as:

Please mind that they are ignored if your editor doesn’t support them.