General information

This section briefly describes the project structure and framework that was used to built this project.

CSS

CSS code is generated by SASS, we use the .scss syntax. We prefer a component based approach using the BEM methodology: https://en.bem.info/methodology/key-concepts/.

In addition to BEM we limit the scope of components to the “border-box” preventing components from defining a margin on itself. Parent components control the margins of its children.

The view is a component without parents and should be directly linked to a template. It’s role is to “orchestrate” child components.

To compile SASS to CSS run:

$ gulp sass

To create a new component run

$ gulp create-component --name my-compoment-name --scss

To create a new view run

$ gulp create-view --name my-compoment-name --scss

JavaScript

JavaScript code is written in ECMAScript 2015 (ES6) and transpiled using webpack and babel. Therefore, all non-compiled code is placed outside the static directory into src/bptl/js/.

We write modules for every component/view matching the BEM structure provides by SASS.

Compiling ES6 to ES5:

$ gulp js

To create a new component run

$ gulp create-component --name my-compoment-name --js

To create a new view run

$ gulp create-view --name my-compoment-name --js

All third party libraries should be installed using npm:

$ npm install --save <package>

or:

$ npn install --save-dev <package>

After installing libraries can be included using ES6 imports:

import <package> from '<package>';

Exceptions

When you need to override third-party JavaScript you still need to manually place files into src/bptl/static/.