IOUI - IdrottOnline User Interface
The front-end framework for IdrottOnline built on Bootstrap 2.3.0
Latest version: 1 (0.6.1.0 Beta)
Latest updatesFind 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.
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|
|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.
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.
The following docs have been adapted from Bootstrap, and customized for IOUI.
Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.
Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.
List of components
- Button groups
- Button dropdowns
- Navigational tabs, pills, and lists
- Page headers and hero unit
- Progress bars
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.
The iconic font designed for use with Bootstrap.Learn more Visit official web site
Datepicker for Bootstrap
Add datepicker picker to field or to any other element.Learn more Visit official web site
A very cool widget to easily select a time for a text input using your mouse or arrow keys.Learn more Visit official web site
Notifications for Bootstrap
Fancy growl-like notifications to alert your users.Learn more Visit official web site
A plugin to provide an intuitive user interface for using select inputs with the multiple attribute present.Learn more Visit official web site
Select2 is a replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent Chosen library.Learn more Visit official web site
Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.Learn more Visit official web site
Date Range Picker for Twitter Bootstrap
This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates.Learn more Visit official web site
Nice alert box replacements.Learn more Visit official web site
Fast text replacement with canvas and VML - no Flash or images required.Visit official web site
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
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
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.
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|
|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.|