Bruck是一个面向网页设计师的新型lo-fi原型系统,让设计师可以快速为客户构建响应式且易于访问的布局原型。设计师可以通过组合多达25个Web组件来建立各种布局原型。设计师还可以在Bruck提供的在线Playground中实时可视化组合布局。
Bruck可以生成屏幕阅读器可访问和响应式的布局,无需编写CSS断点。Bruck组件提供了常见的布局模式,并带有可配置的填充内容。例如,下面的代码将生成一个布局,其中包含三个连续的文本块(
大多数组件都会随机生成带有默认值的内容,这些默认值可以被覆盖。在前面的示例中,
两个高级组件(
要指定动态布局,设计者可以将事件监听器映射到一组预设的动作。下面的示例使用了动态布局,当用户单击按钮时,这个布局将显示id为“myElem”的元素。
<button onClick="action.show('myElem')">Show the element</button>
Bruck目前支持六种动作,可以动态显示和隐藏任何内容,并且可以以逐步的方式显示
Bruck还为全局样式提供了一组辅助类(如第一个示例中的u-text-center)。
Bruck的作者Heydon Pickering想让Bruck成为一个精益的库,旨在提高生产力:
除了动作之外,我真的不希望它成为一个庞大的库。它应该易于学习和使用。
Bruck实际上使用了CSS Houdini Paint API。因此,目前并不支持所有的Web浏览器。对于布局原型设计来说,不支持某些浏览器可能不会成为主要问题。
Bruck的Web组件是自定义元素,标记必须包含连字符,以便与标准HTML标记区别开来。Bruck的标签格式满足了这种要求,即在标签单词的第一个字母后面放置连字符(如
Bruck仍处于开发的早期阶段,一个主要版本正在等待发布。Bruck基于ISC开源许可发行,开发者可以通过Bruck GitHub项目参与贡献和提供反馈。
查看英文原文:https://www.infoq.com/news/2019/02/bruck-quick-layout-prototyping