Valitsusportaal Front-end Framework

Getting started

  1. Download and install Node.js, which we use to manage our dependencies.
  2. Run npm install to install all the dependencies.
  3. Run npm run start within 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 its easily diffable for changes and updates.

Bootstrap core

Bootstrap is installed as a dependency in package.json. Used parts of Bootstrap are imported in src/styles/bootstrap/_bootstrap.scss.

Modifed/extended Bootstrap components

Modification for Bootstrap core files are written in src/styles/vp/bootstrap-extend/ directory with the same filename and structure as Bootstrap for easy reference.

Custom VP components

All the custom components reside in src/styles/vp/. Custom components and modifiers use vp-* prefix for class and filenames for preventing style clashes and for explicitness in the codebase.


JavaScript is compiled with webpack from 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 src/templates/partials.

dist folder

Build folder for compiled code. Do not put it in version control.


Selection of Bootstrap and custom components on one page for easy reference.