《HarmonyOS:领航者说》技术公开课来啦,大咖分享、实战解码,不容错过 了解详情
写点什么

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:137716
用户头像

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

关注

评论 1 条评论

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

理想汽车 x StarRocks:为 Hive 数据查询插上极速之翼!

StarRocks

大数据 数据分析 StarRocks

Redis高可用之主从复制实践

爱好编程进阶

Java 面试 后端开发

小程序能当成 App 吗?

FinClip

Spring Cloud入门教程-使用Hystrix Dashboard 监控熔断器的状态

爱好编程进阶

Java 面试 后端开发

Tiger DAO VC:DAO组织风险投资时代来临

西柚子

RadonDB MySQL on K8s 2.1.4 发布!

RadonDB

MySQL 数据库 Kubernetes 高可用 RadonDB

STM32+华为云IoTDA,带你设计一个属于自己的动态密码锁

华为云开发者联盟

stm32 iotda 华为云IoT 密码锁 Qt框架

JAVA8之后的版本履历

爱好编程进阶

Java 面试 后端开发

Java集合框架(四)

爱好编程进阶

Java 面试 后端开发

美区块链公司Espresso Systems口碑滑坡:知识产权、团队道德皆陷丑闻

小哈区块

Redis开发常用规范

爱好编程进阶

Java 面试 后端开发

Vue 学习笔记(3)路由的基本使用 结合 SpringBoot

爱好编程进阶

Java 面试

【并发编程系列10】阻塞队列之SynchronousQueue

爱好编程进阶

Java 面试 后端开发

MySQL最全整理(面试题+笔记

爱好编程进阶

Java 面试 后端开发

如何成为元宇宙最初的少数人?

博文视点Broadview

阿里云视频云人脸生成领域最新研究成果入选CVPR2022

阿里云CloudImagine

计算机视觉 视频编码 CVPR 视频云

简单实用的redis分布式锁

Rubble

4月日更 4月月更

Spring Cloud Gateway过滤器精确控制异常返回(实战,控制http返回码和message字段)

爱好编程进阶

Java 面试 后端开发

TASKCTL调度服务(主/从)代理节点的启动和停止

敏捷调度TASKCTL

数据仓库 kettle 调度引擎 ETL 调度任务

SpringBoot+WebSocket实时监控异常

爱好编程进阶

Java 面试 后端开发

SpringBoot系列:RabbitMq讲解与示例

爱好编程进阶

Java 面试 后端开发

Spring(十)

爱好编程进阶

面试 后端开发Java

SSM 最简单最全面的整合Spring+SpringMVC+Mybatis三大框架 快速搭建

爱好编程进阶

Java 面试 后端开发

mysql sql语句大全

爱好编程进阶

Java 面试 后端开发

《零基础》MySQL 连接(四)

爱好编程进阶

Java 面试 后端开发

【源码分析设计模式 10】SpringMVC中的建造者模式

爱好编程进阶

Java 面试 后端开发

JAVA 最常用实用的正则表达式校验

爱好编程进阶

Java 面试 后端开发

Mybatis源码解析:sql参数处理,原来可以这么简单-1

爱好编程进阶

Java 面试 后端开发

MyCat教程【简单介绍】

爱好编程进阶

Java 面试 后端开发

Nginx主要功能及使用

爱好编程进阶

Java 面试 后端开发

【并发编程系列1】Thread生命周期及interrupted()作用分析

爱好编程进阶

Java 面试 后端开发

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