Skip to content

Latest commit

 

History

History
61 lines (42 loc) · 2.51 KB

README.md

File metadata and controls

61 lines (42 loc) · 2.51 KB

Toucan - UI

Bootstrap

Only a small amount of customization has been done to the default bootstrap theme. Both scripts and styles are referenced from local /node_modules folder during the build process.

For the predefined dev & production builds, webpack is configured to extract css into external files

Webpack

There are multiple areas defined in the client Vue.js application ...

The motive behind this decision was to

  • optimize end user experience (by ensuring only required resources are downloaded)
  • enable switching between layouts in different areas of a site
  • establish a common set of components for re-use

To support multiple entry points as described above, the webpack build process is configured to emit multiple files

  • vendor.js - contains core third-party dependencies
  • common.js - contains code used by all areas/subsites
  • common.css - contains code used by all areas/subsites
  • [area].js - contains area-specific code and resources
  • [area].css - contains area-specific code and resources

Html

Default html files for each area are automatically injected with links to any asset bundles produced by webpack.

Supported Browsers

TypeScript source files are transpiled by babel-loader, and try to keep it fairly fresh - target last two versions is the default specified in babel.rc configuration

Polyfills are also provided by the babel loader if native browser support is inadequate

Project Structure

  • assets - static resources for inclusion in client bundles
  • common - utility classes
  • components - store global components in this folder
  • locales - language resource files
  • model - models used by multiple areas
  • routes - vue.js router navigation guards
  • services - helper/domain classes
  • store - vuex store used by global components
  • styles - global SASS styles
  • validation - shared validations rules

Other components will be found in specific sub-areas (such as 'root' or 'admin'). These areas have a similar structure to the project root, but at minimum will contain

  • layout - contains any custom layouts
  • navigation - navbar or menu components for use by layouts
  • routes - route configuration, and route names
  • store - a custom vuex store that extends the default vuex store
  • [area].ts - code to bootstrap the entry point
  • [area].html - entry point page
  • [area].scss - area SASS styles