如何编写一个轻量级的CSS框架

简单来说，我把自己写的框架命名为Snack，原意是“快餐”，主要是简单的意思。虽然是轻量级框架，但我不想用轻量级做噱头。毕竟重量轻就意味着某些功能的缺失和省略。这个框架的意义更多的是交流和学习。我尝试借鉴其他框架的优点，尽可能简化类名，尝试探索一些更通用的组件。

大多数轻量级框架只是CSS框架，不涉及JS，主要用于网页的布局。之所以打算自己写框架，是因为工作中有太多重复的东西，而这些分散的组件可以通过框架很好的整合在一起。另一方面，写一个小项目并学习一些新的东西是很有趣的。

编译框架是我去年就想做的事情，但是因为时间的原因，花了很长时间。在写框架之初，我陷入了一个误区。我打算设计一些前卫的风格，比如立体按钮，浮动面板，比如下图的风格。

https://dribbble.com/shots/524593-Soft-Interface-Black

但在断断续续写框架的过程中，我逐渐找到了方向。上图中的样式只是一种皮肤，所以我在写框架之初不应该把重点放在它上面。当然，好的UI设计也是框架成功的一部分。

模块划分

编写框架的第一步是确定框架应该包含哪些模块。因为是轻量级框架，模块当然没有重量级框架全面，只有一些核心组件。通过对比一些轻量级的框架和工作总结，常用的模块有网格、媒体、按钮、排版、表格、表格、面板和辅助工具。

在这些常用的组件中，网格、窗体、面板是需要重点关注的，媒体组件也很重要，但是空的自由发挥并不大，所以我直接用了Bootstrap的媒体组件。

命名策略

首先是类命名的层次和结构。对我来说，班级命名一直是一个难题。刚开始工作的时候，为了起一个家喻户晓、言简意赅的班名，我总是挠头挠耳。我在写框架的时候尽量避免和Bootstrap的类名重叠，但是无法完全避免。对比其他框架，会发现这种情况是不可避免的。毕竟类名会有一定的规律性和层次性。在这一点上，我更喜欢自举的风格。和下面Bootstrap的形式比较一下。

Bootstrap的表单结构和类名

-格式-水平

– div.form-group

-标签.控件-标签

-输入.表单-控制

零食的形态结构和分类名称

-格式-水平

– div.form-group

-标签.控件-标签

-输入.表单-控制

总的来说，这个表单结构还不错，只是有些地方需要修改。有些框架不给input等元素起类名，而是给父元素起一个类名。我个人对这种做法表示怀疑。不给类名会降低框架编写和使用的灵活性。

第二个策略是组件的装饰。例如，按钮和面板有多种上下文(颜色、大小等。).在这一点上，我在写框架的时候做了一些简化，风格有些语义化。

& ltbutton class = & quotbtn主要& quot& gt主要& lt/button & gt；& lttable class = & quot带条纹边框的表格& quot& gt…& lt/table & gt；& ltdiv class = & quot盒主& quot& gt…& lt/div & gt；

修改类的策略是个见仁见智的问题。至于哪种方法更好，还需要在框架的编写过程中探索。

网格系统

例如:https://nzbin.github.io/snack/#grid

为了具有灵活的布局，任何框架都必须基于网格。我前面提到Bootstrap的本质是网格系统。网格系统的编译需要使用预处理器的循环功能，否则会做不必要的重复工作。我遇到过一些用Less写的轻量级框架，但是他们的网格系统不使用循环。这样的源代码有点突兀。可能作者对Less的循环函数不熟悉。当然Less本身就有弱循环，用起来很别扭。关于预处理程序的循环，请参考我之前翻译的CSS预处理程序中的循环，详细比较三个流行的预处理程序的循环函数。简单来说，Less没有循环，但是可以通过递归实现，而Sass和Stylus有真循环。

我写的网格系统也默认12列，但是后来发现12列网格缺少最常用的列宽(比如10%、20%、30%等。).比如下面CodePen展示的例子，用12列网格是完成不了的，所以我又加了一个10列网格，但是还是不能面面俱到，但是已经很灵活了。

查看钢笔点心-网格点击预览。

光栅的使用与引导相同。除了12列栅格。应将cols- class添加到10列栅格和均匀共享栅格中。

& lt！-默认网格是12列，所以省略COLS-12->:& lt；div class = & quotrow & quot& gt

& ltdiv class = & quot列5 & quot& gt& lt/div & gt；

& ltdiv class = & quotcol-7&quot& gt& lt/div & gt；& lt/div & gt；& lt！-10列网格->:& lt；div class = & quot第10列& quot& gt

& ltdiv class = & quot列3 & quot& gt& lt/div & gt；

& ltdiv class = & quotcol-7&quot& gt& lt/div & gt；& lt/div & gt；

这个网格没有响应，只有一个断点，所有的网格都会在小屏手机上单行显示。一方面，这种设计符合大多数轻量级框架的初衷；另一方面，我要为移动写另一个框架。毕竟Web和移动的风格差别很大，根据业务需求分开比较好。但是，最近我更改了源文件，为响应保留了一个扩展方法。

表单/表格

例如:https://nzbin.github.io/snack/#forms

