Topcoat简介-一个性能优先的UI框架

轻便外套是一个CSS框架，将帮助您构建快速，高性能的ui。Topcoat是Adobe开源计划之一。在理念方面，Topcoat认为UI性能会带来更好的UX。

此外，该项目旨在让网络应用在用户交互的速度和响应能力上更接近原生应用。Topcoat实现性能改进的方法之一是在呈现Topcoat组件时对浏览器的性能进行基准测试。这是通过测量加载时间和每秒帧数(fps)来完成的，以发现性能不佳的CSS属性。

Topcoat仍然很新。在撰写本文时，最新的版本是0.8.0。

设置面漆

在本教程中，我们将使用Topcoat构建一个简单的用户界面。

你可以点击下面的链接下载本教程的源代码:下载源你需要做的第一件事是下载Topcoat的源代码从GitHub。然后，将Zip归档文件的内容解压缩到计算机上的某个位置。或者，你也可以使用Git命令提示符将Topcoat的源代码克隆到你的计算机:

git克隆https://github.com/Topcoat/Topcoat.git

下面是Topcoat的顶级目录和文件:要查看Topcoat附带的UI组件，请进入演示目录并打开index . html在浏览器中。

你应该会看到一个像这样的网页:

Topcoat的样式表概述

如果你看Topcoat的里面css目录下，你会看到8个CSS文件:

• topcoat-desktop-dark.css
• topcoat-desktop-dark.min.css
• topcoat-desktop-light.css
• topcoat-desktop-light.min.css
• topcoat-mobile-dark.css
• topcoat-mobile-dark.min.css
• topcoat-mobile-light.css
• topcoat-mobile-light.min.css

CSS文件.min它们的文件名都是缩小版，所以Topcoat实际上只有四个独特的样式表。例如,topcoat-desktop-dark.min.css等于topcoat-desktop-dark.css，只是前者的文件大小较小。你应该只使用其中一种。

UI线框图

让我们从将使用Topcoat构建的用户界面的快速线框开始。这样做将帮助我们找出我们需要的Topcoat组件。这是线框:查看线框，我们可以看到我们将需要这三个Topcoat组件:

• 导航栏
• 列表
• 按钮

提示:您可以使用我们前面看到的演示文件来学习如何实现其他Topcoat组件。

创建HTML文档

下一步是为UI创建一个HTML文档。从一些基本的HTML标记开始，确保引用Topcoat的样式表之一。对于本例，我们将使用topcoat-mobile-light.css样式表。

<！DOCTYPE html>   
  
    

添加面漆组件

在<身体>元素，我们将添加导航栏，列表和按钮组件。

< div class = " topcoat-navigation-bar”> < div class = " topcoat-navigation-bar__item中心已满”> < h1类=“topcoat-navigation-bar__title”>账户< / h1 > < / div > < / div > < div class = " topcoat-list " > < h3类= >“topcoat-list__header”存款< / h3 > < ul类=“topcoat-list__container”> <李类=“topcoat-list__item”>个人检查——12322 .10美元李< / > <李类=“topcoat-list__item”>个人储蓄- 25322 .10美元李< / > < / ul > < / div > < div class = " topcoat-list " > < h3类= " topcoat-list__header " > < / h3 > < ul贷款class="topcoat-list__container"> 
抵押- $662,322.10