Brick is a bundle of re-usable UI components 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
Prebuilt versions of the entire library are provided in dist/brick.css and dist/brick.js, and should be included in your project like any other CSS/JavaScript file.
In the near future, compartmentalized releases of specific components will be released in their respective folders under dist, allowing you to pick and choose what components you want. (Do not use these yet, as dependencies have not been created yet.)
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
git submodule update --init --recursive
npm install
make
The built files should be output to dist/brick.css and dist/brick.js.
This is a list of the currently bundled components provided in the library. (Click to view subfolder with readme and demo page)
- Primary layout container, holds app structure.
- Allows whole "app" space to have layout properties like flexbox without affecting
- Contains top-level information and UI
- Similar to a toolbar or roughly equivalent to Android's action bar
- 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
- Shuffledeck
- Components with default support for show event:
- Can also fire user-defined events
- Allows a 'slide' filmstrip effect between views or panels
- Similar to slidebox, but with a perspective flip effect.
- May be combinable with slidebox and accessed via an option
- 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 entrance/exits
- 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
- 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)
- 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
- 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
- Polyfill on top of <input type='range'>, providing a consistent UI regardless of whether type="range" is supported or not.
- Unifies checkboxes and radios into a single consistent UI component
- 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent