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.
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.
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.
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.
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.
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.
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