Pure.css:一套可用于所有Web项目的小型响应式CSS模块

purecss

Pure.css是一套小型响应式CSS模块,可用于所有Web项目。http://purecss.io/

下载

通过CDN下载:

注意:你可以定制你需要的Pure模块

通过Bower安装

通过NPM安装

特色

Pure为了成为所有网站或web app的起点而努力。我们关注所有站点对于CSS的不同需求,让它们看上去不再千篇一律:

  • 自适应网格布局,定制化你的需求。
  • 基于Normalize.css开发,有效解决跨浏览器兼容问题。
  • 保持 <a><button> 元素样式统一。
  • 为水平和垂直菜单有各自的设计样式,支持下拉菜单。
  • 所有元素对齐,让你不再担心屏幕尺寸的问题。
  • 多种常见的表格样式。
  • 极简风,极易定制。
  • 布局默认自适应,并提供取消自适应选项。
  • 文件极小:最小4.5KB + gzip.

新手入门

请访问 Pure CSS website 开始Pure之旅。网站提供了大量的文档和案例来帮助你新手入门。

你可以通过获取Yahoo的CDN,导入Pure的CSS文件到你的项目中。

你同样可以通过 Bower 安装Pure,请输入以下命令:

你还可以通过NPM安装Pure:

源文件组建

还有一种方法,你可以通过访问Github使用Pure的源文件安装。如果选择这种方式,你需要提前安装Node.js和NPM。我们使用Grunt搭建Pure。

组建文件

现在,所有的Pure CSS文件应该都已经导入到pure/build/目录下了。所有文件同样可以从CDN获取到。下面是build/目录的命名格式:

  • [module]-core.css: 最精简样式集合,使用常用结构,并提供其他模块样式的入口。
  • [module]-nr.css: src/[module]/目录下的 [module]-core.css + [module].css + [module]-[feature].css 集合。该css为非自适应版本。
  • [module].css: build/ 目录下的  [module]-nr.css + [module]-r.css 集合。该css为自适应版本。
  • *-min.css: 同名文件的最精简版本。
  • pure.css: build/ 目录下的所有 [module].css 文件集合。该css为所有文件的完整版汇总,未精简。
  • pure-min.css: pure.css 的精简版,可用于生产环境。
  • pure-nr.css: 不包含 @media 查询语句的所有模块集合。该css为所有文件非自适应版本汇总,未精简。
  • pure-nr-min.css: pure-nr.css 的精简版,应用于生产环境。
  • grids-responsive.css: Pure网格样式表的未精简版,包含 @media 查询语句。
  • grids-responsive-min.css: grids-responsive.css 精简版,应用于生产环境。

浏览器支持和测试

Pure在以下平台通过兼容性测试:

  • IE 8+
  • 最新稳定版: Firefox, Chrome, Safari
  • iOS 6-8
  • Android 4.x

文档和网站

Pure官网 同样是个开源站点,如果你对于文档和网站有任何想法或需求,请大胆地在 pure-site 库提出。

许可

该软件在雅虎BSD协议下免费使用,点击查看 LICENSE file 协议文件及版权信息。

官方网站:http://purecss.io/
开源地址:https://github.com/yahoo/pure/

打赏支持我整理更多优质资源,谢谢!

打赏编辑

打赏支持我整理更多优质资源,谢谢!

任选一种支付方式

1 1 收藏

资源整理者简介:凝枫

非典型性程序员,爱做一些和写程序毫不相干的事 个人主页 · 贡献了46个资源 · 1


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1439 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer