Media WebUI

Installation

Simple Method

Download the latest release here.
  • Extract the CSS and JavaScript files from the dist folder to your project folders.
  • WebUI has no dependencies, so you don't need to include jQuery.
  • In your web page, add a link to the CSS in the head section and links to the JavaScript files at the bottom of the body section, for example:
Markup
<html>
<head>
  <link rel="stylesheet" href="css/webui-components-standard.min.css"> 
</head>
<body>

  <script src="js/webui-components.min.js"></script>
</body>
</html>

NPM

This is the recommended way to install WebUI if you are building websites using popular frameworks such as Angular, React, or Vue.

  > npm install asyncdesign-webui

NuGet

If you are using Visual Studio to develop websites, then this is the preferred way to install WebUI.

  > Install-Package asyncdesign-webui

Bower

Alternatively, you can use Bower to install the WebUI packages.

  > bower install asyncdesign-webui
  • That's it. You are ready to start developing with WebUI.
  • Be sure to look at the static DEMO pages at the root of the download, containing many examples that demonstrate a good selection of components.

What's Included

NPM

The NPM package includes the WebUI source files, the minified and development distribution files, and a set of WebUI demo pages.

NuGet

The NuGet package includes only the minified and development distribution files.

Bower

The Bower package includes the WebUI source files, the minified and development distribution files, and a set of WebUI demo pages.

GitHub Download

The GitHub download includes all WebUI files for the framework, docs website, demo pages, and build files.

Components AvailableJavaScript required

The following components are included in WebUI.

  • Alerts
  • Animations
  • Carousel
  • Menus
  • Modals
  • Navbar
  • NavButton
  • Positioning
  • Radial
  • Scrollspy
  • Shapes
  • Tabs
  • Toggle Container
  • Tooltips
  • Upload
  • Validation
  • Zoom

Useage

CSS and JavaScript files

WebUI comes with a range of pre-built CSS and JavaScript files. The following table shows the combinations that can be used and what is included in each.

CSS
JS
Details
webui-basic.min.css
webui.min.js (Optional)
Includes basic styles only. Does not include standard styles, advanced styles or WebUI components.
webui-standard.min.css
webui.min.js (Optional)
Includes basic and standard styles. Does not include advanced styles or WebUI components.
webui-all.min.css
webui.min.js (Optional)
Includes basic, standard, and advanced styles. Does not include WebUI components.
webui-components-basic.min.css
webui-components.min.js (Required)
Includes basic styles only, and WebUI components.
webui-components-standard.min.css
webui-components.min.js (Required)
Includes basic and standard styles, and WebUI components.
webui-components-all.min.css
webui-components.min.js (Required)
Includes basic, standard, and advanced styles, and WebUI components.

JavaScript DOM Ready Event

All WebUI JavaScript should be enclosed in the DOM ready event callback, as shown in the following example.

Use the optional flag set to true to ensure the page is fully loaded and the document.readyState is "complete" before running scripts. By default, the webui.ready event is called when the document DOMContentLoaded event is fired.

DOM Ready Event

NOTE: The webui.ready event does not need to be used if you are using a framework lifecycle mounted / render event.

Script
webui.ready(function() {
  // Call WebUI functions here...
});
webui.ready(function() {
  // Call WebUI functions here...
}, true);

Angular

  • From the command line, navigate to your Angular CLI project folder.
  • Type npm install asyncdesign-webui and wait for the install to finish.
  • In tsconfig.json add "allowJs": true to the "compilerOptions" object.
  • In .angular-cli.json add "../node_modules/asyncdesign-webui/dist/css/webui-standard.min.css" to the styles array.
  • In .angular-cli.json add "../node_modules/asyncdesign-webui/dist/js/webui.min.js" to the scripts array.
  • In typings.d.ts add declare var webui: any
  • In your app.components.ts add import * as webui from '../../node_modules/asyncdesign-webui/dist/js/webui.min.js'; at the top of your file.

React

  • From the command line, navigate to your React project folder.
  • Type npm install asyncdesign-webui and wait for the install to finish.
  • In your React component js file such as App.js add import webui from '../node_modules/asyncdesign-webui/dist/js/webui.min.js'
  • Then add import '../node_modules/asyncdesign-webui/dist/css/webui-standard.min.css'
  • Don't forget to use className="" instead of class="" on your html elements.
  • If you need to use WebUI javascript functions, this should be done in the componentDidMount() lifecycle method.

