免費AI編程助手
Pure工具
使用CSS編寫，操縱和執(zhí)行更多操作。
用npm安裝Pure
您可以通過npm將Pure添加到您的項目中。這是我們推薦的將Pure整合到您的項目的構(gòu)建過程和工具鏈中的方法。
$ npm install purecss --save
require('yahoocss') 將使用以下方法加載對象：
- getFile(name)- 檢索Pure模塊文件的內(nèi)容。
- getFilePath(name)- 將完整路徑返回到Pure文件。
用Bower安裝Pure
您可以通過Bower將Pure添加到您的項目中。 如果您的網(wǎng)站是SSL加密的，這很好。
$ bower install pure --save
使用Composer安裝Pure
您也可以安裝Pure with Composer。
$ composer require yahoo/purecss
擴展 Pure with Grunt
我們已經(jīng)編寫了幾個工具，幫助您擴展Pure并將其與項目的CSS集成。這些工具可以作為Grunt插件提供，可以輕松地集成到現(xiàn)有的插件中Gruntfile.js。
擴大Pure的Rework
我們采取了分層的方法來開發(fā)Pure的工具。大多數(shù)工具首先構(gòu)建為Rework插件。這允許您與其他返工插件一起撰寫Pure的Rework插件。它還允許將Grunt插件寫入非常薄的封裝。
生成自定義響應(yīng)網(wǎng)格
Pure被創(chuàng)建以幫助開發(fā)人員構(gòu)建移動優(yōu)先響應(yīng)的Web項目。然而，由于CSS Media Queries不能通過CSS覆蓋，您可以使用Pure的工具來為您的項目定制Pure的響應(yīng)網(wǎng)格。
通過Grunt
通過npm 安裝Pure Grids Grunt Plugin。
$ npm install grunt-pure-grids --save-dev
接下來，將它添加到你的Gruntfile.js。
grunt.loadNpmTasks('grunt-pure-grids');
最后，通過pure_grids任務(wù)添加必要的配置。要查看所有可配置屬性的完整列表，請查看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返工插件生成自定義響應(yīng)網(wǎng)格。 它與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.適應(yīng)舊瀏覽器的移動優(yōu)先設(shè)計
從移動優(yōu)先角度開發(fā)您的Web項目有以下好處：
- CSS規(guī)則比刪除更容易添加，所以從最小和最簡單的布局開始，并為更大的屏幕添加樣式是有意義的。
- 迫使您考慮最重要的內(nèi)容，而不是將小小的屏幕上的桌面體驗。
然而，移動優(yōu)先設(shè)計的問題之一是不支持CSS Media Queries的舊瀏覽器（如IE 8）可以獲得手機體驗，這在大屏幕上看起來很奇怪。
為了解決這個問題，我們幫助開發(fā)了Strip MQ Grunt Plugin。 通過使用Grunt插件，您可以編寫移動優(yōu)先的CSS，同時確保IE 8及更低版本的用戶可以查看桌面體驗。這是兩個世界最好的！
通過Grunt
通過npm 安裝Strip MQ Grunt插件。
$ npm install grunt-stripmq --save-dev接下來，將Grunt任務(wù)添加到您的 Gruntfile.js
grunt.loadNpmTasks('grunt-stripmq');通過stripmq任務(wù)添加必要的配置。查看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-前綴開頭。 但是，您可能想要改變這一點。要完成此任務(wù)，您可以使用Pure的工具來更改CSS選擇器。
通過Grunt
通過npm 安裝CSS Selectors Grunt Plugin
$ npm install grunt-css-selectors --save-dev
安裝完成后，將任務(wù)添加到您的 Gruntfile.js
grunt.loadNpmTasks('grunt-css-selectors');
最后，通過css_selectors任務(wù)添加必要的配置。有關(guān)詳細信息，請參閱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存儲庫中。
更多建議：