pure.css
html编辑器，推荐sublime或notepad++
获取Pure CSS。在官网purecss.io首页可以找到Pure的下载地址，你可以把Pure的css文件下载到本地，也可以直接引用雅虎的css文件。本文作为教程就直接使用在线的css文件。
添加pure-g样式我们先从简单的入手，实现一个常见的左右结构，即左边内容+右侧边栏。先添加一个pure-g样式
定义单元格。我们要求侧边栏宽度是300px，由于前面定义了页面宽度是1000px，因此侧边栏占页面宽度的1/3。
给内容增加边距。为了页面更美观，需要给左右两侧的内容增加间距。这里需要注意的是，设置margin、padding的样式不能跟pure-u-*的样式同时应用在同一个标签里，否则pure的网格系统会出现异常。
分析页面任何复杂的布局都可以拆分为若干个简单的布局，可以分析出这个界面有4大区域，如图所示：
实现大体布局现在我们先来实现上一个步骤里标出的4个模块，实现代码如下。可以看出就算是复杂的布局，用pure实现起来也是清晰明了，修改起来也很简单。比如区域4想改成一行显示5张图片，只需要把pure-u-1-4改成pure-u-1-5。至于区域1和区域2里的内容页可以继续嵌套网格来排版，这个留给读者做练习，我这里就不细说了。
定义网格的字体由于Pure的网格系统默认设置了字体font-family: sans-serif;，因此如果你的网页需要重定义字体就需要这样写：
响应式设计Pure也支持响应式设计，0.4.2版本提供了一个响应式的网格样式pure-g-r，你只需要简单地把pure-g替换成pure-g-r就能实现响应式的布局。不过在下版本Pure把pure-g-r移除了，取而代之的是一个移动设备优先的响应式框架，有兴趣的朋友参考stage.purecss.ioEND