Bruckはウェブデザイナーをターゲットにした、新しい lo-fi プロトタイピングシステムである。これにより顧客に向けたレスポンシブでアクセシブルなレイアウトプロトタイピングを素早く構築できるようになる。デザイナーは25個のwebコンポーネントにより、多岐に渡ってプロトタイプできる。また、構成したレイアウトをBruckのオンラインインタラクティブプレイグラウンドでリアルタイムに可視化することができる。
Bruckによるレイアウトはスクリーンリーダーアクセシブルでレスポンシブである。CSSのブレークポイントや、レイアウトの要件が変わる所定のスクリーンサイズの範囲内でのジャンクションポイントの追加を必要としない。Bruckのコンポーネントは、調整可能なダミーのコンテントを置いた共通のレイアウトパターンを取り扱っている。例えば次のコードは、3つの連続したテキストブロックを構成するレイアウトで(<s-tack repeat="3"><t-ext></t-ext></s-tack>)、グリッドギャラリーイメージに倣ったものだ(<g-rid itemWidth="10rem" repeat="6">)。ギャラリーのレイアウトは1:2の比率で描画され(<i-mage ratio="1:2"></i-mage>)、センター寄せのタイトルを下部に表示する(class="u-text-center")6つのイメージで構成されている。デザイナーはコメントを入れることもでき(<c-omment wording="A grid of gallery images">)、これによりデザイナーとデベロッパーのコミュニケーション、レイアウトのドキュメンテーションを促進してくれる。
<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>
多くのコンポーネントは、上書き可能なデフォルトを置いてランダムなコンテントを提供する。先ほどの例では、<t-ext words="4,5" class="u-text-center"></t-ext> はランダムに生成された4つか5つの単語をコンテントに置いてテキストブロックが指定されている。
2つの高度なコンポーネント(<o-utput> and <m-odel>)はユーザがダミーコンテントではなくリアルデータで作業できるようにしてくれる。ユーザはdata.jsという名前の別のファイルに実際のデータを含める必要がある。Bruckプレイグラウンドは未だリアルデータを使ったレイアウトプレビューは許可していない。
ダイナミックレイアウトを指定するには、デザイナーは所定のアクションのセットにイベントリリスナーを設定できる。次の例は、ユーザがボタンをクリックするとidのmyElemが要素として表示されるダイナミックレイアウトである。
<button onClick="action.show('myElem')">Show the element</button>
6つのアクションは現在Bruckで利用可能である。どの要素もダイナミックに表示・非表示することができ、段階的なやり方で<f-low>コンテントを表示できる。
Bruckはグローバイルスタイリング用にユーティリティクラスのセットも提供している(初めに例示した u-text-center など）。
BruckのクリエイターであるHeydon Pickering氏は生産性を強調し、Bruckをリーンライブラリに保つことを思い描いている:
アクションのような機能と違って、わたしは大きなモンスターアプリケーションにしたくないんです。拙速であるべきです; 簡単に学べて使えるものを。
Bruckは内部でCSS Houdini Paint APIを利用している。そのため、現在は全てのブラウザで利用するということはできない。レイアウトプロトタイピングがいくつかのブラウザでサポートされていないことは、大きな問題として捉えられていない。
Bruckのwebコンポーネントはカスタム要素で、標準のHTMLタグと区別するため、タグはハイフンを含める必要がある。Bruckの1単語の長さのタグでも、タグの最初の文字の後ろにハイフンを置くことにより、この要求を満たせる(<t-ext>, <s-tack>)。
Bruckはまだ開発の初期段階にあり、メジャーリリースは保留されている。BruckはISCオープンソースライセンスの下、利用可能である。コントリビューションとフィードバックはBruck GitHub projectで提供されている。