brettsenna / brick

UI Web Components for Mobile Web Apps

Brick

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.

Development Prerequisites

You need three things to get started with Brick. NPM, Grunt and Bower.

First install NodeJS/NPM. Once you have npm installed it's easy to install Bower and GruntCLI. Simply run npm install -g bower grunt-cli.

Building from the repository source

Once you have the prerequisites, you're ready to clone and build from source.

Run the following:

git clone [email protected]:mozilla/brick.git
cd brick
npm install
bower install
grunt

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

Development

By default, Brick uses Bower to pull in components, which means that they are not git repositories. If you would like to work on the components within their git repository, then run the following:

bower install       # we use bower to get the repository locations, so this is required
grunt clone-repos   # clone all repositories to ./dev-repos/
grunt build-dev     # build from repositories instead of bower

Now you can work one each component within their respective git repository.

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