6
Win8 UI web design kit
source link: https://yuguo.us/weblog/win8-ui/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Win8 UI web design kit余果的博客
Win8 UI web design kit
Introduction
Win8 UI web design kit
余果 2011-11-06 back-end- 之前有分享一个Win8 UI的PSD。这几天做了一套类似的web界面，demo地址是http://win8ui.sinaapp.com/
- demo是完全开源的，可以通过SVN地址来checkout源码：https://svn.sinaapp.com/win8ui/（需要权限才能checkout，我以为默认跟google code一样开放checkout，那需要checkout的留言留下邮箱吧，真不方便）
- 图标如果希望自定义，可以自己找矢量图，选择实角风格的图标会好一些
- SAE注册免费，也可以多人合作，希望跟我拉分支的可以留言让我开权限。如果没有注册可以用我的邀请链接：http://sae.sina.com.cn/activity/invite/36052/weibo
这里是一些技术要点：（博客文章更新不如SVN更新方便，所以，一切以源码为最新最准）
- 采用Responsive Web Design的设计方式，在手机上上、ipad上、超大屏幕上会看到不同的排版设计。
- 采用CSS3的3D API来实现小图片跟文字的翻转，完全无脚本（用最新版的Chrome看效果）。
- 图片icon采用了i标签，而不是img标签，方便合并雪碧图。源码及外网未合并图片，因为SAE没有源码环境和发布环境的区别。但是我已经把可以合并的图片已经在slice文件夹，可以通过CssGaga一键合并雪碧图。合并过后图片请求只会有两个，一个合并图，一个背景2x2px的小图。
- 未测Chrome和IE8之外的浏览器，如有兼容性问题或者建议，请留言告知。
我写字的地方迁移到公众号啦~欢迎关注我的公众号：余果专栏
Copyright 2010-2019 Yuguo
Thanks for reading
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK