Protogalaxy

Planet #0

Hybrid前端框架开发日志#4-细节优化

又是过了十来天,在旅游与回家的路上匆匆度过,因为没有客观的空闲让我安静的写作,所以只能在闲暇时间完成了相关细节的优化。首先,在实际测试中,响应式排版的18个expand column在浏览器中显得过于多了,所以在一番思付后将其修改为了16个。其次,由于颜色管理模块与layer模块的mixin在实际应用中需要反复引用,并且经过测试,输出的css会重复将引入的scss编译进来,导致代码量无意义的增加,所以将layer与颜色模块的mixin单独呈现了出来供之后的编写调用,并且将文字的颜色也引入了颜色管理系统。最后,经过对弹性框模型的详细学习,将信息提示模块进行了最后一步的完善,使其能够进行动态响应并且有了良好的视觉效果。 .message-box{ height : 55px; overflow-x : hidden; overflow-y : hidden; text-overflow : ellipsis; color : $Color-Grey-500; background-color : $Color-Grey-900; padding : 10px 15px 10px 15px; border-radius : 0.5em;Continue readingHybrid前端框架开发日志#4-细节优化

Hybrid前端框架开发日志#3-颜色管理模块以及信息提示工具

去实习了_(:3 」∠)_,在放置play(all the time…)的时间里完成了颜色管理模块和信息提示工具的编写,虽然看起来名字比较高大上,颜色管理,信息提示之类的,其实就是标准化了一下颜色,参考了google出来的色卡,命名了一堆颜色变量,信息提示工具其实就是四个角和head与dock的message box,改善了一下编写的语法,使得代码简洁了不少,不过很纠结输出之后的简洁度,依然在现有代码整洁度与输出代码整洁度之间徘徊,这问题还是留到以后再解决吧╮(╯_╰)╭,message box相关代码片段如下 .message-box-container-top { @include layer-6; position : fixed; top : 10px; left : 0; right : 0; margin : 0 auto; @media (max-width : 767px)Continue readingHybrid前端框架开发日志#3-颜色管理模块以及信息提示工具

Hybrid前端框架开发日志#2-字体及排版相关模块及一些工具

经过了蛮长时间停停走走的开发,终于是基本完成了字体定义模块及一些工具和一部分文本相关的排版模块。 嘛,个人喜好使然,选择了基于思源黑体(Noto Sans, Source Han Sans)的Font-Family,在搜索的时候还意外的发现了Google开始尝试着为非英语语种提供web font服务,比如CJK以及其他一些书写复杂的语种,所以字体定义全部采用了Google Fonts的API,正式完成之后,还可能加入阿里的思源黑体web font API,具体细节如下: .recommend-Font-Family { font-family : “Noto Sans”, “Helvetica Neue”, “Noto Sans SC”, “PingFangSC”, “Noto Sans Japanese”, “sans-serif”; } @mixin recommend-Font-Family {Continue readingHybrid前端框架开发日志#2-字体及排版相关模块及一些工具

Hybrid前端框架开发日志#1-响应式排版模块

经过了两天的学习与开发,终于是完成了自用框架的响应式排版模块,模块借鉴了Bootstrap的排版系统,并且进行了修改与扩展,以2500px为分界点,添加了QHD系统的支持,编写了扩展类.col-hi-expand-*,在QHD显示模式下,将原有的12个column的排版模式扩展为了18个,对高分辨率浏览器提供了更加细致的控制途径,其他的细节功能有待完善… .col-hi-1, .col-hi-2, .col-hi-3, .col-hi-4, .col-hi-5, .col-hi-6, .col-hi-7, .col-hi-8, .col-hi-9, .col-hi-10, .col-hi-11, .col-hi-12 { float: left; } .col-hi-expand-1, .col-hi-expand-2, .col-hi-expand-3, .col-hi-expand-4, .col-hi-expand-5, .col-hi-expand-6, .col-hi-expand-7, .col-hi-expand-8, .col-hi-expand-9, .col-hi-expand-10, .col-hi-expand-11, .col-hi-expand-12, .col-hi-expand-13,Continue readingHybrid前端框架开发日志#1-响应式排版模块