Group 37
Overview Requirements Development Prototype Testing Logs Meta
Overview:
Overview
Our Project
Version Control
Requirements:
Requirements
MoSCoW
Use Cases
Development:
Background Research
Technical Research
Architecture Research
Developing Solution
User Interface
Prototype:
Design Guide
Form Renderer
Dashboard
Visual Report
Testing
Logs:
Design Guide
Form Renderer
Dashboard
Visual Report
Meta:
Project Management
Bi-weekly Reports
Plans for Term 2
Updated: 22/11/2016

Technical Research: Bootstrap

Bootstrap was developed by Mark Otto and Jacob Thornton as a framework to encourage consistency across internal tools at Twitter. [1] It has since evolved into a widely used front-end framework for designing websites and web-apps. Having defined the new phrase - “bootstrap it” in the web development world, bootstrap not only offers automatic scaling across multiple platforms but also a plethora of components at the user’s disposal.


Key Features

  • Features CSS preprocessors, Less and Sass within its source code
  • Built in vanilla CSS
  • Automatically scales the product website to custom window sizes for different devices
  • Custom HTML and CSS components
  • Extensive documentation
  • jQuery plugins
    • [2]


    Usage

    Bootstrap can be used as the front-end framework for the design guide. This is intuitive since it is a standardised platform where styles and components such as layout, panels and buttons are ready to be plugged in. This allows for a fast setup and maintenance which enables us to focus more on the contents of the design guide. It will also be inherently compatible across all platforms and devices.


    Advantages

  • Open source
  • Excellent documentation and support community
  • Wide selection of styles and components are available. For example:
  • Templates
  • Themes
  • Plugins
  • Buttons
  • Layouts
  • Lightweight
  • Responsive scaling


    • Disadvantages

  • May have an overabundance of HTML output that is not easily readable. This may become an inconvenience for scalability
  • May look similar to other sites without sufficient customisation as Bootstrap is widely used
    • [3]


    Alternatives

    Some competitors to bootstrap are listed below, some of which will be explored in other research sections.

  • Pure.CSS
  • Material UI
  • Base
  • INK

    • However the main decision here is whether to choose bootstrap V3 or V4. V4 comes with some new features while scrapping some others. The main differences are:
  • Base CSS code is Sass in V4 as opposed to LESS in V3
  • Wells, thumbnails and panels have been replaced by cards
  • IE8 is no longer supported
  • Improved Javascript plugins
  • Improved responsive typography

    • Bootstrap V4 comes with many improvements, nevertheless it is still in alpha testing stage. We have to balance the need for these additional features versus the potential instability of the new Version 4. [4]


    References

    [1] GitHub. (2016). twbs/bootstrap. [online] Available at: https://github.com/twbs/bootstrap [Accessed 21 Nov. 2016].
    [2] Mark Otto, a. (2016). Bootstrap · The world's most popular mobile-first and responsive front-end framework.. [online] Getbootstrap.com. Available at: http://getbootstrap.com/ [Accessed 21 Nov. 2016].
    [3] Digital Shore. (2016). Unsure About Bootstrap? Read these Pro's & Con's. [online] Available at: http://digitalshore.io/bootstrap-pros-cons/ [Accessed 21 Nov. 2016].
    [4] Mark Otto, a. (2016). Bootstrap. [online] Blog.getbootstrap.com. Available at: http://blog.getbootstrap.com/ [Accessed 21 Nov. 2016].