OCUI v0.1.2 UI Framework Guidelines

OpusCapita uses an extended version of Twitter Bootstrap 3.3 for web-based HTML5 user interfaces. This guide describes all Bootstrap components, OCUI extensions, and their correct, standardized usage. It also contains a large number of HTML templates for reference and UI testing. OCUI is fully responsive, supporting large to extra small screens, even if not all implemented views take advantage of Bootstrap's responsive mechanics.

Form-Driven UI

OCUI covers the needs of OpusCapita HTML5-based applications today. Almost all functionality is delivered with the CRUD-paradigm in mind. Applications are structured as a feature set, each feature including a way to access it's relevant objects, access meaning basic and specific CRUD functionality. That results in form driven user interfaces, with search, result, filter, select and finally CRUD workflow within any given function. Cross-functional workflows are realized using wizards or, more commonly, with cross links displayed as primary or secondary form-submit options, wich act as calls-to-action on a given view.

Strict Component Set

OCUI is a strict component set, maintained by a conservative authority within OpusCapita. This is highly relevant for change and add requests regarding components and functionality. It is prudent to weigh the pain of expanding the component set heavier than the gain of new features.

Updating and Extending the Component Set

Before accepting a new component, qualify the request by the following checks:

  1. Is there ANY way to get to a functionally acceptable solution using the current component set?
  2. Can we deliver a comparable result with the current component set?
  3. Will the requested component be used in more than one or two views?
  4. Does it replace currently used components, and requires widespread updates to views, in order to guarantee UI consistency?
  5. Does the proposed component fit within the design and coding rules and practices of the component set?

Then, weigh the results against the potential gain. Most component changes are applied within bi-annual major UI-updates, that are necessitated by the changed functionality and featureset of the common browsers and platforms.

Updating the Bootstrap Core

UI Frameworks don't require frequent updates. They don't contain security sensitive code. Browser requirements and quirks change at a glacial and very diffuse pace. It is important to note that OCUI cannot automatically update the contained core Bootstrap. However, it does not need to. Please always weight the gain and the cost of updating against each other.

Advantages of a Bootstrap Based UI Framework

  • Standardized UI components
  • Responsive webdesign out of the box
  • Solid, widely supported CSS
  • Semantically correct markup
  • Consistent code, meaningful UI
  • Rapid prototyping with complete HTML mockups
  • High development speed
  • Cross browser tested standard
  • LESS stylesheets with centralized layout variables for easy customizing
  • A cornucopia of plugins and extensions
  • Awesome support

Advantages of ReactJS

  • Readable HTML-like syntax
  • Comprehensible performance
  • Renders on client and server side
  • Components are reusable
  • strongly enforcing UI
  • Use any backend/ framework you'd like
  • Easy to test
  • Optimizes browser performance
  • Relies on a Virtual DOM
  • Out-of-the-box developer tools

Advantages of React-Bootstrap

  • React can be used with Bootstrap's JS
  • Creates consistency in UI
  • Consists of almost 50 basic components
  • Doesn't rely on a specific version
  • Reduces amount of boilerplate code

Plugins

jQuery

  • jQuery UI
  • jqGrid
  • jQuery-File-Upload https://github.com/blueimp/jQuery-File-Upload
  • Is there a Plug-In for DnD?
  • jQuery.tipsy (Tooltip.js) http://onehackoranother.com/projects/jquery/tipsy/

Twitter Bootstrap

CSS

  • Normalize.css (part of Bootstrap)

JS Plug-Ins, which are part of Bootstrap

  • ScrollSpy.js
  • Transition.js
  • Button.js
  • Collapse.js
  • Affix.js

Problem Areas

  • Tables are not responsive. This can be solved with JavaScript, but has not been developed yet. No usable plugins exist.
  • LESS Variable propagation is sub-optimal. This is a fix-job.
  • Print layout is non-existent. This is a fix-job.
  • Updating major versions of bootstrap can not be automated, and requires a FULL unit test, and potentially costly fixes. There is no good solution for this, and it is considered cost-of-business.

Table of Contents

  • Layout
    Bootstrap grid system, responsive layout mechanics.
  • Navigation
    Nav types and usage
  • Forms
    The complete guide to OCUI forms
  • List Groups
    Displaying hierarchical data
  • Tables
    How to render tabular data
  • Icons
    Embellishments, visual hooks and abbreviations
  • ReactJS
    A short introduction to ReactJS
  • React-Bootstrap
    Which react components to use as standard

Disclaimer

This guide is not even close to being finished, please refer to Martin Hallmann or Charleen Germakowsky for all inquiries and feedback. Thank you.