asyncdesign-webui 11.5.0 

dotnet add package asyncdesign-webui --version 11.5.0
NuGet\Install-Package asyncdesign-webui -Version 11.5.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="asyncdesign-webui" Version="11.5.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add asyncdesign-webui --version 11.5.0
#r "nuget: asyncdesign-webui, 11.5.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install asyncdesign-webui as a Cake Addin
#addin nuget:?package=asyncdesign-webui&version=11.5.0

// Install asyncdesign-webui as a Cake Tool
#tool nuget:?package=asyncdesign-webui&version=11.5.0

WebUI

The Swiss Army Knife of CSS frameworks

LICENSE Dependencies Webpack SASS

npm version jsDelivr NuGet version Nuget



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

Installation

Simple Method
  • Download the latest release
  • 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 of your page and links to the JavaScript files at the bottom of the body section, for example:
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title></title>

    <link rel="stylesheet" href="lib/webui/dist/css/webui-components-standard.css">

  </head>
  
  <body>

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

If you prefer not to download the full package and just want to try it out, then this can be done by linking to the required files on a CDN as follows.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title></title> 

    <link rel="stylesheet" href="https://unpkg.com/asyncdesign-webui@latest/dist/css/webui-standard.min.css">
  </head>
  
  <body>

    <script src="https://unpkg.com/asyncdesign-webui@latest/dist/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

Yarn

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

yarn add asyncdesign-webui

NuGet

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

Install-Package asyncdesign-webui

LibMan

If you are using Visual Studio 2019 or later, then the built-in "LibMan" utility is the best way to manage client-side libraries.

LibMan documentation

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 and the minified and development distribution files.

Yarn

Yarn installs the same package as with NPM, but may be better suited to certain projects or environments.

NuGet

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

GitHub Download

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

Components Available
  • Alerts
  • Animation
  • Carousel
  • Focus Trap
  • Menus
  • Modals
  • Navbar
  • NavButton
  • NavIndicator
  • Radial
  • Scrollspy
  • Shapes
  • Tabs
  • Toast 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 Includes
webui-all.min.css webui.min.js (Optional) Includes everything, with advanced styles, the layout grid system, and flexbox. Does not include any components.
webui-standard.min.css webui.min.js (Optional) Includes standard styles, the layout grid system, and flexbox. Does not include any components.
webui-basic.min.css webui.min.js (Optional) Includes only basic styles. Does not include any components.
webui-components-all.min.css webui-components.min.js Includes everything, with advanced styles, the layout grid system, flexbox, and all components.
webui-components-standard.min.css webui-components.min.js Includes standard styles, the layout grid system, flexbox, and all components.
webui-components-basic.min.css webui-components.min.js Includes only basic styles, and all components.
Styles Without JavaScript

WebUI can be used without javascript files if you only need the CSS, so a set of style only files are provided. The filenames for these do not contain the word "components" as in the above table. So, for the first 3 CSS files listed in the above table, .js files are optional.

JavaScript Document Load Event

All WebUI JavaScript should be enclosed in the document loaded event callback, as shown in the following examples. Use the second example to wait for all window content to be completed and the document.readyState === "complete" before running scripts. The first example only waits for the DOMContentLoaded event.

NOTE: These events do not need to be used if you are using a framework lifecycle mounted or render event.

webui.ready( () => {
  // Call WebUI functions here...
});

webui.ready( () => {
  // 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-components-standard.min.css" to the styles array.
  • In .angular-cli.json add "../node_modules/asyncdesign-webui/dist/js/webui-components.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-components.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-components.min.js'
  • Then add import '../node_modules/asyncdesign-webui/dist/css/webui-components-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-components.min.js')
  • In main.js add import webui from 'webui';
  • In main.js add import '../node_modules/asyncdesign-webui/dist/css/webui-components-standard.min.css';
  • Then finally, add Vue.use(webui) directly below your imports.

Check out the full documentation to learn more about WebUI

There are no supported framework assets in this package.

Learn more about Target Frameworks and .NET Standard.

This package has no dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
11.5.0 125 2/29/2024
11.4.2 206 12/24/2023
11.4.1 131 12/23/2023
11.4.0 120 12/20/2023
11.3.0 416 8/28/2022
11.2.0 400 8/25/2022
11.1.0 382 8/24/2022
11.0.0 399 8/15/2022
10.2.2 374 8/25/2022
10.2.1 408 8/22/2022
10.2.0 393 8/22/2022
10.1.2 371 4/11/2021
10.1.1 460 9/30/2020
10.1.0 457 9/1/2020
10.0.1 477 5/17/2020
10.0.0 470 4/25/2020
8.4.1 680 4/7/2019
8.4.0 615 4/5/2019
8.3.0 597 3/10/2019
8.2.1 790 2/19/2019
8.2.0 721 2/3/2019
8.1.1 791 11/3/2018
8.1.0 733 10/28/2018
8.0.0 861 8/26/2018
7.0.6 996 4/1/2018
7.0.5 1,121 3/24/2018
7.0.3 945 3/18/2018
7.0.2 834 2/28/2018
7.0.1 1,000 2/17/2018
7.0.0 947 2/10/2018
6.5.0 942 12/29/2017
6.4.3 876 12/16/2017

https://github.com/asyncdesign/webui/releases