一组小型的自适应CSS模块,可以在每个Web项目中使用——Pure

原创 最美分享Coder 2019-12-18 20:05:48

介绍

Pure.css是一组小型的自适应CSS模块,可以在每个Web项目中使用。Pure以Normalize.css为基础,并提供native HTML元素以及最常见的UI组件的布局和样式,考虑到移动设备,Pure具有开箱即用的响应能力,因此元素在所有屏幕尺寸上都看起来不错。

<link rel="stylesheet" href="./pure-min.css"  />

PS:Normalize.css使浏览器更一致地渲染所有元素,并符合现代标准。它只针对需要规范化的样式。



一组小型的自适应CSS模块,可以在每个Web项目中使用——Pure



Github

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

相关特性

  • 可以根据需求进行定制的响应式网格。
  • 建立在Normalize.css上的坚实基础,可解决跨浏览器的兼容性问题。
  • 与<a>和<button>元素一起使用的样式一致的按钮。
  • 垂直和水平菜单的样式,包括对下拉菜单的支持。
  • 表格对齐方式在所有屏幕尺寸上看起来都很好。
  • 各种常见的表格样式。
  • 极简的外观,易于定制。
  • 默认情况下是响应式的,具有非响应式配置选项。
  • 极小的体积:缩小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类名添加到任何<form>元素。如下

    <form class="pure-form">
    <fieldset>
    <legend>A compact inline form</legend>

    <input type="email" placeholder="Email">
    <input type="password" placeholder="Password">

    <label for="remember">
    <input id="remember" type="checkbox"> Remember me
    </label>

    <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
    </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以及官方提供的详细内容和使用指南!