A mobile-first CSS framework that supports responsive mobile first and fixed desktop layouts.
The Swiss Army Knife of CSS frameworks
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
<!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>
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>
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
Alternatively, you can use Yarn to install the WebUI packages.
yarn add asyncdesign-webui
If you are using Visual Studio before VS2019 to develop websites, then this is the preferred way to install WebUI.
Install-Package asyncdesign-webui
If you are using Visual Studio 2019 or later, then the built-in "LibMan" utility is the best way to manage client-side libraries.
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.
The NPM package includes the WebUI source files and the minified and development distribution files.
Yarn installs the same package as with NPM, but may be better suited to certain projects or environments.
The NuGet package includes only the minified and development distribution files.
The GitHub download includes all WebUI files for the framework, docs website, demo pages, and build 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. |
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.
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 CLI project folder.npm install asyncdesign-webui and wait for the install to finish.tsconfig.json add "allowJs": true to the "compilerOptions" object..angular-cli.json add "../node_modules/asyncdesign-webui/dist/css/webui-components-standard.min.css" to the styles array..angular-cli.json add "../node_modules/asyncdesign-webui/dist/js/webui-components.min.js" to the scripts array.typings.d.ts add declare var webui: anyapp.components.ts add import * as webui from '../../node_modules/asyncdesign-webui/dist/js/webui-components.min.js'; at the top of your file.React project folder.npm install asyncdesign-webui and wait for the install to finish.React component js file such as App.js add import webui from '../node_modules/asyncdesign-webui/dist/js/webui-components.min.js'import '../node_modules/asyncdesign-webui/dist/css/webui-components-standard.min.css'className="" instead of class="" on your html elements.componentDidMount() lifecycle method.Vue CLI project folder.npm install asyncdesign-webui and wait for the install to finish.webpack.base.conf.js under resolve: alias: add 'webui': resolve('node_modules/asyncdesign-webui/dist/js/webui-components.min.js')main.js add import webui from 'webui';main.js add import '../node_modules/asyncdesign-webui/dist/css/webui-components-standard.min.css';Vue.use(webui) directly below your imports.Check out the full documentation to learn more about WebUI
FAQs
A mobile-first CSS framework that supports responsive mobile first and fixed desktop layouts.
We found that asyncdesign-webui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.