{% extends 'base.html' %} {% block style %} {% endblock %} {% block header %}

Brick

UI Components for Modern Web Apps

{% endblock %} {% block content %}

What is Brick?

Brick is a bundle of reusable UI components created to enable rapid development of cross-browser and mobile-friendly HTML5 web applications.

Neat. How?

Brick adds custom HTML tags via Web Components technologies- allowing developers to express the structure of an application in a clearer, more concise manner.

Um, Web Components?

Web Components is a series of emerging W3C standards that allow developers to define custom HTML elements, and interact with them using the native DOM.

I'm the front face.
And I'm the back face.

Brick in Action

Markup

<x-flipbox>
<div>I'm the front face.</div>
<div>And I'm the back face.</div>
</x-flipbox>

JavaScript

// assume that toggleButton and flipBox are already
// defined as their respective DOM elements
toggleButton.addEventListener("click", function(){
flipBox.toggle();
});

Start Stacking

Download Brick

version {{ version }} — {{ size }}

Feedback

Brick is currently in Beta. You may run into issues using the components, but it likely isn't your fault! Please let us know!

File an Issue »
{% endblock %} {% block script %} {% endblock %}