12.18 一組小型的自適應CSS模塊,可以在每個Web項目中使用——Pure

介紹

Pure.css是一組小型的自適應CSS模塊,可以在每個Web項目中使用。Pure以Normalize.css為基礎,並提供native HTML元素以及最常見的UI組件的佈局和樣式,考慮到移動設備,Pure具有開箱即用的響應能力,因此元素在所有屏幕尺寸上都看起來不錯。

<link>

PS:Normalize.css使瀏覽器更一致地渲染所有元素,並符合現代標準。它只針對需要規範化的樣式。



Github

https://github.com/pure-css/pure

相關特性

可以根據需求進行定製的響應式網格。建立在Normalize.css上的堅實基礎,可解決跨瀏覽器的兼容性問題。與垂直和水平菜單的樣式,包括對下拉菜單的支持。表格對齊方式在所有屏幕尺寸上看起來都很好。各種常見的表格樣式。極簡的外觀,易於定製。默認情況下是響應式的,具有非響應式配置選項。極小的體積:縮小4.5KB + gzip

兼容性

IE 8+Latest Stable: Firefox, Chrome, SafariiOS 6-8Android 4.4+

佈局

通過使用Grid,Menu等,可以輕鬆創建適用於所有屏幕尺寸的精美響應式佈局。




Pure的設計目標是可以在每個Web項目中使用它

定製化

與其他框架不同,Pure的設計不受限制,最小且扁平。添加新的CSS規則比覆蓋現有規則要容易得多。通過添加幾行CSS,可以自定義Pure的外觀以與你的Web項目一起使用。




表單

以下創建默認的內聯表單,將pure-form類名添加到任何




還有其他常見類型表單,本文不過多介紹

按鈕


表格

要設置HTML表的樣式,請添加pure-table類名。此類為表元素添加了填充和邊框,並強調了標題。





菜單

垂直菜單

默認情況下,菜單是垂直的。


水平菜單

要創建水平菜單,請添加pure-menu-horizontal類名稱。


總結

本文只介紹了部分有關於Pure的內容,詳細的介紹可以Github以及官方提供的詳細內容和使用指南!