AlloyUI

AlloyUI is a framework built on top of YUI3 (JavaScript) that uses Bootstrap 3 (HTML/CSS) to provide a simple API for building high scalable applications.

• Official Website
• Examples
• Tutorials
• API Docs
• Rosetta Stone
• Contributing
• About

Browser Support

As an user interface framework we do care about browser support. Most of our modules use all the power of HTML5, so for old browsers we provide fallbacks in Flash.

IE 8+ ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Automated tasks

Here you can find a set of util tasks to work with AlloyUI project using Gulp.

gulp <command>

Setup

1. Install NodeJS >= v0.11.13, if you don't have it yet.

2. Install global dependencies:

[sudo] npm install -g gulp ```

3. Install local dependencies:

npm install ```

Init

• Fetch dependencies using Bower and NPM, then copy YUI3 files to build folder:

gulp init ```

Build

• Build AlloyUI & YUI3 using Shifter:

gulp build ```

• Build AlloyUI loader:

gulp build-loader ```

Watch

• Watch for any changes and build using Shifter:

gulp watch ```

Create

• Create a new module under src folder using Yogi:

gulp create ```

Format

• Format CSS & JavaScript code:

gulp format ```

• Format only CSS code using CSS Beautify:

gulp format-css ```

• Format only JavaScript code using JS Beautify:

gulp format-js ```

Lint

• Lint JavaScript code using JSHint:

gulp lint ```

Release

• Build modules and generate a release zip file:

gulp release ```

• Build modules optimized for CDN and generate a release zip file:

gulp release-cdn ```

Test

• Run unit tests using PhantomJS:

gulp test ```

• Run tests in the browser using Yeti:

gulp test-browser ```

Update

• Update dependencies using Bower and NPM:

gulp update ```

API Docs

• Import code examples from alloyui.com and build docs locally using YUIDoc:

gulp api ```

• Watch for any changes and build docs locally using YUIDoc:

gulp api-watch ```

Discussion

• Liferay Forums
• Google Groups
• Stack Overflow

Structure

The basic structure of the project is given in the following way:

• bower_components/ Contains all dependencies fetched via Bower. However, this directory is unnecessary for versioning, so it is ignored (.gitignore).
• build/ Contains AlloyUI and YUI generated files, once build task has been run. However, this directory is unnecessary for versioning, so it is ignored (.gitignore).
• demos/ Contains basic examples of the AlloyUI modules.
• src/ Contains the source code of the AlloyUI modules.
• tasks/ Contains the source code of the Gulp tasks.
• .alloy.json Specifies all dependencies and some configurations.
• .editorconfig Specifies the coding style for different editors/IDEs.
• .jsbeautifyrc Specifies the coding format rules for JSBeautify.
• .jshintrc Specifies the linting configurations for JSHint.
• .yeti.json Specifies the testing configurations for Yeti.
• LICENSE.md Defines the license agreement for AlloyUI.
• README.md Explains the AlloyUI project.
• package.json Lists all NodeJS dependencies.

Team

AlloyUI is maintained by these people and a bunch of awesome contributors.

| | | | --- | --- | --- | --- | --- | --- | --- Eduardo Lundgren | Nate Cavanaugh | Bruno Basto | Iliyan Peychev | Zeno Rocha

History

Discover all versions in the Releases page.

Each module (located under src/) contains a HISTORY.md file, check them for detailed changelog.

License

BSB License (c) Liferay, Inc.