Bruck is a new lo-fi prototyping system targeted at web designers that enables them to quickly build responsive, accessible layout prototypes for clients. Designers may prototype a large variety of layouts by composing up to 25 web components. Designers may additionally visualize in real time the composed layout in Bruck's online interactive playground.
The layouts produced by Bruck are screen-reader accessible and responsive without needing to author CSS breakpoints, a junction point in a range of predetermined screen sizes where layout requirements change. Bruck components address common layout patterns with configurable dummy content. The following code will for instance produce a layout which features three consecutive blocks of text (<s-tack repeat="3"><t-ext></t-ext></s-tack>), followed by a grid of gallery images (<g-rid itemWidth="10rem" repeat="6">). The gallery’s layout consists of six images displayed with a 1:2 ratio (<i-mage ratio="1:2"></i-mage>), with a title centered (class="u-text-center") below each image. Designers may also incorporate comments (<c-omment wording="A grid of gallery images">). This facilitates communication between designers, developers and the documentation of the layout.
<b-ox>
<s-tack gap="2">
<h1><w-ords capitalize></w-ords></h1>
<s-tack repeat="3">
<t-ext></t-ext>
</s-tack>
<c-omment wording="A grid of gallery images">
<g-rid itemWidth="10rem" repeat="6">
<s-tack gap="-1">
<i-mage ratio="1:2"></i-mage>
<t-ext words="4,5" class="u-text-center"></t-ext>
</s-tack>
</g-rid>
</c-omment>
</s-tack>
</b-ox>
Most components produce random content with defaults which may be overwritten. In the previous example, <t-ext words="4,5" class="u-text-center"></t-ext> specifies a text block with randomly-generated content of either four or five words.
Two advanced components (<o-utput> and <m-odel>) allow users to work with real data instead of dummy content. Users must include actual data in a separate file named data.js. The Bruck playground does not yet allow the preview of layouts with real data.
To specify dynamic layouts, designers may map event listeners to a set of predetermined actions. The following example features a dynamic layout which displays the element with the id myElem when a user clicks the button.
<button onClick="action.show('myElem')">Show the element</button>
Six actions are currently available with Bruck. They allow showing and hiding any content dynamically, and displaying <f-low> content in a step-wise manner.
Bruck also provides a set of utility classes for global styling (like u-text-center in the first example).
Heydon Pickering, Bruck's creator, envisions keeping Bruck a lean library, emphasizing productivity:
Despite features like actions, I really don't want it to become a big monster application. Should be rough 'n' ready; easy to learn and use.
Bruck uses the CSS Houdini Paint API under the hood. As such, it is not currently available in all web browsers. For layout prototyping, the lack of support by some browsers is not expected to be a major issue.
Bruck’s web components are custom elements, where tags must include a hyphen to distinguish them from standard HTML tags. Bruck’s one-word-long tags satisfy that requirement by placing the hyphen after the first letter of the tag (<t-ext>, <s-tack>).
Bruck is still in the early stages of development, and a major release is pending. Bruck is available under the ISC open source license. Contributions and feedback may be provided via the Bruck GitHub project.