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

介紹

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

<link>

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



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



Github

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

相關特性

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

  • IE 8+
  • Latest Stable: Firefox, Chrome, Safari
  • iOS 6-8
  • Android 4.4+
  • 佈局

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




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



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

    定製化

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




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



    表單

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




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



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

    按鈕


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

    表格

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




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


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



    菜單

    • 垂直菜單

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


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

    • 水平菜單

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


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

    總結

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


    分享到:


    相關文章: