市面上开源的 UI 框架有很多,但一般规模比较大的公司都会选择自建一套 UI 框架。自建框架的好处有:

  • 源码可以改动
  • 可以完全满足产品的设计风格
  • 完成功能定制化
  • 利于风险控制

自建框架的优势如此突出,作为一个前端开发人员,尤其是想从初级前端开发向中级前端开发进阶,学会自己制作 UI 框架是一项必备技能。能够成为一个大公司的前端 UI 库开发参与者,甚至是发起人、主导者,对于个人的职场提升,有着举足轻重的作用。

本期专栏学习方法分为 “夯实基础 —— 实战 —— 理解设计思路 —— 项目拓展” 四个层次。从熟悉基础的 HTML、CSS 知识点开始,实战整合每一个 UIDEMO 组件,理解 UI 框架的设计思路到学会开发方法进行项目扩展、开发自己需要的组件。循序渐进让同学们了解一个 UI 框架的整体开发过程。

案例主要实现的是一个移动端网站的样式框架。为了让同学们把注意力集中在样式开发,核心项目只使用 HTML 和 CSS 技术进行实战。在专栏的最后部分,对部分周边技术栈(Nodejs、打包工具、JS 等)进行参考应用,让同学们了解此 UI 框架如何与其它技术对接。

因为希望同学们可以利用碎片化时间灵活学习,本专栏尽量减弱上下文的内容依赖,从而实现让大家可以在工作之余进行充分学习与实战,理解开发一个定制化 UI 框架的思路和方法,并同时掌握里面涉及的 CSS 相关知识,相信一定会对大家的前端技能进阶大有帮助。

专栏模块
专栏布局基本按开发顺序进行,共分为七个模块

  • 开篇:本模块为项目开篇,主要为理论性内容,包括课程的基本情况、关于 UI 框架的理解和 UI 框架设计的内容。
  • 磨剑:本模块主要内容为归纳知识点,旨在帮助打好基础,了解必要的 CSS 基础知识与规范,以及 HTML 基础知识点。
  • 列阵:本模块进入专栏主题,主要内容为优化移动端样式的基础布局,包括 CSS 规范要求的基本内容、整体页面布局和一些公共样式等。
  • 操练:本模块主要内容为开发移动端内一些常用组件的样式,比如网格布局、列表、菜单、信息提示和文本处理等技巧类的应用。
  • 集结:本模块主要内容为如何整合分散 Demo 为可用 UI 框架,并介绍该 UI 框架如何与其它技术结合。
  • 实战:本模块主要内容为利用完备的 UI 框架进行页面开发实战。
  • 复盘:本模块为专栏收尾,对专栏内容进行总结。

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源