小吃形式的基本结构已经在上面的命名策略中显示出来了。除了结构，基本形式的风格没有太多可讨论的。在这里，我们来谈谈表单中复选框的结构调整。我们先来看看Bootstrap的复选框结构。

& lt！-复选框-& gt；& ltdiv class = & quot复选框& quot& gt

& lt标签& gt

& lt输入类型= & quot复选框& quotvalue = & quot”& gt复选框& lt/label & gt；& lt/div & gt；& lt！-复选框-内嵌-& gt；& ltlabel class = & quot复选框-内嵌& quot& gt

& lt输入类型= & quot复选框& quotid = & quotinlineCheckbox1 & quotvalue = & quot选项& quot& gt复选框& lt/label & gt；

以上两种结构应该没有偏差。稍有偏差，风格就会紊乱，灵活性差。第二，我想知道是否可以将这两种结构结合起来，以增加灵活性。想了很久，找到了一个办法。零食结构如下:

& lt！-复选框-& gt；& ltdiv class = & quot复选框& quot& gt

& lt标签& gt

& lt输入类型= & quot复选框& quotvalue = & quot”& gt复选框& lt/label & gt；& lt/div & gt；& lt！-复选框-内嵌-& gt；& ltdiv class = & quot内嵌复选框& quot& gt

& lt标签& gt

& lt输入类型= & quot复选框& quotvalue = & quot”& gt复选框& lt/label & gt；& lt/div & gt；

您也可以直接向标签添加样式。此外，如果将输入移出标签label，也不会有问题，如下所示:

& lt！-复选框-& gt；& ltdiv class = & quot复选框& quot& gt

& lt输入类型= & quot复选框& quotid = & quot复选框& quotvalue = & quot”& gt

& lt= & quot的标签复选框& quot& gt复选框& lt/label & gt；& lt/div & gt；& lt！-复选框-内嵌-& gt；& ltdiv class = & quot内嵌复选框& quot& gt

& lt输入类型= & quot复选框& quotid = & quotinlineCheckbox1 & quotvalue = & quot”& gt

& lt= & quot的标签inlineCheckbox1 & quot& gt复选框& lt/label & gt；& lt/div & gt；

这种结构的一个优点是可以定制输入风格。详情见下面CodePen的scss文件。单选按钮的设置与复选框的设置相同。

查看钢笔点心-表单点击预览。

辅助类

类是一系列类的组合，如字体大小、颜色值、填充、边距、左右浮动等。在一些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；

}

有关辅助类的更多信息，请阅读这篇文章“如何编写通用助手类”

盒子组件

例如:https://nzbin.github.io/snack/#boxes

Box是我整个框架中比较满意的模块。做这个组件的主要原因是Bootstrap的list组件和panel组件可以集成在一起。当然，这种方式有利有弊。组件在后台管理系统的布局中尤为突出。其名称也是五花八门，比如面板、小部件、portlet、ibox、卡片等。每个后台管理系统框架都会深度开发这个组件，可见其在布局上的重要性。给组件一个合适的类名也很重要。想了很久，最后还是用了box的类名。当然，一般情况下，我尽量不使用box，因为这个类名比较宽泛。下面的代码笔模拟了Bootstrap的列表和面板组件。

看到笔快餐盒点击预览。

主题

给框架添加主题很有趣。零食默认的主题是白色，因为喜欢黑色。最后加入暗夜主题。写一个主题只需要改变组件的颜色。演示文稿的页面使用了黑夜的主题。点击顶部的红色按钮来切换主题。

网页设计上框架的高度怎么设置？

网页设计上框架高度设置

可以使用css来定义宽度和高度

1.src:表示的是你引入的哪个文件

2.style里面的是你要控制的哪些属性

3.比如宽度width，高度height;分别设置你需要的值就可以了

<iframe src ="/index.html" style="width:400px;height:300px"></iframe>

html+css前端框架，跟，原生的有什么区别？前端框架有什么好处吗？

1.跟原生的区别就是框架已经搭建好了基本的骨架，你只需往里面添加自己的东西就可以了，原生就是什么都没有，骨架和具体的东西都要你自己来完成。

前者是为了方便用户的使用和二次开发，后者主要是考验用户的基本功，对这些东西的底层实现了解程度有多少。2.可以简单的理解成是：使用广泛的前端开发套件，可以帮助你快速的网站。前段框架的好处：对于互联网的产品而言，前端用户体验往往决定了一款产品的竞争力和吸引力;而对于前端工程师来说，考虑的问题更为复杂，他们既要为网站上提供的产品和服务实现一流的Web页面、优化代码，保证体验的最佳，更要考虑与市面上各大浏览器的兼容性，还需顾及Web前端表现层和前后端交互的架构，以及模块化、通用类库、框架编写等一系列问题，由此提升前端开发的效率，降低开发成本和周期。

html中如何在主框架中链接页面？

可以添加<a>标签来链接页面

html怎么在框架中弄无序列表？

通过ol标签和li标签来设置

html灰色透明背景怎么制作？

1.

首先先需要建立框架,一个作为底部的盒子图片,一个作为灰色背景的p盒子

2.

可以对里面的p和图片分别进行修饰处理

3.

然后需要对最大的盒子进行相对定位,然后对作为黑色背景的盒子做绝对定位

4.

当我们只是定位后,没有设置具体的位置的时候,图片在上, 然后下面就是黑盒子