PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 制作自己的一个UI框架-2019年9月11日

制作自己的一个UI框架-2019年9月11日

思杰的博客
思杰的博客 原创
2019年09月14日 20:21:46 1204浏览

        我们在日常开发中,一般的过程是写了html代码之后,再给里面的元素加上css样式,这个开发如果是个人的话,是没有什么问题的。但是如果是一个团队去做一个项目,就需要一定的规范,如果不同的人写的样式不一样,就会导致开发出来的网站字体大小和边框结构都会不一样,对于项目的开发和维护都是不好的。

        因此,我们是有必要给自己团队设计一个UI框架的。提前将经常要用到的一些css样式,写到css样式表里面,并且给他加上固定的类名。这样在开发过程中,我们直接给元素加上类名就可以完成他的样式,这样开发是更加规范的。

        在做这个作业的时候,因为我之前并没有接触过这样的UI框架,虽然原理是懂的,但是要设计自己的一个UI框架,却感觉无从下手,因为自己的开发经验非常欠缺。所以我觉得这个UI框架是需要长期的经验积累和团队的配合,才能知道到底哪些代码是经常被复用的。

        所以这个作业我做的非常粗糙,大概就是做了一些最基本的样式,然后做了一个手册的首页出来,具体的内容没时间去完善,因为我想把更多的时间放到后面模仿站上面去。

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>szekitUI用户手册</title>
    <link rel="stylesheet" href="static/css/style.css">
</head>

<body class="szekit-ftsize">
    <!-- 头部 -->
    <div class="szekit-bgcgrey szekit-p10">
        <span class="szekit-ftorange szekit-ftbold szekit-h1">szekit UI</span>
        <span class="szekit-h1 szekit-ftlightgrey">用户参考手册</span>
    </div>
    <div class="szekit-flex">
        <!-- 左边 -->
        <div class="szekit-left szekit-pt30">
            <ul class="szekit-ul">
                <li>
                    前端基础
                </li>
                <ul>
                    <li>
                        <a class="szekit-a" href="./welcome.html" target="content">框架安装</a></li>
                    <li>
                        <a class="szekit-a" href="" target="content">页面结构</a></li>
                    <li>
                        <a class="szekit-a" href="" target="content">常用标签</a></li>
                    <li>
                        <a class="szekit-a" href="" target="content">CSS选择器</a></li>
                </ul>

            </ul>
        </div>
        <!-- 主体 -->
        <div class="szekit-right">
            <iframe class="szekit-w100 szekit-h800" src="./welcome.html" frameborder="0" name="content"></iframe>
        </div>
    </div>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


这个是字体库的一些样式

实例

.szekit-ftsize {
    font-size: 14px
}

.szekit-h2 {
    font-size: 2rem;
    color: lightblue;
    font-weight: bold;
}

.szekit-a {
    text-decoration: none;
    color: black;
}

.szekit-ftorange {
    color: orange;
}

.szekit-ftlightgrey {
    color: lightgrey;
}

.szekit-h1 {
    font-size: 1.5rem;
}

.szekit-ftbold {
    font-weight: bold;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


这个是layout的一些样式

实例

.szekit-bgcgrey {
    background-color: grey;
}

.szekit-bgclightgrey {
    background-color: lightgrey;
}

.szekit-ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.szekit-p10 {
    padding: 10px;
}

.szekit-right {
    flex: 1;
}

.szekit-left {
    width: 200px;
}

.szekit-flex {
    display: flex;
}

.szekit-pt10 {
    padding-top: 10px;
}

.szekit-pt20 {
    padding-top: 20px;
}

.szekit-pt30 {
    padding-top: 30px;
}

.szekit-w100 {
    width: 100%;
}

.szekit-h800 {
    min-height: 800px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

微信截图_20190914201645.png

自己设计了才知道这个ui库要想设计的全面实用的话,需要很多精力,命名的规范,还有常用的css样式,而且要做到尽量一个类名的简化,尽量不能参太多样式在里面。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议