Pure延伸

建立在Pure的頂部。

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

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

風格指南

基于SMACSS

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

類名稱約定

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

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

堆疊形式：HTML

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

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

堆疊形式：CSS

兩個類別名稱用于不同的目的。一個用作通用選擇器來分組所有表單的公共規(guī)則，而另一個定義堆疊表單的特定規(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  { ... }

擴展Pure

當您擴展Pure時，我們建議您遵循此慣例。例如，如果要創(chuàng)建一種新的表單，您的HTML和CSS應該如下所示：

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

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

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

Pure+Bootstrap+ JavaScript

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

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

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