What’s inside¶
Note
This Boilerplate includes and configures a number of components.
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
.
Bootstrap¶
The full Bootstrap library is imported via the Sass component and the JavaScript component.
Note
Aldryn Bootstrap 3 uses a 24 column based grid setting instead of the default 12. You can change this setting in private/sass/settings/_bootstrap.scss
.
The Glyhpicon icon set has been disabled in favour of the Font Awesome icon set.
Font Awesome¶
The Font Awesome library offers a larger and better variety of icons than the Bootstrap defaults. Additional utility classes are also available.
The library
is similarly integrated as bootstrap-sass within the libs
folder.
JavaScript¶
We are implementing the latest 2.x.x versions of jQuery as they are released. In addition we encourage the use of class.js, a simple library that helps out with the modular pattern in JavaScript.
In addition several commonly-used shims are available to you including:
Addons¶
We are currently implementing the select2.js bootstrap version as default addon.
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
- CSSComb within
.csscomb.json
- ESLint within
.eslintrc.json
- SCSS-Lint within
scss-lint.json
Please mind that they are ignored if your editor doesn’t support them.