江苏龙网

  1. 主页 > 生活百科 > >

如何编写轻量级 CSS 框架( 四 )

框架css


这个栅格并没有响应式，只有一个断点，小屏手机上的话所有栅格都会单行显示 。一方面，这样的设计符合大多数轻量级框架的初衷；另一方面，我打算再写一个针对移动端的框架，毕竟 Web 端和移动端的风格差距较大，按照业务需求分开会更好 。不过最近我更改了源文件，为响应式预留了扩展方式 。
 
表单演示示例: https://nzbin.github.io/snack/#forms
在上面的命名策略中已经展示了 Snack 表单的基本结构，基本表单除了结构之外，样式上并没有太多可以讨论的地方 。在此说一下表单中checkbox的结构调整，先看一下 Bootstrap 的checkbox结构 。
<!-- checkbox --><div class="checkbox"> <label> <input type="checkbox" value=https://www.isolves.com/it/cxkf/yy/CSS2/2019-07-23/""> checkbox </label></div><!-- checkbox-inline --><label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value=https://www.isolves.com/it/cxkf/yy/CSS2/2019-07-23/"option1"> checkbox</label>以上两种结构不能有偏差，稍有偏差样式就会错乱，灵活性较差 。其次我在想两种结构能不能整合在一起，增强灵活性 。想了很久，找到了方法，Snack 结构如下：
<!-- checkbox --><div class="checkbox"> <label> <input type="checkbox" value=https://www.isolves.com/it/cxkf/yy/CSS2/2019-07-23/""> checkbox </label></div><!-- checkbox-inline --><div class="checkbox inline"> <label> <input type="checkbox" value=https://www.isolves.com/it/cxkf/yy/CSS2/2019-07-23/""> checkbox </label></div>也可以将样式直接加到label标签上 。另外，如果将input移到label标签外也是没有问题的，如下：
<!-- checkbox --><div class="checkbox"> <input type="checkbox" id="checkbox1" value=https://www.isolves.com/it/cxkf/yy/CSS2/2019-07-23/""> <label for="checkbox1">checkbox</label></div><!-- checkbox-inline --><div class="checkbox inline"> <input type="checkbox" id="inlineCheckbox1" value=https://www.isolves.com/it/cxkf/yy/CSS2/2019-07-23/""> <label for="inlineCheckbox1">checkbox</label></div>这种结构有一个好处，就是可以自定义input样式，详见下面的 CodePen 的scss文件 。radio的设置和checkBox是一样的 。
 
辅助类辅助类是一系列类的组合，比如字号大小、颜色值、padding、margin 以及左右浮动等 。在一些 Bootstrap 搭建的后台管理系统中尤为常见，这样布局起来就会比较灵活 。以下是一个边框的辅助类 。
.border-left-right { border-left: 1px solid #eee; border-right: 1px solid #eee;}.border-top-bottom { border-top: 1px solid #eee; border-bottom: 1px solid #eee;}.border-left { border-left: 1px solid #eee;}.border-right { border-right: 1px solid #eee;}.border-top { border-top: 1px solid #eee;}.border-bottom { border-bottom: 1px solid #eee;}关于助类的更多内容可以搜索阅读这篇文章《如何编写通用的 Helper Class》
 
盒组件演示示例: https://nzbin.github.io/snack/#boxes
盒组件是我整个框架中比较满意的一个模块 。之所以要做这个组件主要是觉得 Bootstrap 的 list 组件和 panel 组件可以整合到一起 。当然，这样的做法有利有弊 。盒组件在后台管理系统的布局中表现的尤为突出 。
其命名也是多种多样，比如 panel、widget、portlet、ibox、card等，每个后台管理系统框架都会对这个组件进行深度开发，可见其在布局上的重要性 。给一个组件起一个合适的类名也很关键，想了很久，最后用了box的类名，当然一般情况下尽量不要用box，因为这个类名比较宽泛 。下面的 CodePen 模拟了 Bootstrap 的 list 及 panel 组件 。
 
主题给框架添加主题是一件有趣的事情 。Snack 的默认主题是白色，因为喜欢黑色，最后添加了暗夜主题，编写主题只需改变组件的颜色 。演示文档 的页面用了暗夜主题，点击上方的红色按钮可以切换主题 。


推荐阅读


上一篇：加湿器需要放在高处吗 加湿器不能放在什么地方

下一篇：电磁炉加热为什么一阵一阵的 电磁炉为什么一阵一阵的烧