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/
.