为了账号安全,请及时绑定邮箱和手机立即绑定
慕课专栏

目录

索引目录

手把手带你打造自己的UI样式库

原价 ¥ 78.00

立即订阅
01 开篇-为什么学习这门专栏?
更新时间:2019-09-23 10:13:05
生活永远不像我们想像的那样好,但也不会像我们想像的那样糟。

——莫泊桑

Hello,大家好,我是 Rosen。看过我视频课的同学,对开篇这句问候应该会很熟悉。之前在慕课网上一共发了两个基于前后端分离的视频课程,一个是《手把手从 0 打造电商平台 - 前端开发》, 这个课程基本是原生开发,使用了 Webpack 做代码的模块化处理和打包优化,实现了一套电商网站的用户端前端。另外一个课程《React 从零打造企业级电商后台管理系统》,这个课程使用了前端 React 框架,实现了一套电商的后台管理系统。

做完这两个视频课程以后,我就一直在做自己的项目了。正好我的项目里需要做一套自己的 UI 框架,在这个框架成型以后,就打算把它分享给同学们。希望同学们通过这个课程能了解开发一个定制化 UI 框架的思路和方法,并同时掌握里面涉及的 CSS 相关的知识。框架的名字叫 “推推 UI”,起的比较随意,是跟着公司命名的。这门专栏课程就是带着同学们了解下这么一个 UI 框架的整个开发过程。

参与过前端开发的同学,应该都写过 CSS,也应该都用过像 Bootstrap、Ant-Design 之类的样式库或组件库。在使用这些组件库的时候,也应该会发现用这东西写样式太省心了,按着文档给 HTML 上加几个 class,样式就神奇的出来了。“唉,这个组件不错”,“咦,这么简单”,“鹅妹子嘤”…… 使用一些优秀的框架的时候经常会有这样的感叹。

习惯了用这些框架开发以后还会有一种错觉,就是我的 CSS 水平不错了,还能拿出几个挺像样的页面显摆显摆。但实际上,这通常是错觉,当遇到现有 UI 框架满足不了的需求时,自己写起样式来又会感觉特别吃力。这时候又会陷入另一个极端,开始思考 “我怎么突然不会了?”,“写样式怎么这么难?”,“这需求有问题吧?”。

所以我就准备做这样一个专栏,带着大家从头去写一个 UI 框架。从根本上了解框架怎么设计、CSS 样式怎么写、文件结构怎么组织等等。让同学们亲手开发一个 UI 框架,加深自己对框架和对 CSS 的了解,提高自己开发样式的能力。有了这些能力,别人的框架想怎么用想怎么改都不是问题了,有需要的时候用上自己的框架也完全没问题。

这次专栏要实现的是一个移动端网站的样式框架。项目核心部分只使用了 HTML 和 CSS,尽量避开了其他技术栈(Nodejs、打包工具、JS 等),目的是让同学们把注意力集中在样式的开发上。不过在最后的部分,也会对这些周边的技术有一些应用,让同学们知道这个 UI 框架怎么和其他技术做对接。

考虑到这次课程的知识点比较分散,也尽量减弱了上下文的依赖,可以利用碎片化的时间来学习,所以这次就以专栏的形式呈现给大家。整个课程的布局基本是按着开发顺序进行的,总共分了七章,下面分别介绍下这几章内容:

第一章,开山。作为整个项目的开篇,这部分主要是理论性的东西,其中包括这个课程的基本情况,关于 UI 框架的理解,和 UI 框架设计上的内容。

第二章,磨剑。在动代码之前,先要打好基础,有一些必要的 CSS 和 HTML 基础知识点要提前了解。这一章就是要归纳一下这些知识点,以便同学们进行后面章节的学习。这一章会包含 CSS 的基础知识和 CSS 里的各种规范。

第三章,列阵。这一章开始进入正题,在这一章里我们的任务是把移动端样式的基础布局做好,包括 CSS 规范里要求的基本内容、整体的页面布局和一些公共的样式等,这是做一个 UI 框架的基础。

第四章,操练。这一章里我们要开发移动端里一些常用的组件的样式,比如网格布局、列表、菜单、信息提示和文本处理等。这章的内容会比较多,大部分都是技巧类的应用,这章完成以后,我们的框架就能大体成型了。

第五章,集结。经过前面的磨剑、列阵、操练,我们的框架已经有了雏形,但真正把分散的 Demo 变成一个能用的 UI 框架,还是要把它们整理起来。这一章就是要讲一下怎么把之前分散的 DEMO 整合,并介绍这个框架怎么和其他的技术去结合。

第六章,实战。经过前面实现各种 DEMO,再加上整合,整个 UI 框架已经完事了。到这我们就要拿出来写几个页面来试试手了,看用上框架,开发页面会不会很爽。

第七章,复盘。到这整个课程就真的要结束了,这章煽煽情,做个总结,来个致谢,也就差不多了。

我在这里说一下建议大家学习这门专栏的方法:

做到下面 4 项:夯实基础、亲自实现、理解设计思路、自行扩展。

夯实基础

根据刚才的介绍,应该能知道本专栏课程是按着实战项目走的,课程里不能对 HTML 和 CSS 的知识点做到完全的覆盖。所以建议在学习这个课程的时候,如果是对样式开发还没什么概念的同学,最好能先去熟悉一下最最基础的知识点,最起码要知道每个属性是做什么用的,这样专栏里讲到了还可以对知识点加深理解。这里推荐大家用 w3school.com.cn,把里面 HTML、HTML5、CSS、CSS3 这几个分类下的基础知识都过一遍,最好能把里面的示例也跟着做一下。

亲自实现

在这个课程里面会实现很多 UI 组件,这些组件的开发过程中也会对应很多的知识点。同学们在学习的时候一定要把涉及的知识点理解透,并把每一个 DEMO 也都拿出来试一试,最好是能做到看完以后自己再默写一遍。如果只是看的话,等看完也基本忘的差不多了。

理解设计思路

这个课程中,和知识点一样重要的就是一个 UI 框架的设计思路了。设计思路不一定是在开发 UI 框架中才有用。理解以后,我们在平时写页面样式的时候也一样可以借鉴。

自行扩展

这个项目里做的是一些比较常用的组件,同学们在学会开发方法后,也可以自己对项目做扩展,开发自己需要的组件。

应该有的收获

学完这个课程以后,应该有如下几方面的收获:

  1. 基础知识。通过学习这个课程,要把里面涉及的知识点都学会。这部分收获是比较明确的,我在课程的最后也会列出所涉及到的知识点,同学们到时要根据我给的列表查漏补缺,别留下盲区。
  2. 样式的开发技巧。项目的开发过程中涉及很多技巧,比如各种居中方式、布局方式、文本截断方法和定位方法等。这些技巧都是通过多年的实战经验总结出来的,这部分收获应该是这个课程的重点。
  3. UI 框架的设计思路。能够以不同角色的角度参与到 UI 框架的设计研发过程,了解整个框架的设计思路。
  4. 良好的编程习惯。通过规范地开发一套 UI 系统,培养良好的编程习惯,也可以找出之前开发时有哪些不足。
  5. 提升抽象、提炼、整合的能力。对需求进行抽象,提炼出代码里有共性的东西,最后整理成通用功能的能力。

课程的介绍就到这里,更精彩的内容都在后面。

}
立即订阅 ¥ 78.00

你正在阅读课程试读内容,订阅后解锁课程全部内容

千学不如一看,千看不如一练

手机
阅读

扫一扫 手机阅读

手把手带你打造自己的UI样式库
立即订阅 ¥ 78.00

举报

0/150
提交
取消