IOUI - Idrott­Online User Interface

The front-end framework for IdrottOnline built on Bootstrap 2.3.0

Latest version: 1 (0.6.1.0 Beta)

Latest updates

Find out about the latest fixes and answers to common questions in the IOUI wiki

What is IOUI?

IOUI is designed to help front-end development for IdrottOnline. Built on the popular Bootstrap framework, is designed to significantly simplify development and provide a unified look for all IdrottOnline applications.

And since IOUI is hosted on a CDN, it is easy to configure as well as improving the end-user experience, as well as making all applications load faster as they all share the same resources.

Supported browsers

IOUI officially supports and is tested with the following browsers:

Browser Version Tested platform / OS
Chrome Latest (24) (automatically updated) Windows / Mac OSX
Firefox Latest (18) (automatically updated) Windows / Mac OSX
Safari 6.0 Mac OSX
Internet Explorer 8 / 9 / 10 Windows
Android Browser 2.3+ Google Nexus S, Samsung Galaxy III and others
iOS Mobile Safari 4.3+ Apple iPhone, iPad and iPod Touch
Windows Phone 7.5 / 7.8 / 8.0 Nokia 700, Nokia 920, Nokia Lumia 822, HTC 8X and others

The general policy for desktop browsers, with the exeception Internet Explorer, is to support the current and previous major releases of Chrome, Firefox and Safari on a rolling basis. Each time a new version is released, we begin supporting that version and stop supporting the third most recent version.

What's included?

Everything you find in Bootstrap is included but tested and adapted for IdrottOnline. The a number of selected extra components as well as som optional packages, tested and adapted to fit the unified look.

Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things.

Docs sections

The following docs have been adapted from Bootstrap, and customized for IOUI.

Scaffolding

Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

Base CSS

Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.

Components

Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

JavaScript plugins

Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.

List of components

Together, the Components and JavaScript plugins sections provide the following interface elements:

  • Button groups
  • Button dropdowns
  • Navigational tabs, pills, and lists
  • Navbar
  • Labels
  • Badges
  • Page headers and hero unit
  • Thumbnails
  • Alerts
  • Progress bars
  • Modals
  • Dropdowns
  • Tooltips
  • Popovers
  • Accordion
  • Carousel
  • Typeahead

Extras

A number of popular third-party, Bootstrap-styled UI componenents have also been included to allowed to be shared among IdrottOnline applications. These plugins are always included and ready to use from start.

Support libraries

Besides jQuery and Bootstrap itself, IOUI also include a few useful, non-UI focued JavaScript libraries ready to use in your applications.

  • jQuery URL Parser

    An utility to parse urls and provide easy access to their attributes (such as the protocol, host, port etc), path segments, querystring parameters, fragment parameters and more.

    Visit official web site

  • Datejs

    Datejs is an open-source JavaScript Date Library.

    Visit official web site

Optional bundles

IOUI also includes some optional UI libraries, all styled, tested and ready if you need them in your application.

Visit the CDN section for more instructions on how to include these.

  • Kendo UI (Web & DataWiz)

    Kendo UI is jQuery-based framework for rich UI, build desktop and mobile applications for any browser.

    Learn more

  • Fuel UX

    Fuel UX extends Twitter Bootstrap with additional lightweight JavaScript controls.

    Learn more

  • jQuery Validate with support for Bootstrap+ASP.NET

    Simplify your form validation.

    Learn more

Even more components

Depnding on your application requirements, there are a number of Bootstrap-styled components ready for you to include on your own. Here is a good list to get you started.

Visit the big badass list

Feature matrix

As IOUI contains a number of third-party frameworks, the included components may sometimes be overlapping. Depending on your needs for you applicaiton, use the following table to find out which component to use.

You need Use Do not use
Buttons Bootstrap's buttons Kendos buttons
Text input elements Bootstrap's input elements Kendos input elements
Checkboxes and radiobuttons Native checkboxes and radiobuttons Kendos elements or FuelUX elements
An advanced Grid with sorting, editing and filtering capabilities Kendo Grid FuelUX DataGrid

Changelog

Version Key changes
0.6.1 - Maintenance release
- Added new option for disabling the IOUI topbar
- Added the Date Range extra plugin
- Minor graphical and structual changes
0.6 - Upgrade to Bootstrap 2.3.0. Change log
- Kendo Responsive Grid sample with code
- Added most of the original sample layouts with some updates
- Upgrade of all Bootstrap Extras to their latest versions
- Added Bootbox for nice alerts. See Extras for more info.
- Added iosOverlay with spin.js for loading indicators and other notifications. See Extras for more info.
- MVC helpers for Datepicker and Timepicker
- Updated the docs on how to configure UICulture and prevent IE compability mode setting
- Minor fixes for keeping the menu open and not behaving like an according setting the correct Kendo culture
0.5 - Tons of design and upgrades.
0.4 - Losts of design and upgrades.
0.3 - Added various pickers.
- Added modals
0.2 - Updated to latest version of Unicorn.
- Added more IO samples
- Updated templates, and ensure they work when using minified CSS
0.0.1 - Updated docs on how to use templates and where to find the source.
0.1 - Initial release.