@mcph/ui NPM | npm.io

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:

Pick a component with a spec
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
Submit for peer review
???
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

@angular/animations @angular/common @angular/core @angular/forms @angular/platform-browser-dynamic @mixer/core.focus-trap @mixer/design-assets clipboard flatpickr keycode normalize.css rxjs uwp-keycodes

@everything-registry/sub-chunk-590 @zalastax/nolb-_mc

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago