前端框架开发之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>

  

运行结果:不管屏幕多窄,元素总能保持在一行。欢迎各位大神,前来指正,我将不断改进我的代码----博客园老牛大讲堂

 

posted @ 2024-05-05 15:40  老牛大讲堂  阅读(33)  评论(0编辑  收藏  举报