Pure CSS简介：最小和模块化的CSS布局

​译者 | 李睿

审校 | 孙淑娟

如果开发人员使用级联样式表(CSS)有一段时间了，简介最局可能已经注意到采用一种更简单的小和CSS框架可以完成这项工作的趋势。本文介绍了一个更强大的模块示例。Pure CSS是简介最局一个模块化的、响应式的小和框架，它在CSS开发中有自己的模块特色，采用了一种最小化、简介最局轻量级而又全面的小和方法。与TailWind CSS一起，模块Pure CSS对人们如何设置网页样式进行了有趣的简介最局思考。它也很受欢迎，小和截至目前，模块在GitHub上已有22,简介最局000多颗星。  

开发移动优先的小和CSS

一开始，Pure CSS明确表示采用移动程序优先的模块方法，并且以很小的文件交付：在压缩之后整个包大小只有3.7kB。该框架旨在实现扁平化和可扩展，提供一系列简单的顶级工具，可以在必要时使用和扩展这些工具。它建立在Normalize.css之上，有助于平滑任何跨浏览器的企商汇粗糙度。  

使用Pure CSS很简单：用户可以自己将其包含在HTML页面中，也可以从内容交付网络中使用它。  

该框架由几个模块组成：  

基本  网格  表单  按钮  表格  菜单  

以下将依次研究每个模块。  

1.基本模块  

正如以上所提到的，Pure CSS建立在Normalize.css之上。它为该基本模块添加了一些有用的功能。 

隐藏（hidden）属性用于应用隐藏样式（使用框架应用的!important修饰符），如清单1所示。  

清单1.hidden属性  <input type="text" name="token" hidden>

.pure-img类用于快速制作响应式图像。  

2.网格布局  

网格布局是Pure CSS响应式布局的核心。与Bootstrap的基本思想一样，但被剥离了本质，Pure CSS的布局类可以用很少的语法做很多事情。可以在清单2中看到一个基本布局。并在此处实时查看。  

清单2.在PureCSS中设计一个简单的网格布局  

.button-success,

.button-error,

.button-warning,

.button-secondary {

color: white;

border-radius: 4px;

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

}

.button-success {

background: green;

}

.button-error {

Background: maroon;

}

.button-warning {

background: orange;

}

.button-secondary {

background: lightblue;

}

</div>

这里的主要思想是创建添加到基本纯按钮样式的样式。这些用于覆盖默认样式，提供颜色和圆角。例如，button-success类定义了颜色、服务器托管边框半径、文本阴影和绿色背景色。  

5.表格  

Pure CSS支持基本的表格样式。要使用它们，只需将Pure表类添加到表本身。对于边框和行阴影在表格上的外观，Pure CSS也有一些选择。

6．菜单  

Pure CSS包括一组很好的开箱即用的菜单样式：  

垂直菜单  水平菜单  选定和禁用的项目  下拉菜单  带有子菜单的垂直菜单  可滚动的水平菜单  可滚动的垂直菜单  隐藏的响应式菜单  

这些都像人们期望的那样丰富。特别是，响应式侧边栏和垂直到水平菜单非常方便。  

扩展Pure CSS

除了其核心功能之外，Pure CSS还可以通过多种方式进行扩展。  

在Pure CSS类旁边添加自定义类是相当容易的。通过清单4中的按钮样式看到了这一点，但添加站点范围的定制几乎同样容易。  

可以使用Grunt插件来扩展Pure CSS并与现有CSS集成。该框架还主要构建为Rework插件，因此可以与其他Rework工具集成。源码下载  

最后，以扩展Pure CSS以与其他库（如Bootstrap）一起使用。可以使用Pure CSS基础知识，然后从更广泛的工具（如Bootstrap）中提取需要的内容。这为开发人员提供了所需的所有特性和功能的最小可能占用空间。

原文标题：​​Intro to Pure CSS: Minimal, modular CSS layouts​​​，作者：Matthew Tyson​

本文地址：http://www.bzve.cn/html/356e64498999.html