Boilerplates#

Boilerplates#

A Boilerplate is a convenient way to define components to be used by an application, so that new applications can be created quickly with the same tooling set up as soon as the application is created.

A Boilerplate can be used to define any application-level components and processes that are to be re-used.

For example, a Boilerplate can define how the Django templates are structured and make opinionated choices about what JavaScript frameworks and CSS tools are used.

When an application is created, it will always specify a Boilerplate - even if it’s a pre-defined Blank Boilerplate that leaves all these choices up to you.

Various Boilerplates are provided as defaults. Some provide only basic HTML and CSS, whereas more sophisticated ones include advanced frontend tooling: NPM, webpack, Sass and other components.

Divio’s built-in Boilerplates#

This list represents some key built-in Boilerplates.

Blank Boilerplate#

The Blank Boilerplate installs no components. It will be up to you to install anything you need, including templates for your site.

HTML5 Boilerplate#

Our HTML5 Boilerplate implements the HTML5 Boilerplate package. The HTML5 Boilerplate package is a popular starter set of starter files, which includes a generic HTML template, CSS to normalise and set some standard classes, and some JavaScript including jQuery.

Our implementation of it is very standard, and simply adapts it for use in django CMS applications.

Bootstrap and Foundation Boilerplates#

Our Bootstrap and Foundation Boilerplates implement these two popular frontend frameworks.

They are both fully-featured frameworks that include opinionated CSS and JavaScript for your own use, and numerous built-in widgets and standardised web components.

Sass Boilerplate#

Our Sass Boilerplate introduces compiled components. This is a dynamic Boilerplate, unlike those above, which is to say that it compiles its own materials at runtime (the static Boilerplates by contrast simply use or serve the materials they ship with).

The Sass Boilerplate uses the HTML5 Boilerplate package as its basis. It uses:

  • Gulp to run the compilation

  • npm as a package manager

  • Node as a runtime environment.

The advantage of using a dynamic Boilerplate with compiled components is that it permits you to build a customised frontend, shorn of items your application does not require. Compiled components can also be heavily compressed and optimised, while the source files you work on can remain readable and comprehensive.

Webpack Boilerplate#

The Webpack Boilerplate implements the Bootstrap framework as a fully-compiled frontend set-up. It uses:

  • Gulp to run the compilation

  • Webpack to bundle all the modules

  • npm as a package manager

  • Node as a runtime environment.