免费AI编程助手
Pure工具
使用CSS编写，操纵和执行更多操作。
用npm安装Pure
您可以通过npm将Pure添加到您的项目中。这是我们推荐的将Pure整合到您的项目的构建过程和工具链中的方法。
$ npm install purecss --save
require('yahoocss') 将使用以下方法加载对象：
- getFile(name)- 检索Pure模块文件的内容。
- getFilePath(name)- 将完整路径返回到Pure文件。
用Bower安装Pure
您可以通过Bower将Pure添加到您的项目中。 如果您的网站是SSL加密的，这很好。
$ bower install pure --save
使用Composer安装Pure
您也可以安装Pure with Composer。
$ composer require yahoo/purecss
扩展 Pure with Grunt
我们已经编写了几个工具，帮助您扩展Pure并将其与项目的CSS集成。这些工具可以作为Grunt插件提供，可以轻松地集成到现有的插件中Gruntfile.js。
扩大Pure的Rework
我们采取了分层的方法来开发Pure的工具。大多数工具首先构建为Rework插件。这允许您与其他返工插件一起撰写Pure的Rework插件。它还允许将Grunt插件写入非常薄的封装。
生成自定义响应网格
Pure被创建以帮助开发人员构建移动优先响应的Web项目。然而，由于CSS Media Queries不能通过CSS覆盖，您可以使用Pure的工具来为您的项目定制Pure的响应网格。
通过Grunt
通过npm 安装Pure Grids Grunt Plugin。
$ npm install grunt-pure-grids --save-dev
接下来，将它添加到你的Gruntfile.js。
grunt.loadNpmTasks('grunt-pure-grids');
最后，通过pure_grids任务添加必要的配置。要查看所有可配置属性的完整列表，请查看README文档。
grunt.initConfig({
pure_grids: {
dest : 'build/public/css/main-grid.css',
options: {
units: 12, // 12-column grid
mediaQueries: {
sm: 'screen and (min-width: 35.5em)', // 568px
md: 'screen and (min-width: 48em)', // 768px
lg: 'screen and (min-width: 64em)', // 1024px
xl: 'screen and (min-width: 80em)' // 1280px
}
}
}
});Via Rework
如果您不使用Grunt，您还可以通过使用Pure Grids返工插件生成自定义响应网格。 它与Grunt插件具有相同的配置选项 - 其实这是Grunt插件的功能。
您可以通过npm安装返工插件。
$ npm install rework rework-pure-grids它可以像它这样自己使用，或者可以使用您可能正在使用的其他重做插件。
var rework = require('rework'),
pureGrids = require('rework-pure-grids');
var css = rework('').use(pureGrids.units({
mediaQueries: {
sm: 'screen and (min-width: 35.5em)', // 568px
md: 'screen and (min-width: 48em)', // 768px
lg: 'screen and (min-width: 64em)', // 1024px
xl: 'screen and (min-width: 80em)' // 1280px
}
})).toString();
console.log(css); // This will log-out the grid CSS.适应旧浏览器的移动优先设计
从移动优先角度开发您的Web项目有以下好处：
- CSS规则比删除更容易添加，所以从最小和最简单的布局开始，并为更大的屏幕添加样式是有意义的。
- 迫使您考虑最重要的内容，而不是将小小的屏幕上的桌面体验。
然而，移动优先设计的问题之一是不支持CSS Media Queries的旧浏览器（如IE 8）可以获得手机体验，这在大屏幕上看起来很奇怪。
为了解决这个问题，我们帮助开发了Strip MQ Grunt Plugin。 通过使用Grunt插件，您可以编写移动优先的CSS，同时确保IE 8及更低版本的用户可以查看桌面体验。这是两个世界最好的！
通过Grunt
通过npm 安装Strip MQ Grunt插件。
$ npm install grunt-stripmq --save-dev接下来，将Grunt任务添加到您的 Gruntfile.js
grunt.loadNpmTasks('grunt-stripmq');通过stripmq任务添加必要的配置。查看README文档以获取可用选项的完整列表。
grunt.initConfig({
stripmq: {
all: {
files: {
// Takes the input file `grid.css`, and generates `grid-old-ie.css`.
'css/grid-old-ie.css': ['css/grid.css'],
// Takes the input file `app.css`, and generates `app-old-ie.css`.
'css/app-old-ie.css': ['css/app.css']
}
}
}
});最后，你需要添加这个块，<head>让旧的IE浏览器请求生成的CSS文件。
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/grid-old-ie.css">
<link rel="stylesheet" href="css/app-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/app.css">
<!--<![endif]-->突变选择器
Pure的源代码中定义的所有选择器都以.pure-前缀开头。 但是，您可能想要改变这一点。要完成此任务，您可以使用Pure的工具来更改CSS选择器。
通过Grunt
通过npm 安装CSS Selectors Grunt Plugin
$ npm install grunt-css-selectors --save-dev
安装完成后，将任务添加到您的 Gruntfile.js
grunt.loadNpmTasks('grunt-css-selectors');
最后，通过css_selectors任务添加必要的配置。有关详细信息，请参阅README文档。
grunt.initConfig({
css_selectors: {
options: {
mutations: [
{prefix: '.foo'}
]
},
files: {
'dest/foo-prefixed.css': ['src/foo.css'],
}
}
});通过返工
如果您不使用Grunt，您还可以使用Mutate Selectors返工插件来更改CSS选择器。 它具有与Grunt插件类似的界面 - 其实这是Grunt插件的功能。
您可以通过npm安装返工插件。
$ npm install rework rework-mutate-selectors
它可以像它这样自己使用，或者可以使用您可能正在使用的其他重做插件。
var rework = require('rework'),
selectors = require('rework-mutate-selectors');
var css = rework(inputCSS)
.use(selectors.prefix('.foo'))
.use(selectors.replace(/^\.pure/g, '.bar'))
.toString();
console.log(css); // This will log-out the resulting CSS.如果您有这些工具时遇到问题或遇到问题，请将其存档在各自的GitHub存储库中。
更多建议：