JSPM – asyncdesign-webui@4.6.4

Package Exports

asyncdesign-webui

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (asyncdesign-webui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Webui

Web design made easy

Webui is a little different to most other CSS frameworks due to an emphasis on flexibility and creativity. Although most frameworks do attempt to provide flexibility, they often enforce a particular approach or style, and come with too many limitations. Webui has been build from the ground up with flexibility as the primary goal - even the components are made that way. Webui is a system that allows you to invent new designs, and provides simple building blocks to construct much larger CSS components. Complex data entry forms can be created in a precise layout using the built-in grid system that doesn't throw any surprises. Add responsive behaviour exactly where you want it, with the flexibility to create fixed non-responsive layouts or layout sections.

Check out the full documentation to learn more about webui

Getting Started

Install the latest release using NPM

npm install asyncdesign-webui

Install the latest release using Bower

bower install asyncdesign-webui

Download the latest release

Extract the CSS and JavaScript files from the dist folder to your project folders.
You will need to include a version of jQuery. Webui has been tested with jQuery 1.7.2 and later. (jQuery 3.0.0 or later recommended).
In your web page add a link to the CSS in the head section of your page and links to the JavaScript files at the bottom of the body section, for example:

<html>
<head>
  <link rel="stylesheet" href="css/webui.min.css"> 
</head>
<body>

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

That's it. You are ready to start developing with Webui.

Be sure to look at the static DEMO.html page at the root of the download, which has many examples and demonstrates a good selection of components.

Creating page layouts

Webui uses a 20 column grid system to create 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:

<div class="container">
  <div class="form-row">
    <div class="form-col-20 text-center respond-md">
      <div class="panel secondary">
        Heading
      </div>
    </div>  
  </div>
  <div class="form-row">
    <div class="form-col-4 respond-md">
      <div class="panel secondary height-xl">
        Navigation
      </div>
    </div>
    <div class="form-col-16 respond-md">
      <div class="panel secondary height-xl">
        Main content
      </div>
    </div>
  </div>
</div>

The respond-md 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 screenshot, 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.

Here is the result of the above code in the browser.

When the screen width is reduced to the medium breakpoint size it would appear as follows.

You may prefer a bootstrap style center layout, and you can easily do that with the code below by using the responsive-gutter-* classes.

<div class="container responsive-gutter-lg">
  <div class="content-row menu-bar-sm dark">
    <div class="form-col-20 form-col-align-lg text-center">
      Menu bar
    </div>
  </div>
  <div class="content-row">	
    <div class="content-col-20 height-xl secondary respond-md">
      <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.

This is how it would look in the browser.

Check out the full documentation to learn more about webui