JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    UI Web Components for Mobile Web Apps
    Filed under 

    • 🔾56%Overall
    • 3,019
    • 23.2 days
    • 🕩229
    • 👥10

    Brick

    Build Status

    Brick is a collection of UI components designed for the easy and quick building of web application UIs. Brick components are built using the Web Components standard to allow developers to describe the UI of their app using the HTML syntax they already know.

    Install

    Brick can be installed using the Bower package manager:

    bower install mozbrick/brick
    

    To use Brick in your project, place the following in the <head> of your main HTML:

    <script src="bower_components/brick/dist/platform/platform.js"></script>
    <link rel="import" href="bower_components/brick/dist/brick.html">
    

    If you are already using Polymer, platform.js or a web browser that supports Web Components, you do not need the above <script> tag.

    Development

    Brick (and its components) are developed using tools built in JavaScript running on node.js.

    The individual components are developed in their own GitHub repositories.

    The mozbrick/brick repository contains the distributions of all the components packaged together as well as tools for building the distributions.

    To work on Brick, you will need the following node tools:

    npm install -g bower gulp
    

    Building Brick from source

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

    Run the following:

    git clone git@github.com:mozbrick/brick.git
    cd brick
    npm install
    bower install
    gulp build
    

    If you'd like to work on all the Brick components at once, try this handy script:

    #!/bin/bash
    repos=(
      brick
      brick-action
      brick-appbar
      brick-button
      brick-calendar
      brick-common
      brick-deck
      brick-dialog
      brick-flipbox
      brick-form
      brick-input
      brick-layout
      brick-listview
      brick-menu
      brick-storage-indexeddb
      brick-tabbar
    )
    for repo in "${repos[@]}"
    do
      git clone https://github.com/mozbrick/$repo.git;
    done
    

    Components

    Here is a list of the components currently in the primary distribution of Brick:

    If you encounter issues with a component, please file issues against the individual component repositories.

    Show All