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