Pure延伸

建立在Pure的頂部。

在開發(fā)Pure時(shí)，我們的目標(biāo)之一是使其非?？蓴U(kuò)展延伸。通過包括Pure和在其上編寫一些CSS，您可以確保您的網(wǎng)站或應(yīng)用程序在瀏覽器之間工作，同時(shí)看起來(lái)真正獨(dú)特。最重要的是，您的CSS文件大小將保持微不足道，對(duì)于移動(dòng)用戶和其他連接速度較慢的用戶來(lái)說，這是一件好事。

想快點(diǎn)開始嗎？ 看看我們建立在Pure之上的一些布局。

風(fēng)格指南

基于SMACSS

Pure被分解成一組響應(yīng)模塊。 從一開始，我們采用SMACSS作為編寫我們的CSS的慣例。對(duì)于那些剛接觸SMACSS的用戶，您應(yīng)該快速閱讀，特別是模塊規(guī)則部分。

類名稱約定

Pure中的一個(gè)約定是每個(gè)模塊都有一個(gè)標(biāo)準(zhǔn)的類名，用于模塊中的常規(guī)規(guī)則，然后為特定子模塊的特定演示規(guī)則提供額外的類名。 所有類以pure-前綴開頭，以防止沖突。另外，我們盡量不要有表演類的名字。而不是打電話pure-form-horizontal，我們更喜歡稱呼它pure-form-aligned。 這樣可以防止類名和樣式之間的緊密耦合，這有利于可維護(hù)性。

例如，讓我們考慮堆疊表單的HTML和CSS ：

堆疊形式：HTML

一種堆疊形式通過添加兩個(gè)類名創(chuàng)建pure-form和pure-form-stacked。

<form class="pure-form pure-form-stacked">
    ...
</form>

堆疊形式：CSS

兩個(gè)類別名稱用于不同的目的。一個(gè)用作通用選擇器來(lái)分組所有表單的公共規(guī)則，而另一個(gè)定義堆疊表單的特定規(guī)則。

/*
Standard rules that all Pure Forms have. This includes rules for
styling .pure-form <inputs>, <fieldsets>, and <legends>, as well as layout
rules such as vertical alignments.
*/
.pure-form { ... }

/*
Specific rules that apply to stacked forms. This includes rules
such as taking child <input> elements and making them display: block
for the stacked effect.
*/
.pure-form-stacked  { ... }

擴(kuò)展Pure

當(dāng)您擴(kuò)展Pure時(shí)，我們建議您遵循此慣例。例如，如果要?jiǎng)?chuàng)建一種新的表單，您的HTML和CSS應(yīng)該如下所示：

<form class="form-custom pure-form">
    ...
</form>

/* add your custom styles in this selector */
.form-custom { ... }

您可能希望做的一個(gè)常見任務(wù)是使樣式按鈕變得不同。 該Pure按鈕文檔對(duì)如何通過采用這種模塊化的架構(gòu)創(chuàng)建自定義尺寸和樣式的按鈕一些例子。

Pure+Bootstrap+ JavaScript

Pure與其他圖書館一起玩，包括Bootstrap和jQuery。作為開發(fā)人員，您可以將Pure作為基礎(chǔ)CSS框架，然后包括您的應(yīng)用程序可能需要的特定Bootstrap或jQuery模塊。這樣做有幾個(gè)好處：

• 您的網(wǎng)站或webapp的CSS將會(huì)小得多 - 在某些情況下可能會(huì)減小5 倍！
• 您將獲得Pure的簡(jiǎn)約外觀，輕松構(gòu)建。不需要覆蓋樣式！
• 您可以利用Bootstrap的生態(tài)系統(tǒng)，而無(wú)需引入一個(gè)單一的Bootstrap CSS文件。

例如，這是一個(gè)Bootstrap模態(tài)。 它是通過包含Pure CSS Rollup創(chuàng)建的，并且只是添加了Bootstrap modal.css以及jQuery插件。