extjs 添加css样式_自适应CSS模块,Pure.css让Web样式更加灵活
介绍Pure.css是一组小型的自适应CSS模块,可以在每个Web项目中使用。Pure以Normalize.css为基础,并提供native HTML元素以及最常见的UI组件的布局和样式,考虑到移动设备,Pure具有开箱即用的响应能力,因此元素在所有屏幕尺寸上都看起来不错。PS:Normalize.css使浏览器更一致地渲染所有元素,并符合现代标准。它只针对需要规范化的样式。Githubhttps
介绍
Pure.css是一组小型的自适应CSS模块,可以在每个Web项目中使用。Pure以Normalize.css为基础,并提供native HTML元素以及最常见的UI组件的布局和样式,考虑到移动设备,Pure具有开箱即用的响应能力,因此元素在所有屏幕尺寸上都看起来不错。
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类名添加到任何
元素。如下
A compact inline form Remember me Sign in
还有其他常见类型表单,本文不过多介绍
按钮
表格
要设置HTML表的样式,请添加pure-table类名。此类为表元素添加了填充和边框,并强调了标题。
菜单
- 垂直菜单
默认情况下,菜单是垂直的。
- 水平菜单
要创建水平菜单,请添加pure-menu-horizontal类名称。
总结
本文只介绍了部分有关于Pure的内容,详细的介绍可以Github以及官方提供的详细内容和使用指南!
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)