Valitsusportaal Front-end Framework
- Download and install Node.js, which we use to manage our dependencies.
npm installto install all the dependencies.
npm run startwithin the project directory to start the dev server with automatic browser refresh
VP front-end uses Bootstrap 4 as base framework.
All the CSS is compiled from
src/scss/app.scss. There we do the imports for Bootstrap core from
node_modules which will stay intact, overrides, extended/modified and custom components.
Variables overrides are in
src/styles/vp/_variables.scss. It is the full copy of Bootstrap default
_variables.scss, with modification for VP. Most of the variables that are not modified have the
!default flag intact. Because the file is line-by-line full duplicate of the original BS one then
easily diffable for changes and updates.
Bootstrap is installed as a dependency in
package.json. Used parts of Bootstrap are imported in
Modifed/extended Bootstrap components
Modification for Bootstrap core files are written in
src/styles/vp/bootstrap-extend/ directory with
same filename and structure as Bootstrap for easy reference.
Custom VP components
All the custom components reside in
Custom components and modifiers use
vp-* prefix for class and filenames for preventing style
and for explicitness in the codebase.
src/js/app.js. Imports all the neccessary dependencies for
Bootstrap and other components.
Project uses Handlebars as a templating language for easier development. Webpack compiles the files from
src/templates/. The templates can use partials from
Build folder for compiled code. Do not put it in version control.
Selection of Bootstrap and custom components on one page for easy reference.