Pages

Thursday, 22 March 2012

十六个快速启动项目样板

introduction

Boilerplate is a set of code that can be reused in many ways with little or no alteration. However, the boilerplates we are talking about here usually can be used as a base, a solid foundation for your projects. Additional benefit, it's also a good place to learn tips and tricks about coding too!
Boilerplate is extremely useful because it usually comprise of best coding practices, and also contain heaps of tips and tricks which otherwise would take years of times to learn. Take HTML Email Boilerplate as an example, building an eDM isn't easy, it requires one to go back to HTML 1.0, no more div, span or high level CSS settings such as float, position etc, what you need is table for layout, inline CSS for simple styling. To make building an eDM even worse, email clients have strict restriction and they don't behave the same, as if you're working with more than one legacy browsers that all render the page differently! With the Email boilerplate, it contains CSS settings HTML structure and even some tips and tricks to help and guide you how to avoid redering inconsistencies issues.
With no further a do, I have collected 16 boilerplates for different web technologies, platforms - HTML, CSS, jQuery, WordPress and etc. They enforce best practices and constant updates and I pretty sure it will be a really good foundation for your projects.

HTML & Miscelaneous

  • HTML5 BoilerplateHTML5 Boilerplate HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-safe site.
  • HTML Email BoilerplateHTML Email Boilerplate This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there — Gmail, Outlook, Yahoo Mail, etc. This is a good stuff, I use it in my work and it contains a lot of tips and tricks which save you heaps of times to fix it yourself.
  • HTML5 Mobile BoilerplateHTML5 Mobile Boilerplate Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.
  • Twitter BootstrapTwitter Bootstrap Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. Not really a boilerplate, but it has a lot of reusable component for fast prototyping or development.
  • Zend Framework BoilerplateZend Framework Boilerplate Zend Framework (ZF) Boilerplate is an all-in-one platform for development of enterprise grade PHP applications based on the Zend Framework.

CSS

  • GetSkeletonGetSkeleton Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles: Responsive Grid Down to Mobile, Fast to Start and Style Agnostic.
  • CSS Media Queries BoilerplateCSS Media Queries Boilerplate Quick snippet for CSS Media Query setup.
  • Boilerplate for Responsive MobileBoilerplate for Responsive Mobile YAMP is a small set of tools and best practices that allow web designers to build responsive websites faster.



jQuery

  • jQuery BoilerplatejQuery Boilerplate This project won't seek to provide a perfect solution to every possible pattern, but will attempt to cover a simple template for beginners and above.
  • Stefan Gabos jQuery Plugin BoilerplateStefan Gabos jQuery Plugin Boilerplate A boilerplate for jump-starting jQuery plugins development.
  • Essential jQuery Plugin PatternsEssential jQuery  Plugin Patterns A javascript pattern for jQuery plugin development. But while well-known JavaScript patterns are useful, another side of development could benefit from its own set of design patterns: jQuery plugins. The official jQuery plugin authoring guide offers a great starting point for getting into writing plugins and widgets, but let’s take it further.

