Frameworks Bootstrap Material Design Lite
Strength
  • Components include panel, popover, breadcrumb, thumbnails, inline alerts and wells.
  • A lot of extensions and third-party widgets are available for Bootstrap
  • Supports all the major browsers
  • Components include cards, mega footer, slider inputs and toggle switches
  • No external dependencies
  • Smaller file size
Weakness
  • Follows stricter pattern of Material Design Concept
  • Customisation might lead to a lost of the concept of Material Design
  • Less number of extensions available

We shortlisted Bootstrap and Material Design Lite for the front-end framework. We decided to use the Bootstrap framework, originally developed by Twitter, because Bootstrap allow a greater scale of customisation and is a mature framework that has extensive support available. With detailed documentation, it is easy to copy paste from the examples and get a usable result fast for Bootstrap.

Boostrap is an UI framework which provide a set of UI components for modern web application with the purpose of making it easy to build responsive websites. We can intergrate this framework into our appliation by adding its custom CSS and Javascript files into our application directory. This CSS and Javascript will be applied to the HTML elements with the pre-defined classes to acheive a standardised modern visual appearance.