Modular Admin For Angular2Dart

As our team builds applications with Angular2Dart, we realize that we don't quite have the right GUI framework to build them. Recently, we started working on a GUI Framework to help us build applications better and faster.

In particular, our goal is to build a GUI framework that fully takes advantage of Web Components technology. There are a couple similar projects out there. For JavaScript/TypeScript users, there is a high-quality Material Design component library, but this library is not easy to use from Dart. There are some projects attempting to bring Material Design to Dart, for example angular_material, but these projects don't quite have the aesthetic or feature sets we're looking for.

We started building our framework by using an open source pure HTML+JS framework that we really like called Modular Admin. We ported the JavaScript code to Dart, and along the way we broke up the project's monolithic stylesheet into smaller, component-level stylesheets so that we could take advantage of style encapsulation. We also ported the SASS variables in the original project over to CSS Custom Properties so that themes could be changed on the fly without needing to re-compile SASS.

screenshot from GUI framework

The result is a GUI framework that jump starts the process of application building in Angular2Dart. The framework includes optional navigation components (top nav, side nav, and footer), grid & column layouts, and a number of re-usable components (buttons, forms, etc.). It's still an alpha release, but we wanted to share it with you so that we can start getting feedback and improving it to work for a wide range of use cases.

If you want to check it out, start with the demo, and if you want to learn more, take a look at the code. As always, we would love to hear your feedback. Hit us up on Twitter @dotslashpunk.