Brick / App-components

Brick is a bundle of re-usable UI components built with x-tags for quickly and flexibly building mobile HTML5 apps. Brick adds new HTML tags- widgets that allow developers to express the structure of an application in a clearer, more concise manner.

In other words, Brick provides minimal-markup, cross-browser implementations of common user interface designs, from calendars to slidebars to cycleable galleries, taking care of most of the under-the-hood boilerplate for you.

For example, this is all the markup that would be needed to implement a mobile-friendly, cross-browser calendar widget:

<x-calendar></x-calendar>

That's it! It really is that easy.

#Installation

Release bundles are provided on Github under this project's Releases tab.

Prebuilt versions of the entire library are also provided in dist/brick.css and dist/brick.js, and should be included in your project like any other CSS/JavaScript file.

Compartmentalized releases of specific components are also released in their respective folders under dist, allowing you to pick and choose what components you want.

Building from the repository source

If you wish to build the library yourself, first have npm installed. You'll also need the ability to run make, so Windows users may need to install Cygwin, making sure to install the make package.

Then, run the following:

git clone [email protected]:mozilla/brick.git
cd brick
make

By default, make should take care of running npm install and git submodule update --init --recursive for you.

The built minified files should be output to dist/brick.css and dist/brick.js.

Components

This is a list of the currently bundled components provided in the library. (Click to view subfolder with readme and demo page)

Full documentation can be found on the Brick site.

Structural Components

'Layout'

• Primary layout container, holds app structure.
• Allows whole "app" space to have layout properties like flexbox without affecting

'App Bar' (header)

• Contains top-level information and UI
• Similar to a toolbar or roughly equivalent to Android's action bar

'Tab Bar' (navigation, footer)

• Used to display an app-level navigation at the bottom of the UI
• Usually a series of icons with labels.
• Tabs are linked to panels/views. Changing tab changes the active panel, and changing the active panel changes the tab
• Essentially fires a 'show' event at targeted elements. It is up to target elements to respond appropriately.
  • Components with default support for show event:
    • Slidebox
    • Flipbox
    • Deck
• Can also fire user-defined events

'Slidebox'

• Allows a 'slide' filmstrip effect between views or panels

'Flipbox'

• Similar to slidebox, but with a perspective flip effect.
• May be combinable with slidebox and accessed via an option

'Deck' ('Cycle'/'Gallery')

• Like a combination of slidebox and flipbox
• A gallery box in which slides can be cycled in and out independently, with a variety of different transitions
• Transition types can be switched and overridden on the fly, allowing for a variety of different entrances/exits

'Tooltip' (Callout)

• Content container that appears over current view context
• Associated with a trigger element in the underlying content
• Does not necessarily block interaction with underlying content

Content Components

Calendar

• A calendar widget based on/extended from fortnight.js, but in a web component format
• Simple instantiation, with API hooks to allow flexible use cases such as an event-managing calendar (see demo)

Datepicker

• A polyfill for <input type='date'>, regardless of native browser support for date inputs
• Ability to select a date and submit its ISO string to a server
• Extends upon x-calendar to provide a calendar view

Icon Button

• A simple UI component that creates a button with both an icon and a label
• Allows multiple anchor locations of the icon and saves the developer from the headache of correctly CSS-centering contents

Slider

• Polyfill on top of <input type='range'>, providing a consistent UI regardless of whether type="range" is supported or not.

Toggle

• Unifies checkboxes and radios into a single consistent UI component

Togglegroup (aka Option Bar)

• A set of associated options of which only one can be selected at a time
• Designed to appear as a cohesive set
• Essentially several Toggles with the appearance of option buttons