全栈算力,加速行业AI落地 了解详情
写点什么

Bruck:一个 Web 界面布局原型设计框架

  • 2019-02-11
  • 本文字数:1248 字

    阅读完需:约 4 分钟

Bruck:一个Web界面布局原型设计框架

Bruck是一个面向网页设计师的新型 lo-fi 原型系统,让设计师可以快速为客户构建响应式且易于访问的布局原型。设计师可以通过组合多达 25 个Web组件来建立各种布局原型。设计师还可以在 Bruck 提供的在线Playground中实时可视化组合布局。


Bruck 可以生成屏幕阅读器可访问和响应式的布局,无需编写 CSS 断点。Bruck 组件提供了常见的布局模式,并带有可配置的填充内容。例如,下面的代码将生成一个布局,其中包含三个连续的文本块(),后面跟上一个图库网格(<g-rid itemWidth=“10rem” repeat=“6">)。网格布局包含六张以 1:2 比例显示的图像(),每张图片下方的标题居中(class=“u-text-center”)。设计师还可以加入注释(<c-omment wording="A grid of gallery images”>),这样有助于设计人员和开发人员之间进行沟通。




大多数组件都会随机生成带有默认值的内容,这些默认值可以被覆盖。在前面的示例中,指定了一个文本块,其中包含随机生成的四到五个单词。


两个高级组件(和)允许用户使用真实的数据而不是填充内容。用户必须将真实数据包含在一个叫作 data.js 的文件中。Bruck Playground 还不支持对包含真实数据的布局进行预览。


要指定动态布局,设计者可以将事件监听器映射到一组预设的动作。下面的示例使用了动态布局,当用户单击按钮时,这个布局将显示 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


2019-02-11 10:137371
用户头像

发布了 98 篇内容, 共 62.8 次阅读, 收获喜欢 285 次。

关注

评论 1 条评论

发布
用户头像
想法不错 ^_^
2019-02-13 17:13
回复
没有更多了
发现更多内容

为什么@Value可以获取配置中心的值?年薪超过80万!

JVM调优资料

Java 程序员 后端

手撸二叉树之最小高度树

HelloWorld杰少

数据结构与算法 8月日更

Java工程师跳槽经验分享,看完跪了

Geek_f90455

Java 程序员 后端

FILECOIN矿池挖矿APP系统开发案例

获客I3O6O643Z97

挖矿矿池系统开发案例 fil挖矿

synchronized 加锁 this 和 class 的区别!

王磊

Java 并发 8月日更

中高级Java大厂高频面试题,已开源下载

JVM调优资料

Java 程序员 后端

三面拼多多,一篇文章帮你解答

JVM调优资料

Java 程序员 后端

为什么spring能最好地改变Java?成功跳槽阿里!

JVM调优资料

Java 程序员 后端

为什么大公司一定要使用微服务?神操作!

JVM调优资料

Java 程序员 后端

Java开发者值得深入思考的几个问题,建议收藏

Geek_f90455

Java 程序员 后端

MySQL触发器介绍

Simon

MySQL

硬核万字长文,深入理解 Java 字节码指令(建议收藏)

沉默王二

Java

图片风格迁移:基于实例缓解细节丢失、人脸风格化失败问题

华为云开发者联盟

神经网络 风格 实例 风格迁移 图像翻译

Java开发热门前沿知识,架构师必备技能

Geek_f90455

Java 程序员 后端

Java开发者必须收藏的8个开源库,吊打面试官系列!

Geek_f90455

Java 程序员 后端

极光开发者周刊【No.0730】

极光JIGUANG

Hudi自带工具DeltaStreamer的实时入湖最佳实践

华为云开发者联盟

大数据 Hudi

Apache ShardingSphere 元数据加载剖析

SphereEx

数据库 开源

Java开发究竟该如何学习,一文轻松搞定

Geek_f90455

Java 程序员 后端

Ubuntu 与 Mac 共享文件

TroyLiu

ubuntu 效率 Mac 文件传输 共享文件

【Vue2.x 源码学习】第二十三篇 - 依赖收集 - 视图更新部分

Brave

源码 vue2 8月日更

MediaMuxer实用封装

Changing Lin

8月日更

【共识专栏】共识的分类(下)

趣链科技

区块链 共识机制 共识算法 共识分类

Redis挂了,流量把数据库也打挂了,怎么办?

why技术

Java 面试

是谁,在暗中观察

skow

Java 后端 Java设计模式 8月日更

Java多线程实现方式及并发与同步,写的太详细了

Geek_f90455

Java 程序员 后端

Java大厂74道高级面试合集,附面试题

Geek_f90455

Java 程序员 后端

Java开发岗还不会这些问题,一文轻松搞定

Geek_f90455

Java 程序员 后端

如何使用 DDD 指导微服务拆分?

架构精进之路

微服务 DDD 8月日更

【Jackson技术专题】全方位系统化学习和使用指南

洛神灬殇

Jackson JSON库 JSON序列化 8月日更

中高级Java面试中你不得不会的知识点,附详细答案

JVM调优资料

Java 程序员 后端

Bruck:一个Web界面布局原型设计框架
_大前端_Bruno Couriol_InfoQ精选文章