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 框架中才有用。理解以后，我们在平时写页面样式的时候也一样可以借鉴。
自行扩展
这个项目里做的是一些比较常用的组件，同学们在学会开发方法后，也可以自己对项目做扩展，开发自己需要的组件。
应该有的收获
学完这个课程以后，应该有如下几方面的收获：
- 基础知识。通过学习这个课程，要把里面涉及的知识点都学会。这部分收获是比较明确的，我在课程的最后也会列出所涉及到的知识点，同学们到时要根据我给的列表查漏补缺，别留下盲区。
- 样式的开发技巧。项目的开发过程中涉及很多技巧，比如各种居中方式、布局方式、文本截断方法和定位方法等。这些技巧都是通过多年的实战经验总结出来的，这部分收获应该是这个课程的重点。
- UI 框架的设计思路。能够以不同角色的角度参与到 UI 框架的设计研发过程，了解整个框架的设计思路。
- 良好的编程习惯。通过规范地开发一套 UI 系统，培养良好的编程习惯，也可以找出之前开发时有哪些不足。
- 提升抽象、提炼、整合的能力。对需求进行抽象，提炼出代码里有共性的东西，最后整理成通用功能的能力。
课程的介绍就到这里，更精彩的内容都在后面。