<p class="zw">我们发现，当使用基于组件的方法构建网页时，为了保证设计的原创性，我们需要保持设计过程轻快而简约。在设计模式库或风格指南时，很容易做得过头儿，所以我们用最简单的HTML、CSS和JavaScript建立自己的Web设计风格指南工具包。</p> <p class="zw">为了避免复杂性，我们把设计风格和组件具化到一个页面，这让我们在通过Photoshop和Sketch验证想法时，可以尽可能地自由。</p> <p class="图"><img alt="0510.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/28.jpg"></p> <p class="图题">我们已经做了初步的风格指南，并可以在Github上访问。我们希望大家可以使用它，以及贡献想法来改进它。</p> <p class="zw">为了保证Web设计风格指南的易用性，我们把风格分为以下几种。</p> <ul> <li class="第1级无序列表"><strong>品牌：</strong>根据屏幕断点设置不同的logo和字体。</li> <li class="第1级无序列表"><strong>颜色：</strong>按钮、背景、边框和超链接的主要、次要、普通和重点的色调。</li> <li class="第1级无序列表"><strong>版式：</strong>多种大小和粗细的主要和次要字体。</li> </ul> <p class="zw">字体元素：h1到h6的标题层级；文本样式，如导语（大号）、二级（小号）、三级（更小号）和最小号；块级元素以及列表的样式。</p> <ul> <li class="第1级无序列表"><strong>其他HTML元素：</strong>基本表格样式；各种类型、大小、风格和状态的表单输入框和按钮。</li> <li class="第1级无序列表"><strong>常用组件类型：</strong>盒模型、博客、事件、新闻摘要与媒体组件。</li> </ul> <p class="zw">我们这里只列出了启动项目所需的样式指南，如果有需要，你也可以轻松地为新组件添加样式。</p>
