Mozilla Brick: Free UI Components Library for Web Apps
A new kind of frontend web framework, Mozilla Brick is a library of UI components that can be used like bricks to create amazing UI designs.
You can find tons of free frontend web frameworks if you search hard enough. They all come with their upsides and drawbacks, but there’s a framework out there for everyone.
Mozilla Brick is a newer framework and it’s built as a UI library that runs on Web Components.
These components work like bits of reusable code similar to Google’s Polymer library. However, with Mozilla Brick, you have your own library of components, along with UI elements, all wrapped up in one big package.
Discover Sierra: The Ultimate Dark UI Library Powered by Sass
If you're overwhelmed by the multitude of frontend frameworks out there, and you're a fan of Sass, then... Read more
If you dive into this library, you’ll quickly realize it’s built differently than others.
Mozilla uses its own language to describe custom elements like bricks which act as components bundled together. If you append many bricks onto your page, you can manage them using a package management tool like Bower.
Note that Mozilla Brick can work on top of Polymer, so it’s a versatile framework. In essence, you’d use Brick to define specific page elements or specific user actions on the page.
Then you connect these components into your typical UI elements right inside the HTML. This way, you’re still using standards-compliant naming conventions on top of Brick components.
It’s currently in version 2.0 and you can find a whole list of repos on GitHub. Mozilla created a GitHub account specifically for this project, so it’s the best place to find info.
It has everything from calendar UIs to tab bars, custom card layouts, and even the main Brick website code. All released for free with the source fully accessible.
Each project includes a live demo hosted on GitHub so if you dig into the documentation you’ll find links for all of these.
You should have some level of comfort with web components before getting into Brick. It’s not super newbie-friendly and it’s really aimed at frontend developers who want pre-designed components for their web apps.
Yet even beginners can learn the ropes by practicing with Brick on their own. You may struggle to understand the whole library, but the more you practice , the more you’ll learn and the easier it’ll be to craft robust component-powered web apps.