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:
- LibSass for fast SASS compilation
- Gulp JS and the gulp-sass plugin to compile SASS files
- the official Sass port of Bootstrap
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:
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:
- EditorConfig within
.editorconfig
- ESLint within
.eslintrc.json
- Stylelint within
.stylelintrc.json
Please mind that they are ignored if your editor doesn’t support them.