16个快速启动 Web 项目样板

     <p>样板是可以重用在许多地方的一套代码文件，只需很少或根本不需修改。然而，这里我们正在谈论的boilerplates通常可以作为您项目的坚实基础。另外，这也是学习编码技巧和窍门的好地方！</p>    <p>样板是非常有用的，因为它通常包括最佳编码实践，也包含很多的技巧和窍门，否则将需要几年的时间学习。要是没有HTML电子邮件样板作为例子，建立 一个EDM（Email Direct Marketing，即电子邮件营销）是不容易的，它需要你回到HTML1.0，没有更多的div，span或高级的CSS设置，如浮，位置等，你需要用 表格做布局，内联CSS做简单的样式。使构建EDM更糟的是，电子邮件客户端有严格的限制，它们不具有相同的行为，如果你在多个老浏览器的工作，它都呈现 不同的页面！有了电子邮件的样板，它包含CSS设置的HTML结构，甚至一些技巧和窍门，可以帮助和指导你如何避免展现不一致的问题。</p>    <p>没有做更多，我只是为不同的web技术平台收集16 样板 - HTML，CSS jQuery，WordPress等等，他们执行最佳实践并不断更新，我敢肯定它能为您的项目打下一个非常良好的基础。</p>    <p> </p>    <h2>HTML & Miscelaneous</h2>    <h2><a href="/misc/goto?guid=4958191193409561768"><span style="font-size:x-small;">HTML5 Boilerplate</span></a></h2>    <p><img title="HTML5 Boilerplate" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/bdee2e08136f303dcfab9066b6480482.jpg" width="500" height="150" /></p>    <p>HTML5 Boilerplate是一个专业和著名的基于HTML / CSS/ JS的快速、稳健和未来安全的网站模板。</p>    <p> </p>    <p style="font-size:small;"><a href="/misc/goto?guid=4958333326910801766">HTML Email Boilerplate</a></p>    <p><img title="HTML Email Boilerplate" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/76b8c87be93c8b14f1800c816017ba77.jpg" width="500" height="150" /></p>    <p>这个网站及其代码示例创建了各种各样的模板，设计或布局的展现，这有助于你避免一些最常见的电子邮件客户端的渲染问题 - Outlook，Gmail，雅虎邮件等，这是一个好东西，我把它用在我的工作，它包含了很多的技巧和窍门来节省您大量解决问题的时间。</p>    <p> </p>    <p><a href="/misc/goto?guid=4958333327709138175">HTML5 Mobile Boilerplate</a></p>    <p><img title="HTML5 Mobile Boilerplate" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/d8d1f0fbad7f37dc3fe29e29fa478ccd.jpg" width="500" height="150" /></p>    <p>HTML5 Mobile Boilerplate，是你值得信赖的模板，用于创建定制丰富和高性能的移动网络应用程序。你能获得A级智能手机之间跨浏览器的的一致性，和传统的黑莓，Symbian，以及移动的后援支持。</p>    <p> </p>    <p><a href="/misc/goto?guid=4958326721136670172">推ter Bootstrap</a></p>    <p><img title="推ter Bootstrap" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/4637dcd939473deb71acf239e68b656a.jpg" width="500" height="150" /></p>    <p>简单，灵活的HTML，CSS，JavaScript框架，用于流行的用户界面组件和交互。它不是一个真正的样板，但它有很多快速原型和开发可重用的组件。</p>    <p> </p>    <p><a href="/misc/goto?guid=4958333329247078691">Zend Framework Boilerplate</a></p>    <p><img title="Zend Framework Boilerplate" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/f41671a1cbdd9af9763fe97b3c38bc94.jpg" width="500" height="150" /></p>    <p>Zend框架（ZF）的样板，是一个基于Zend框架企业级PHP应用开发的所有功能于一身的平台。</p>    <p> </p>    <p> </p>    <h2>CSS</h2>    <h2><a style="font-size:12px;" href="/misc/goto?guid=4958333330043351904">GetSkeleton</a></h2>    <p><img title="GetSkeleton" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/ad857d7d2e12e0a762b02c8b8e6f70c3.jpg" width="500" height="150" /></p>    <p>GetSkeleton是一套CSS和JS文件，可以帮助你快速开发外观漂亮不同规模大小网站，用于17“笔记本电脑的屏幕或iPhone。GetSkeleton建立在三个核心原则：Responsive Grid Down to Mobile，快速启动和风格无关。</p>    <p> </p>    <p> </p>    <p><a href="/misc/goto?guid=4958333330832222946">CSS Media Queries Boilerplate</a></p>    <p><img title="CSS Media Queries Boilerplate" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/8060753eeae006d36b51147a036ec1e2.jpg" width="500" height="150" /></p>    <p>CSS Media Queries快查片段。</p>    <p> </p>    <p><a href="/misc/goto?guid=4958333331618284730">Boilerplate for Responsive Mobile</a></p>    <p><img title="Boilerplate for Responsive Mobile" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/5aa16a85d27a4b71e2e73d7293256bf6.jpg" width="500" height="150" /></p>    <p>YAMP是一套小工具和最佳实践，可让网页设计师更快地建立响应式网站。</p>    <p> </p>    <h2>jQuery</h2>    <h2><a style="font-size:12px;" href="/misc/goto?guid=4958333332408872797">jQuery Boilerplate</a></h2>    <h2><img style="font-size:12px;" title="jQuery Boilerplate" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/c7ad6ab2ce420927695b376b49570eca.jpg" width="500" height="150" /></h2>    <p>该项目将不寻求每一个可能的模式提供了一个完美的解决方案，但将尝试覆盖了简单的模板，适合初学者及以上。</p>    <p> </p>    <p><a href="/misc/goto?guid=4958333333388060170">Stefan Gabos jQuery Plugin Boilerplate</a></p>    <p><img title="Stefan Gabos jQuery Plugin Boilerplate" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/5f6722119d3a0e6ec506a43ee3e24d0a.jpg" width="500" height="150" /></p>    <p>快速上手的jQuery插件开发样板。</p>    <p> </p>    <p><a href="/misc/goto?guid=4958333334197310793">Essential jQuery Plugin Patterns</a></p>    <p><img title="Essential jQuery Plugin Patterns" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/f50c9563a137cb69be3f65af3eeb2eca.jpg" width="500" height="150" /></p>    <p>一个jQuery插件开发的JavaScript模式。除了大家都知道的JavaScript模式有用外，开发的另一个侧面可以受益于它自己的一套 设计模式：jQuery插件。官方jQuery插件创作指南，提供了一个很好的起点，编写插件和widget入门，但我们更进一步。</p>    <p> </p>    <h2>WordPress</h2>    <h2><a style="font-size:12px;" href="/misc/goto?guid=4958333335110733548">WordPress Widget Boilerplate</a></h2>    <h2><img style="font-size:12px;" title="WordPress Widget Boilerplate" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/0ad6302162acf3bcb3162bf4d5cc996b.jpg" width="500" height="150" /></h2>    <p>一个组织良好的构建WordPress部件的维护样板。</p>    <p><span style="font-family:Arial,Verdana,sans-serif;"><span style="font-size:12px;"><br /> </span></span><a style="font-family:Arial,Verdana,sans-serif;font-size:12px;" href="/misc/goto?guid=4958333335906396095">Root Theme</a><br /> <img style="font-family:Arial,Verdana,sans-serif;font-size:12px;" title="Root Theme" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/7bf49e44082158bc81276a3fa4f9dde3.jpg" width="500" height="150" /><br /> <span style="font-family:Arial,Verdana,sans-serif;font-size:12px;">Root是基于HTML5 Boilerplate 和来自推ter的Bootstrap上的一个WordPress主题。</span></p>    <ul style="font-family:Arial,Verdana,sans-serif;font-size:12px;">     <p> </p>     <p> </p>    </ul>    <p><a style="font-family:Arial,Verdana,sans-serif;font-size:12px;" href="/misc/goto?guid=4958190841614449137">Bones</a><br /> <img style="font-family:Arial,Verdana,sans-serif;font-size:12px;" title="Bones" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/95f38b7ae574a929c1ee88ba96bca1cd.jpg" width="500" height="150" /><br /> <span style="font-family:Arial,Verdana,sans-serif;font-size:12px;">Bones是一个WordPress主题开发样板。它包含经典（fixed grid）和响应布局可选择。</span></p>    <ul style="font-family:Arial,Verdana,sans-serif;font-size:12px;">     <p> </p>     <p> </p>    </ul>    <p><a style="font-family:Arial,Verdana,sans-serif;font-size:12px;" href="/misc/goto?guid=4958333337425365496">Starkers Theme</a><br /> <img style="font-family:Arial,Verdana,sans-serif;font-size:12px;" title="Starkers Theme" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/e016f5dfde36182b6b2ad732fe416960.jpg" width="500" height="150" /><br /> <span style="font-family:Arial,Verdana,sans-serif;font-size:12px;">Starkers是一个极简单的WordPress的主题，可创建充当为主题设计师的基础。</span></p>    <ul style="font-family:Arial,Verdana,sans-serif;font-size:12px;">     <p> </p>     <p> </p>    </ul>    <p><a style="font-family:Arial,Verdana,sans-serif;font-size:12px;" href="/misc/goto?guid=4958333338212459456">TwentyTen Five HTML5 Base Theme</a><br /> <img style="font-family:Arial,Verdana,sans-serif;font-size:12px;" title="TwentyTen Five HTML5 Base Theme" alt="16个快速启动 Web 项目样板" src="https://simg.open-open.com/show/c26e6a3e4ae42152487553cae25eefce.jpg" width="500" height="150" /></p>    <ul style="font-family:Arial,Verdana,sans-serif;font-size:12px;">     <p> </p>    </ul>    <p><span style="font-family:Arial,Verdana,sans-serif;font-size:12px;">将HTML5引入WordPress，你可以使用这TwentyTen Five WordPress模板建立你的HTML主题。<br /> <br /> </span>本文转载自: <a href="/misc/goto?guid=4958333339001942934" rel="nofollow" target="_blank">http://itindex.net/blog/2012/03/13/1331612017177.html</a></p>