黄色的鸭子

15 Jan 2012

快速搭建html5+css3站点的框架（持续更新）

HTML

html5boilerplate - 由Pual Irish创立

如果你想快速写点html5代码，运用到网站上，那么这个框架基本上目前为止最好的选择了。不仅能提供一些就旧浏览器不兼容的解决方案；还有比较不错的预定义css，可以帮助开发者解决在开发网站过程中碰到的头疼的不同浏览器表现不一致问题。

对于细节方面考虑非常周到。举个栗子：

对于常用的google analytics代码，html5boilerplate做了细致的研究，采取和google官方推荐不同的载入方式。

<script>
  var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

不仅采用异步的方式加载analytics代码，并且细致考虑了代码加载后的位置。最大化优化了网站的性能（why？答案在这里）。

对于html5boilerplate的高级功能，建议阅读他们的文档。

CSS3

Bootstrap, from Twitter

tt的“解靴带”目前在github上关注度位于前列，它提供一个清爽的界面，对于“typography, forms, buttons, tables, grids, navigation, and more”……这堆玩意儿提供了预定义。随便写两行代码就能获得不错的效果。

对于时兴儿(发音要拖长)的Responsive Design，bootstrap也帮你干了点活。用pad，phone或者不同宽度的浏览器访问网站时，不管细的还是粗的，css都能适应这个宽度，作出最适合的改变。