Valitsusportaal Front-end Framework
Getting started
- Download and install Node.js, which we use to manage our dependencies.
- Run
npm installto install all the dependencies. - Run
npm run startwithin the project directory to start the dev server with automatic browser refresh
Styles
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
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.
Scripts
JavaScript is compiled with webpack from src/js/app.js. Imports all the neccessary dependencies for
Bootstrap and other components.
Templates
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.
src/templates/kit.hbs
Selection of Bootstrap and custom components on one page for easy reference.
