A Brick component providing a header bar.


Check it live!


  1. Import Web Components polyfill:

     <script src="bower_components/platform/platform.js"></script>
  2. Import Custom Element:

     <link rel="import" href="src/brick-appbar.html">
  3. Start using it:

    You can use any elements in place of the <button> tags in the example below. A heading <h1> to <h6> element is required, and will be created automatically if not provided.



Attribute Options Description
heading string Edits the header text.


Accessor Description
heading corresponds to the header text attribute.


Brick components use Stylus to generate their CSS.

This repository comes outfitted with a set of tools to ease the development process.

To get started:

While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.

To run the development server:

To simply build and lint your code, run gulp build.

You can also push your code to GitHub Pages by running gulp deploy.