Clarity 图标中的 SVG 和自定义元素之路
阅读评论
又一天,另一个设计系统决定 SVG 图标系统是最好的选择。
每个人在做出这样的选择时都有自己的考虑因素。Scott Mathis 记录了 Clarity 的主要考虑因素:退出、大小、多色、交互性、规模和未来。 基于这些,他们最终使用了自定义元素 (<clr-icon>
,它本质上是在行内 <svg>
),就像 Etsy 一样.
我们正在阅读的来自网络各处的文章,以及我们的一些想法。 有我们应该知道的链接吗?告诉我们!
又一天,另一个设计系统决定 SVG 图标系统是最好的选择。
每个人在做出这样的选择时都有自己的考虑因素。Scott Mathis 记录了 Clarity 的主要考虑因素:退出、大小、多色、交互性、规模和未来。 基于这些,他们最终使用了自定义元素 (<clr-icon>
,它本质上是在行内 <svg>
),就像 Etsy 一样.
Jon Moore 记录了一种趋势,即设计选择非矩形标题。 斜面、圆角、图像裁剪,甚至是奇怪的不规则多边形。 我是说,什么样的网站会把一个奇怪的不规则多边形作为标题呢?
Etsy 从生产中的图标字体转向使用 SVG。 它将是一个内联 <svg>
系统,但抽象为 <etsy-icon>
自定义元素,方便使用。
两分钱
<use>
语法可用,我可以理解这种抽象的必要性,例如:<svg use="icons.svg#cart" />
最后一个让我很惊讶,因为我认为当您需要使用的图标被分配到字体中的某个随机字符时,找到要设计使用的正确图标会很痛苦。 我认为 Sketch 或 Illustrator 中的“符号”概念将使设计师能够非常容易地找到和使用这些图标。 这让我想到字体实际上提供的功能是设计软件之间的**互操作性**。 我想知道像Lingo或Iconjar这样的软件在这里是否会有所帮助。
“Tate-Yoko 网页奖”颁发给那些愿意通过设计和利用最新的 CSS 编码中的新排版标准来挑战下一代网页排版的人。
也许奖项网站应该赢得该奖项。
Varun Vachhar
一个 Chrome 扩展程序,用于通过将 SVG 路径转换为轮廓并显示锚点、控制点、手柄和圆弧椭圆来调试 SVG 路径。
对这个开源项目的绝妙贡献是使所有这些点都可拖动,然后能够输出新调整的代码。
另外,浏览器扩展不是即将实现互操作性吗? 看来社区小组已经完成了很多工作.
据我所知
var payment = new PaymentRequest(methodData, details, options);
网页动画研讨会 在春季重新开始,今年我们将前往旧金山、芝加哥和巴黎,一些日期尚未公布。 Val Head 和我联手为您带来两天满满的内容和练习,这样当您离开课堂时,您不仅会了解在不同技术栈/环境中如何进行动画的技术,还会了解为什么。 以下是我们涵盖的一些内容
Tyler Gaw 记录了他从 Sass 迁移到 PostCSS 的过程,但保留了**大部分**代码。 这意味着要确保他使用的是 PostCSS 插件,这些插件可以复制 Sass 的大部分功能,比如嵌套和混合等等。
Tyler 被说服了。 我发现这是一个有趣的实验,而且很高兴知道这是基本可能的,但我还没有被说服。
现在,您不再只将 Sass 作为依赖项,它是一个活跃的健康项目,而是将一大堆不同作者的插件作为依赖项。 为了什么? 假设您使用 libsass,您不会获得任何速度。 如果您喜欢某个特定的 PostCSS 插件,使用 Sass 并不会阻止您也使用它。 我绝对不建议预处理那些自定义属性,因为它们不是可以互换的东西.
我们自己的 Sarah Drasner
与字体、颜色等不同,我们倾向于在最后一步添加动画,这会导致缺乏整体一致性的混乱实现。 如果您问设计师或开发人员他们是否会在不知道他们使用的字体的的情况下创建模型或构建 UI,他们会不喜欢这个想法。 不知道他们使用的构建块意味着设计可能会崩溃,或者开发可能会因为在开始时就省略了如此基本的东西而中断。 好的动画也是如此。
Manton Reece 为一种新型的社交网络和一本书筹集资金,这两者都旨在鼓励人们再次独立写作
在 Web 的早期,我们总是发布到我们自己的网站上。 如果你对你的网络主机不满意,或者他们倒闭了,你可以移动你的文件和你的域名,什么都不会断开。
如今,大多数写作都进入少数几个集中式社交网络网站,在那里你无法移动你的内容,广告和虚假新闻无处不在,如果其中一个网站失败,你的内容就会从互联网上消失。 太多的网站消失了,带走了我们的帖子和照片。