总结下MaterialDesign的CSS框架.PDF

下载文档 降价啦

8
0
约2.21千字
约 6页
2017-12-22 发布于天津
举报
版权申诉
保障服务

总结下MaterialDesign的CSS框架.PDF

1、本文档共6页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

总结下MaterialDesign的CSS框架

总结⼀下Material Design的CSS框架现在这⾥的界⾯⻛格要从 oogle在I/O2014⼤会上公布AndroidL也即后来的Lollipop说起。他们在谈论界⾯设计的时候公布了他们的设计准则：Material Design(中⽂⾮官⽅翻译)。当然这只是⼀些准则，总结并描述了之前在Web设计和移动端App界⾯设计⽅⾯的⼀些规范，并且⽤材料的类⽐来形象化的⽐喻这个准则。关于MaterialDesign的更多中⽂资料可参考这⾥。看到MaterialDesign之后就觉得这个设计⻛格⾮常符合直觉，于是想在这边也⽤上MaterialDesign。但是我在Web前端科技树上没点多少技能点，所以想找找别⼈实现好的模板或者框架直接套⽤上。在⽹络上搜索数⽇找到了这⼏个： PolymerPaper Elements Polymer oogle官⽅提供的参考实现应该是Polymer中的 PaperElements。由于是官官⽅⽅参参考考实实现现，这个框架的确⾮常忠实地实现了MaterialDesign的设计，但是同时由于它基于 HTML5WebComponents构建，相关技术我还不太懂，浏览器兼容性和其余HTML技术的兼容性也还不太完善的样⼦…… 并且对于我这个Web开发的半吊⼦来说，Polymer 只是提供了⼀组设计组建，没有完善的响响应应式式 (responsive)布局⽀持，也没有Navbar这种常⻅的框架组建，真的要⽤起来的话还需要⼿⼯实现不少东⻄。于是⼝⽔了半天之后只好放弃……以后可能真的会换⽤这个，只是⽬前需要学的东⻄太多了。 AngularMaterialDesign AngularJS AngularJS是 oogle对WebComponents技术的另⼀个尝试。⽽这额AngularMaterialDesign项⽬就是基于AngularJS构建的MaterialDesign库啦，同样是 oogle出品所以应该算得上半个官⽅实现吧。相⽐于 Polymer,AngularJS算是实⽤了很多，提供了基于CSS Flexbox的布局。有⼈对这两者的评价是，如果说 Polymer代表了未未来来趋趋势势，那么AngularJS就是眼眼下下可可⽤⽤的WebComponents实现了。只不过同样是因为它是Components的框架，对 WebApp的⽀持很丰富，⼤量采⽤Ajax等JavaScript 技术，对于我这个静态博客来说仍然稍显⾼级了……⾮常担⼼还不⽀持HTML5的浏览器⽐如w3m甚⾄cURL 对它的⽀持程度。于是最终也没有使⽤它。 Materialize Materialize Materialize这是⼀批(⾃称?)熟悉Android上 MaterialDesign的设计师们新近出炉的框架，试图提供⼀个接近Bootstrap的⽅案。最早是在Reddit上看到对它的讨论的，⽴刻觉得这个想法不错。体验⼀下官⽹的设计就可以看出，他们的动画效果⾮常接近Polymer的感觉，响应式设计的布局也还不错。只是同样体验⼀下他们现在的官⽹就可以看出，他们⽬前的bug还⽐较多，甚⾄⼀些bug在他们⾃⼰的主⻚上也有显现。虽然不想给这个新出炉的项⽬泼凉⽔，不过看来要达到他们声称的接近Bootstrap的易⽤度还任重⽽道远…… bootstrap-material- design+bootstrap3 这是我最终选择的⽅案。这个⽅案将三个项⽬组合在了⼀起，分别是bootstrap-material-design, pelican-bootstrap3和Bootstrap3。Bootstrap3想必不⽤再介绍了，很多⽹站都在使⽤这套框架，定制性很⾼。bootstrap-material-design是在Bootstrap3的基础上套⽤MaterialDesign⻛格制作的⼀套CSS库，当然也不是很完善并且在不断改进中，⼀些细节其实并不是很