WordPress

  • WordPress Widget BoilerplateWordPress Widget Boilerplate An organized, maintainable boilerplate for building WordPress widgets.
  • Root ThemeRoot Theme Roots is a starting WordPress theme based on HTML5 Boilerplate & Bootstrap from Twitter.
  • BonesBones Bones is a boilerplate for WordPress theme development. It contains classic (fixed grid) and responsive layout to choose from.
  • Starkers ThemeStarkers Theme Starkers is a bare-bones WordPress theme created to act as a starting point for the theme designer.
  • TwentyTen Five HTML5 Base ThemeTwentyTen Five HTML5 Base Theme Bringing HTML5 to WordPress, you can use this TwentyTen Five WordPress template to build your won HTML themes.
  •  
  • from http://www.queness.com/post/10905/16-useful-boilerplates-to-start-your-project-quickly
  •  --------------------------------------------------------------------------------------
  • 样板是可以重用在许多地方的一套代码文件,只需很少或根本不需修改。然而,这里我们正在谈论的boilerplates通常可以作为您项目的坚实基础。另外,这也是学习编码技巧和窍门的好地方。   样板是非常有用的,因为它通常包括最佳编码实践,也包含很多的技巧和窍门,否则将需要几年的时间学习。要是没有HTML电子邮件样板作为例子,建立一个 EDM(Email Direct Marketing,即电子邮件营销)是不容易的,它需要你回到HTML1.0,没有更多的div,span或高级的CSS设置,如浮,位置等,你需要用 表格做布局,内联CSS做简单的样式。使构建EDM更糟的是,电子邮件客户端有严格的限制,它们不具有相同的行为,如果你在多个老浏览器的工作,它都呈现 不同的页面!有了电子邮件的样板,它包含CSS设置的HTML结构,甚至一些技巧和窍门,可以帮助和指导你如何避免展现不一致的问题。
    没有做更多,笔者只是为不同的web技术平台收集16 样板 - HTML,CSS jQuery,WordPress等等,他们执行最佳实践并不断更新,笔者肯定它能为您的项目打下一个非常良好的基础。
    HTML & Miscelaneous
    HTML5 Boilerplate
    HTML5 Boilerplate
    HTML5 Boilerplate是一个专业和著名的基于HTML / CSS/ JS的快速、稳健和未来安全的网站模板。
    HTML Email Boilerplate
    HTML Email Boilerplate
    这个网站及其代码示例创建了各种各样的模板,设计或布局的展现,这有助于你避免一些最常见的电子邮件客户端的渲染问题 - Outlook,Gmail,雅虎邮件等,这是一个好东西,我把它用在我的工作,它包含了很多的技巧和窍门来节省您大量解决问题的时间。
    HTML5 Mobile Boilerplate
    HTML5 Mobile Boilerplate
    HTML5 Mobile Boilerplate,是你值得信赖的模板,用于创建定制丰富和高性能的移动网络应用程序。你能获得A级智能手机之间跨浏览器的的一致性,和传统的黑莓,Symbian,以及移动的后援支持。
    Twitter Bootstrap
    Twitter Bootstrap
    简单,灵活的HTML,CSS,JavaScript框架,用于流行的用户界面组件和交互。它不是一个真正的样板,但它有很多快速原型和开发可重用的组件。
    Zend Framework Boilerplate
    Zend Framework Boilerplate
    Zend框架(ZF)的样板,是一个基于Zend框架企业级PHP应用开发的所有功能于一身的平台。
    CSS
    GetSkeleton
    GetSkeleton
    GetSkeleton是一套CSS和JS文件,可以帮助你快速开发外观漂亮不同规模大小网站,用于17“笔记本电脑的屏幕或iPhone。 GetSkeleton建立在三个核心原则:Responsive Grid Down to Mobile,快速启动和风格无关。
    CSS Media Queries Boilerplate
    CSS Media Queries Boilerplate
    CSS Media Queries快查片段。
    Boilerplate for Responsive Mobile
    Boilerplate for Responsive Mobile
    YAMP是一套小工具和最佳实践,可让网页设计师更快地建立响应式网站。
    jQuery
    jQuery Boilerplate
    jQuery Boilerplate
    该项目将不寻求每一个可能的模式提供了一个完美的解决方案,但将尝试覆盖了简单的模板,适合初学者及以上。
    Stefan Gabos jQuery Plugin Boilerplate
    Stefan Gabos jQuery Plugin Boilerplate
    快速上手的jQuery插件开发样板。
    Essential jQuery Plugin Patterns
    Essential jQuery  Plugin Patterns
    一个jQuery插件开发的JavaScript模式。除了大家都知道的JavaScript模式有用外,开发的另一个侧面可以受益于它自己的一套设计 模式:jQuery插件。官方jQuery插件创作指南,提供了一个很好的起点,编写插件和widget入门,但我们更进一步。
    WordPress
    WordPress Widget Boilerplate
    WordPress Widget Boilerplate
    一个组织良好的构建WordPress部件的维护样板。
    Root Theme
    Root Theme   Root是基于HTML5 Boilerplate 和来自Twitter的Bootstrap上的一个WordPress主题。
    Bones
    Bones
    Bones是一个WordPress主题开发样板。它包含经典(fixed grid)和响应布局可选择。
    Starkers Theme
    Starkers Theme  
    Starkers是一个极简单的WordPress的主题,可创建充当为主题设计师的基础。
    TwentyTen Five HTML5 Base Theme
    TwentyTen Five HTML5 Base Theme  
    将HTML5引入WordPress,你可以使用这TwentyTen Five WordPress模板建立你的HTML主题。
  • from http://itindex.net/blog/2012/03/13/1331612017177.html

No comments:

Post a Comment