Over time, every web developer gathers a collection of tools — useful libraries, code snippets, reference materials and images that get re-used over and over. They make life easier by shortening development time and handling common, often mundane tasks. This frees up time and brain power for more complex tasks.
In this post, we’ll take a look at a small collection of boilerplates, templates and resets that you can incorporate into your workflow. They simplify the process of setting up a new project by providing a clean slate and often useful utilities.
1. HTML5 Boilerplate
Arguably the most popular HTML5 "starter templates" out there, HTML5 Boilerplate aims to provide a cross-platform, future-proof HTML/CSS and JavaScript base template for web development.
In addition to cross-browser normalization and graceful degradation, Boilerplate also includes more advanced options for caching, JavaScript profiling, unit testing and handling of AJAX events.
2. Boilerplate Mobile
If you're doing mobile app development, you may also want to check out HTML5 Boilerplate Mobile; a specialized version of the main boilerplate with additional features and functionality specifically for mobile web development.
Boilerplate Mobile includes additional code to assist with viewport optimization, improved font rendering, quickly adding home screen icons and cross-platform support across a number of mobile devices.
3. HTML5 Reset
HTML5 Reset is a more lightweight base template that gives developers a clean slate to work with while setting and taking care of some cross-browser issues, such as CSS inconsistencies and IE-specific CSS rules.
The HTML5 Reset developers also provide a blank WordPress theme using their system, which can be uses in building custom WordPress templates from the ground up. Both flavors of the reset provide clean, semantic code and tons of flexibility.
4. YUI2 CSS Reset
Yahoo's YUI2 CSS Reset is a set of drop-in stylesheets to begin your next project. The reset eliminates cross-browser inconsistencies in element rendering so that you can explicitly declare your own rules for these elements.
A useful tool in ensuring cross-browser design consistency, the reset is fully documented with lots of great examples and large community backing.
5. Eric Meyer's CSS Reset
An oldie but a goodie, Eric Meyer's CSS Reset was one of the first templates to make the rounds and gain popularity. This popular reset has now been updated for HTML5.
Designed to be generic in nature, this stylesheet gives you the bare minimum, but in some ways also provides the most flexibility. It removes default rules set by the browser, eliminating inconsistency and leaving you with a completely clean slate to work with. All browsers are on even footing.
6. Starkers
Starkers is a "completely naked," bare-bones WordPress HTML5 starter theme. The theme gives you a blank canvas to build upon, removing unnecessary code and providing clean, semantic markup for WordPress as well as support for menus, dynamic components, custom sidebar widgets and more.
Starkers also implements the YUI2 CSS Reset mentioned earlier, so all of the setup is done for you. All you have to do is start building.
7. Roots
Roots is another WordPress starter theme that takes things just a bit further. Built upon Starkers, HTML5 Boilerplate and the Blueprint CSS framework, Roots gives you a robust set of tools for rapid theme development while incorporating tried and true technologies for ensuring cross-browser support for CSS and HTML 5.
Other Roots features include some bundled jQuery plug-ins (Cycle, Fancybox, etc.), an SEO-optimized robots.txt file and support for easy integration of social media content from Facebook and Twitter. Roots has a larger footprint than some other "blank slate" WordPress themes but if you're interested in quickly building large, robust, and full-featured WordPress sites, it's definitely worth a look.
More About: boilerplate, CSS, dev & design, HTML5, resets, template, web, Web Development
For more Dev & Design coverage:
- Follow Mashable Dev & Design on Twitter
- Become a Fan on Facebook
- Subscribe to the Dev & Design channel
- Download our free apps for Android, Mac, iPhone and iPad
No comments:
Post a Comment