Vue

  • From the command line, navigate to your Vue CLI project folder.
  • Type npm install asyncdesign-webui and wait for the install to finish.
  • In webpack.base.conf.js under resolve: alias: add 'webui': resolve('node_modules/asyncdesign-webui/dist/js/webui.min.js')
  • In main.js add import webui from 'webui';
  • In main.js add import '../node_modules/asyncdesign-webui/dist/css/webui-standard.min.css';
  • Then finally, add Vue.use(webui) directly below your imports.

Flexbox Layouts

WebUI includes a 20 size flex item system to create flexbox layouts. This operates either vertically or horizontally, depending of the flex direction.

Example
Heading
Main

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Navigation

  • Alerts
  • Carousel
  • Menus

Markup
<div class="container responsive-gutter-sm">
  <div class="flex-row">
    <div class="flex-col">
      <div class="panel background-accent-1-light text-center">
      <b>Heading</b>
      </div>
    </div>  
  </div>
  <div class="flex-row">
    <div class="flex-size-15 flex-respond-bp-2-under">
      <div class="area background-accent-4-light height-full">
        <b>Main</b>
        <p>Pellentesque habitant morbi tristique senectus et netus et 
            malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
            vitae, ultricies eget, tempor sit amet, ante.</p>
      </div>
    </div>
    <div class="flex-size-5 flex-respond-bp-2-under flex-order-first-bp-2-under">
      <div class="area background-accent-2-light height-full">
        <b>Navigation</b>
        <p>
          <ul class="list list-spacing-md">
            <li>Alerts</li>
            <li>Carousel</li>
            <li>Menus</li>			
          </ul>        
        </p>
      </div>
    </div>
  </div>
</div>

It's very easy to create flexbox layouts with WebUI. Just use a flex-row, and add flex-columns and flex items (flex-size-*, flex-auto, flex-initial, etc.) You can also take advantage of the many flexbox responsive utility classes available.

Here are some examples.

Example
Label
Markup
<div class="flex text-sm">
  <div class="flex-items-center default rounded-left-sm pad-left-sm pad-right-sm"><span>Label</span></div>
  <input type="text" class="input-sm flex-auto" />
  <button type="button" class="button-sm button-accent-1 rounded-right-sm">Send</button>
</div>
Example
Header

Content.

Footer
Markup
<div class="flex-col border-sm border-dark rounded-sm width-lg-xl height-xl">
  <header class="accent-2-light rounded-top-sm height-sm pad-sm">Header</header>		
  <p class="flex-auto pad-sm">Content.</p>		
  <footer class="accent-2-light rounded-bottom-sm height-sm pad-sm">Footer</footer>
</div>

For more information on using flexbox see the Flexbox section.

Grid Layouts

WebUI uses a 20 column grid system to create grid layouts. In general, each row will contain from 1 to 20 columns, and each column can contain any other content. Most likely you will be using a shared layout to display common parts of your website. Here is a quick example of a shared layout structure with a container and some rows and columns:

Example
Heading
Navigation
Main content
Markup
<div class="container">
  <div class="form-row">
    <div class="form-col-20 text-center respond-bp-3-under">
      <div class="panel background-accent-1-light">
        Heading
      </div>
    </div>  
  </div>
  <div class="form-row">
    <div class="form-col-4 respond-bp-3-under">
      <div class="panel background-accent-2-light height-xl">
        Navigation
      </div>
    </div>
    <div class="form-col-16 respond-bp-3-under">
      <div class="panel background-accent-4-light height-xl">
        Main content
      </div>
    </div>
  </div>
</div>

The respond-bp-3-under class on the columns will cause the form to re-render for a mobile screen size at the medium breakpoint. You won't normally need the height-xl class as it's just added here to give some height in the browser for the example, but it is a class that is available in WebUI. Then, within each column there is a panel container using the secondary foreground and background theme colors.

You may prefer a Bootstrap style center layout, and you can easily do that with the code below. However, it does not use a fixed width container, but uses a more progressive sizing since a fixed width would not be suitable for very large screens.

Example
Navigation
Page content
Markup
<div class="container responsive-gutter-lg">
  <div class="content-row toolbar-sm dark">
    <div class="form-col-20 form-col-align-lg text-center">
      Navigation
    </div>
  </div>
  <div class="content-row"> 
    <div class="content-col-20 height-xl secondary">
      <div class="area">
        Page content
      </div>
    </div>
  </div>
</div>

The width of the gutters will automatically adjust, reducing towards the smallest breakpoint and increasing towards the largest. At the smallest breakpoint there will be no gutter. Responsive gutters can be used with any container type or on any row type, but should not be used directly on columns, so there is no problem with placing containers inside columns and applying responsive gutters to the containers.

For more information on various types of grids, containers, and responsive gutters, see the Grid system and Containers sections.

