Beam UI

This repository contains Beam's core UI framework used across it's web services, apps and desktop applications. It's written in and for Angular 2 and typescript.

Getting started

tl;dr Developing this project:

1. Pick a component with a spec
2. Develop the component:
   • Use the demo application to test the component in action
   • Unit test your component
   • Update the README.md with usage and example documentation
   • Add your component to the all-in-one module in src/lib/module.ts and to the index file in src/lib/index.ts
3. Submit for peer review
4. ???
5. Profit

Scripts

• npm run build will build the project to the dist folder
• npm run serve to serve the demo application on localhost:8080
• npm run test will lint and unit test the project

Structure

• The dist folder contains the result of building the project:
  • dist/lib/module All-in-one utility module
  • dist/lib/* Single-require modules
  • dist/lib/bui.css Core styles, must be included for core functionality & layout
• src/lib contains the code for all components, their specs, and any shared logic
• demo/src contains the source for the demo application you can use to aid development
• test contains testing configuration

Status

Find all components that are part of this framework and their status below.

| Feature | Specced | Implemented | Tested | Docs | Priority | |------------------|---------|-------------|--------|--------------|----------| | virtual-repeat | | | | README | Medium | | datepicker | | | | README | Low | | data-table | | | | README | Low | | announcer | X | X | X | README | | | autocomplete | X | X | | README | | | button | X | X | | README | | | card | | X | | README | | | checkbox | X | X | X | README | | | clipboard | X | X | | README | | | content-carousel | | X | | README | | | content-loader | | X | | README | | | context-menu | X | X | | README | | | dialog | X | X | X | README | | | icon | | X | | README | | | input | X | X | X | README | | | layout | X | X | | README | | | list | | X | | README | | | log | | X | | README | | | progress-bar | | X | | README | | | progress-circle | | X | | README | | | radio | X | X | X | README | | | ripples | X | X | X | README | | | select | | X | | README | | | serial-input | X | X | | README | | | sidenav | | X | | README | | | slider | X | X | | README | | | tabs | X | X | | README | | | textarea | X | X | X | README | | | tile | X | X | | README | | | toast | | X | | README | | | toggle | X | X | X | README | | | tooltip | X | X | | README | | | typography | X | X | | README | |

Helper classes overview

BUI provides several classes you can use to structure and style your application. All classes are namepsaced under bui-.

The general structure is the following: bui - [property] - ([modifier]) - [value] - ([multiplier]) For example bui-margin-left-2x

Check out:

• Layout for layout and structure classes
• Typography for typography size, color & style classes