移动端重构实战系列0——sandal 和 sheral

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sandalsheral UI的一次全方位剖析,首发在imwebw3cplus两大站点及“前端Talk”微信公众号,其余所有标注或没有标注来源的均为转载。“

——imweb 结一

sandal是什么

简单来说,sandal是基于Sass的一个移动端css的基础库,提供了一些基础的重置,常用的mixin,如flex布局,等分,水平垂直居中,常用图标等,基于它你可以非常方便快速地扩展出你需要的UI组件,其整体结构设计如下图:

sandal

_function.scss集成了所有的基础功能,并且不带任何样式,而_core.scss则在function的基础上加入了重置样式,ext文件夹则是三个扩展文件,可根据个人需要自由导入,具体介绍及使用请参考sandal 文档

sheral是什么

sheral是基于sandal扩展的UI组件库,目前包括了btn,dialog,header,card,form,toast,line,media,progress等常用的25+组件。你可以直接调用,也可以根据自己的需求定制你的组件。

所有组件文件均可以在sheral components中查阅,demo效果见sheral UI

sandal与sheral的关系,就如jquery与其插件的关系。所以退一万步说如果sheral的UI真的不合你意,你也可以基于sandal提供的基础功能,快速构建一套你自己的UI库。这也是我把这两个分开开发的原因。

PS:sheral目前只专注重构这块,所以js写得比较简略,只是为了简单演示使用,同时欢迎感兴趣的小伙伴加入重构或转成其他js组件库。

放肆还是克制

理清了这两者关系之后,这里扯出另一个话题,UI库的度在哪里?

如果要适应各种场景,就必然会增加代码量,而各种情况又不一定能全部用上,那冗余的代码必然是个累赘,要是换个人开发那更是不敢动了;而如果太简单,必然又无法发挥一个UI库的作用,所以这必然是一个纠结的问题。

正如《后会无期》中说道:“喜欢就会放肆,但爱是克制”。

为了遵循克制这原则,在组件的头部,我们经常会看见一些带有switch标识的开关组件,有默认会true的,也有为false的,你可以根据你的需要选择开或者关来决定是否生成该样式。

于是在sheral的UI开发中,不仅实现适用多种场合,更是合理有节制的控制了代码的冗余,同时也留有进一步扩展的余地,这才是sheral的态度。

更多sandal 和 sheral的详细介绍请参考sheral——一个方便定制及扩展的UI组件库

其他说明

  • 本系列教程的css3前缀统一由PostCSS 插件autoprefixer处理。
  • 如无特别申明,所有的@mixin均定义在sandal的_mixin.scss中。
  • 本系列教程主要是分析sheral UI的实现。

结一

常用昵称“结一”。资深前端工程师,Drupal Themer,拥有丰富的前端实战经验。目前和大漠一起管理 W3CPlus站点,为 CSS3 的推广贡献自己的力量,是广大的 Drupal 爱好者之一。擅长于布局架构、浏览器兼容,CSS3研究。请关注我:新浪微博

如需转载,烦请注明出处:http://www.w3cplus.com/mobile/sandal-parts-1.htmlAir Zoom Vomero 13

如需转载,烦请注明出处:https://www.w3cplus.com/mobile/sandal-parts-1.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部