Responsive Gutters

Responsive gutters should not be applied directly to columns, but there is no problem with placing containers inside columns and applying responsive gutters to the containers.

Adding Content

The most basic content of any website is the text, and WebUI makes it easy to produce good formatting. Firstly, it's a good idea to add the text class to the body or section element of your page - this will ensure good readability by adjusting the text line height and removing text decoration.

For more information on formatting text see the Typography section.

Similarly, when adding an image the image class is very useful, as it will ensure the image scales with the size of it's parent container element.

See the following example.

Example
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Markup
<div class="container text">
  <div class="table-row">
    <div class="table-col-10">
      <div class="height-full">
        <img src="/webui/assets/images/landscape_blue.jpg" class="image" />
      </div>
    </div>
    <div class="table-col-10">
      <div class="panel">Pellentesque habitant morbi tristique senectus et netus et 
        malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat 
        vitae, ultricies eget, tempor sit amet, ante.
      </div>
    </div>
  </div>
</div>
Responsive Gutters

If you are using table columns as in the above example, it is best to wrap images in a container element with the class height-full. This is because Internet Explorer handles them differently, so adding this wrapper will counter the content stretching effect of the flex item. You do not need to do this if you are using content columns or form columns.

Adding Color

To add a foreground color to any element use the color-* classes.

To add a background color to any element use the background-* classes.

Here are a few more examples.

Example
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Markup
<div class="container">
  <div class="table-row text-bold">
    <div class="table-col-4">
      <div class="panel color-info">Lorem ipsum</div>
    </div>
    <div class="table-col-4">
      <div class="panel background-info-light">Lorem ipsum</div>
    </div>
    <div class="table-col-4">
      <div class="panel accent-2-light">Lorem ipsum</div>
    </div>
    <div class="table-col-4">
      <div class="panel color-hover-danger">Lorem ipsum</div>
    </div>
    <div class="table-col-4">
      <div class="panel background-hover-success-light">Lorem ipsum</div>
    </div>						
  </div>
</div>

Theme colours are a big part of WebUI, making it very easy to add colour to almost any container, column, or control. There is a lot more than just applying a colour - you can add background, foreground, border, and hover effects too. For more information on using theme colours see the Colours section.

Accessibility

WebUI provides the accessibility class to increase the visibility of any form control. Depending on the type of control used, this behaviour relates to control focus events.

Adding the accessibility class globally will cause all focusable controls to show a dark focus ring when tabbed to. If more control over focus ring colors is required, then the class can be added to individual elements in combination with the control-group-* classes.

Example
First name
This demonstrates an Accessible Hyperlink, improving visibility when focused.
First name
This demonstrates an Accessible Hyperlink, improving visibility when focused.
Markup
<div class="area accessibility">
  <div class="form-row control-group">
    <div class="table-col control-label-sm">
      First name
    </div>
    <div class="table-col">
      <input name="firstName" type="text" class="input-sm width-md-lg rounded-sm" />
    </div>
  </div>
  <div class="form-row">
    <div class="form-col">
      This demonstrates an <a href="#0" class="color-info text-underline">Accessible Hyperlink</a>, improving visibility when focused.
    </div>
  </div>
</div>
<div class="area control-group-success">
  <div class="form-row control-group">
    <div class="table-col control-label-sm">
      First name
    </div>
    <div class="table-col">
      <input name="firstName" type="text" class="input-sm width-md-lg rounded-sm accessibility" />
    </div>
  </div>
  <div class="form-row">
    <div class="form-col">
      This demonstrates an <a href="#0" class="color-info text-underline accessibility">Accessible Hyperlink</a>, improving visibility when focused.
    </div>
  </div>
</div>

Classes

Class
Description
accessibility
Changes the appearance of controls when receiving focus.
screen-reader
Causes an element to be hidden, but still available to assistive technologies.

ARIA Attributes

WebUI controls make use of ARIA accessibility attributes where it would be difficult for a website author to add them. However, most of these attributes should be added to elements during development of a website. See MDN web docs - ARIA for more information.

Keyboard Navigation

All WebUI components such as menus, tabs, and modals can be activated using the default browser shortcuts. For example: Custom checkboxes and radio buttons can be tabbed to and selected / deselected using the spacebar. The tabs component allows navigation between tabs using the tab key and selected using the enter key. A lot depends on using appropriate controls, and to make the menu component accessible you need to use the activator-focus class on menu items.

Color Contrast

The default WebUI theme uses a subset of the Material Design color palette and provides good contrast when using combined color classes. As mentioned above, using the accessibility class on controls such as buttons, further increases the contrast and visibility for partial sightedness.