Visually Design Tailwind Components & Responsive Images. Sync to Laravel Apps.

Sign Up For Brook Updates

#DesignLikeADev

Want to see more?

30 Days of Brook Videos

The Style Guide

The style guide is really key to the entire platform in that it allows you to visually customize your Tailwind configuration. Not only does this configuration apply to the component studio, it also applies to the image studio. I think the place this is most useful is with colors and typography. You can edit existing colors for type, background, and borders or you can create your own with an integrated color picker. You can also create your own font families from Google fonts and add them to your project with a simple @brook('fonts') custom blade directive. Lastly, the style guide compiles down to a CSS file that you can use directly or with our @brook('css') blade directive, but it also includes a JS file that can be used in other build environments.

The Component Studio

The component studio is essentially a visual Tailwind editor, but with layers of visualization that I find really useful as a developer. If you want to create or edit Tailwind components completely visually with the GUI, you can. No problem. But, the platform also adds additional views like class list views and a built in "flip side" code editor. The code editor has Emmet pre-installed and I have also built a custom Tailwind autocompleter. The other great thing about the component studio is that you can seamlessly integrate responsive images and other components that you have made on the platform.

The Image Studio

The Brook platform gives you access to some of the greatest open licensed content all in one place. In fact, without the generosity of so many talented designers, photographers, and typographers, this platform wouldn't be possible.

In some cases, credit isn't required, but even so, we have created a custom attribution page with a JSON export that makes it a cinch to create a credits page without you having to track each asset you use.

To this point, many of the awesome illustrations on this page are from Undraw. Thanks for your amazing work and generosity @NinaLimpi.

Collaborative & Realtime

When the project first started out, the decision was made to build the component and image studios using all realtime technologies. As you design, your designs are automatically saved in realtime, and if you are collaborating with others, all design changes are updated in realtime.

From a workflow perspective, this technology choice allows for the most versatile experience with clients and/or other collaborators. You can choose to work asynchronously or synchronously as the situation may require.

Version Controlled

As developers, using version control systems is the absolute norm. But, often when we have to do some design work we end up with versioning through filenames. Seriously, how many of you have image folders with banner.ai, banner2.ai, banner3.ai, banner-final.ai, banner-final2.ai, banner-final-for-real.ai?

We are changing design versioning by organizing not only the history of image changes for easier design workflow with teams, but also to enable seasonal variations, short term changes like a sales event, and also allowing for much easier A/B testing.

Deploy to Laravel Projects

This is really the reason this product exists. When you're used to working with Laravel Forge and GitHub, pushing code and deploying is so simple. When it comes to imagery, the process becomes tedious and repetitive. From remembering metatag markup and image sizes for favicons to complicated device based responsive image scenarios, it's just a pain. Then, you want some kind of version control, and it just doesn't feel right to store images in the code repo. We hear ya!

Our artisan commands and webhooks allow you to automatically sync images to development and production enviroments. You make changes in the design studio, commit those changes, and it automatically deploys. And, if you don't want to mess with the markup, our blade directive makes every kind of responive image, favicon, open graph image, etc. a breeze.

About the Brook "Team"

Tim Murphy

The Brook platform is a one person (full time) show right now, but I really hope another passionate person or two with complementary skills will want to team up this year. My background is in building software for online product designers. My first design studio was built using Flash ActionScript 3 back in like '07 or '08. After that there was the vanilla PHP & JQuery version. Then Laravel replaced the vanilla PHP. Then finally the Laravel & VueJS version. Besides building design platforms, I am passionate about building the best realtime experiences possible. Lastly, I got a BS in computer science in 2009, but I feel strongly that constantly learning is far more important.

You?

Get in touch if you're looking to team up at the (close to) full-time co-founder level. I am especially interested in working with people that specifically have a passion to help developers and non-designers make things look great. Experience with Laravel, VueJS, Tailwind CSS, realtime technologies, as well as experience in bringing products to market are pretty much key.

Brook is made with in Minneapolis, MN

Copyright © 2019 Brook, LLC - All Rights Reserved

Brook is a trademark of Brook, LLC

Tailwind CSS (© Adam Wathan & Jonathan Reinink) is used under MIT License. Brook is not endorsed by or affiliated with them. Some patterns © Steve Schoger CC BY 4.0