brick-appbar

A Brick component providing a header bar.

Demo

Usage

Import Web Components polyfill:

 <script src="bower_components/platform/platform.js"></script>

Import Custom Element:

 <link rel="import" href="src/brick-appbar.html">

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.

 <brick-appbar>
   <button>=</button>
   <h2>Email</h2>
   <button>+</button>
   <button>?</button>
 </brick-appbar>

Options

Attribute	Options	Description
`heading`	string	Edits the header text.

Methods

Accessor	Description
`heading`	corresponds to the header text attribute.

Development

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:

Install Bower & Gulp:

  $ npm install -g bower gulp

Install local dependencies:

  $ npm install && bower install

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:

Run gulp server
Navigate to http://localhost:3001

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

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