前端框架开发之Niu框架——从零学框架的小白
起因:
从2018年6月一直到我重新提笔,6年时间。这六年时间,我见证了IT的兴衰,见证了小众框架LayUI框架的重新更新,见证了vue、angular、react等框架的主流。----博客园老牛大讲堂
初衷:
今年我突发灵感,想要设计一个网站,作为程序员却"提笔忘字",就连最基本的css也变得陌生,我网上翻找大量的网站,想要找到一款,像我这种半吊子也能用的网站(即懂一些代码原理,却早已经忘了底层代码怎么写),事实却让我失望,没有一款适合我。layui框架符合拿来即用,可有些组件根本就没有。请原谅我,学习vue等框架对我来说太难了,我就想要一个好看的页面,便携通用的组件。我求索无果,所以在想,为什么不自己开发一个开源的网站,让大众成为贡献者,一起参与到开发中来。
Niu框架由然而生:----博客园老牛大讲堂
从头编写一个框架,说真的特别难,万里长征,光是选择哪一种布局模式,让我研究了一个星期,特别是对于我这样一个不碰代码六年的小白。最终让我决定用flex布局,去开发一个框架。随后我将不断完善框架,最终形成一个小众的开源框架。
废话不多说,上代码:----博客园老牛大讲堂
开发一个框架,第一步,一定要初始化浏览器的各种默认参数,别问我一个小白怎么知道的,当后期开发发现总是栅格对不齐的时候,一点点抠出来的。
* { margin: 0; padding: 0; box-sizing: border-box; /* 可以添加这个属性以确保盒模型包含border和padding */ }
第二步:定义公共属性,例如栅格水槽、圆角参数、niu-container,开始确定flex布局+百分比的方式,开始开发。有大神知道gap水槽为什么总在组件的右边,生层次原理吗。----博客园老牛大讲堂
/*第二部分: 定义flex */ /* 公共元素 */ :root { --gap: 8px;/* 设置栅格槽之间间距 */ --border-radius: 5px;/* 设置栅格圆角数值 */ } .niu-container { width: 100%; display: flex; flex-wrap: wrap; gap: var(--gap); flex-flow: row wrap; padding-left: calc(var(--gap));/* 设置左边有一个边距 这里,下面一张图会解释为什么要设置一个左边距 */ }
注意如果没有左边距,浏览器自带的样式,会直接覆盖掉。右侧暂时还没发现这个问题(欢迎大家留言,告诉我右边需要留边距吗?)
第三步:设置百分比。请注意:这里我让每一个元素都减少了一个水槽的宽度(水槽就是两个元素之间的距离),这个是我开发框架的亮点,有兴趣的研究一下原理,欢迎提出改机意见,前提得简单点,复杂我看不懂。----博客园老牛大讲堂
niu-col-1 { width: calc((100% / 24) * 1 - var(--gap)); } .niu-col-2 { width: calc((100% / 24) * 2 - var(--gap)); } .niu-col-3 { width: calc((100% / 24) * 3 - var(--gap)); } .niu-col-4 { width: calc((100% / 24) * 4 - var(--gap)); } .niu-col-5 { width: calc((100% / 24) * 5 - var(--gap)); } .niu-col-6 { width: calc((100% / 24) * 6 - var(--gap)); } .niu-col-7 { width: calc((100% / 24) * 7 - var(--gap)); } .niu-col-8 { width: calc((100% / 24) * 8 - var(--gap)); } .niu-col-9 { width: calc((100% / 24) * 9 - var(--gap)); } .niu-col-10 { width: calc((100% / 24) * 10 - var(--gap)); } .niu-col-11 { width: calc((100% / 24) * 11 - var(--gap)); } .niu-col-12 { width: calc((100% / 24) * 12 - var(--gap)); } .niu-col-13 { width: calc((100% / 24) * 13 - var(--gap)); } .niu-col-14 { width: calc((100% / 24) * 14 - var(--gap)); } .niu-col-15 { width: calc((100% / 24) * 15 - var(--gap)); } .niu-col-16 { width: calc((100% / 24) * 16 - var(--gap)); } .niu-col-17 { width: calc((100% / 24) * 17 - var(--gap)); } .niu-col-18 { width: calc((100% / 24) * 18 - var(--gap)); } .niu-col-19 { width: calc((100% / 24) * 19 - var(--gap)); } .niu-col-20 { width: calc((100% / 24) * 20 - var(--gap)); } .niu-col-21 { width: calc((100% / 24) * 21 - var(--gap)) ; } .niu-col-22 { width: calc((100% / 24) * 22 - var(--gap)); } .niu-col-23 { width: calc((100% / 24) * 23 - var(--gap)); } .niu-col-24 { width: calc((100% / 24) * 24 - var(--gap)); }
下面是html应用结果:经过测试没有问题。----博客园老牛大讲堂
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="./css/niu.css"> </head> <body> <div class="niu-container"> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1"niu-bg-green>1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green ">1/24</div> <div class="niu-col-1 niu-bg-green ">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> <div class="niu-col-1 niu-bg-green">1/24</div> </div> </body> </html>
运行结果:不管屏幕多窄,元素总能保持在一行。欢迎各位大神,前来指正,我将不断改进我的代码----博客园老牛大讲堂