In the olden days, creating a website from scratch was easy.
With a basic understanding of HTML, and maybe a little CSS, you could put together a pretty functional web page with very little effort. Throw it onto your web server, and you were good to go.
<html>
<head>
<title>My awesome webpage</title>
</head>
<body>
<h1>This site is awesome!</h1>
<p>And I coded it from scratch.</p>
</body>
</html>Of course, you can still code a page like this today. What has changed, for better or for worse, are expectations. As internet connection speeds grew faster, and browsers became more standardized and powerful, people asked more from the web. And websites grew in size and complexity, more and more often we'd see even experienced designers who were comfortable with raw HTML and CSS using design tools and code editors with advanced features just to keep everything straight.
Today, few people design their web pages from scratch. Most opt to use a pre-built template design, custom fit for their content management system of choice. Even developers building complex web applications came to rely on templating libraries to put together the majority of their application.
But what if you want to build a new template for your content management system or static site generator? What if you want to build a simple site with a single landing page, or a small number of static pages that are unlikely to change very often? What if you want to code a JavaScript application but don't want to use a complicated framework or library to build the final output?
There are still a million reasons out there to hand-code a web page. For me, the top reason is control. Web pages are getting increasingly obese as time goes on. But when you design a page from scratch, it's easier to leave out things you don't really need. Do I really need to load in web fonts for this page to look nice? Is jQuery something I need, or can a couple of lines of Vanilla JS accomplish the same thing? Could a little bit of SVG instead of a complex image?
At the same time, there's no point in reinventing the wheel every time you sit down to design something for the web. There probably are common elements you want on every page you build, and modern development tools like Sass and Less make dealing with finicky CSS much easier than it used to be.
For these reasons, using an HTML boilerplate templates and frameworks helps bring you the best of both worlds. It can help bring standardization, an easy-to-use grid for layout, and modern feature support to your pages, but at the same time, they are often simple enough to cut the cruft of anything you're not actually using.
Here are three open source HTML5 templates for you to consider for your next web project.
Bootstrap
Twitter's Bootstrap is perhaps one of the best-known templating frameworks for creating new web pages. Its ubiquity has led to a backlash from some in the web design community, not so much because of the framework itself but because of the pervasiveness of very simple, almost completely uncustomized implementations of it out in the wild.
But if it has been overused, this probably speaks as much as anything to its usefulness. Bootstrap makes it easy to create a responsive design, and comes with lots of features out of the box: from icons to styled inputs and brings standardization to many common page elements, from breadcrumbs to alerts to pagination. There are also a ton of ready-made themes out there, in case theming isn't your thing.
Bootstrap is available on GitHub under an MIT license.
HTML5 Boilerplate
My personal favorite for starting with a new project is HTML5 Boilerplate. It includes most of the elements I end up adding to any new web project out of the box: a snippet for analytics, all of the various icon sizes I end up forgetting to look up, and some default CSS and JavaScript templates that help me keep organized.
But it's also fairly lightweight, and if I don't need a particular component for a project, it's easy enough to snip it out and never look back. If you're looking for a balance between minimalist and full featured, HTML5 Boilerplate might hit that sweet spot for you.
HTML5 Boilerplate is on GitHub under an MIT license.
Skeleton
Skeleton is the lightest framework in the bunch. Weighing in at around 400 lines of code, it's also very easy to work with. If you've worked with web frameworks before and find them to be too bulky or just overkill for what you need, Skeleton provides some good bare bones (hah!) to work with: a simple grid; nicely formatted forms, lists, tables. typography, and other basic elements; and cross-browser support. Everything else is up to you.
Skeleton is on GitHub under an MIT license.
Should you use one of these?
My recommendation is to shop around, try out a few options, and use which one works best for your needs. Hate all three of these options? There are plenty of other options out there. And if you spend a substantial amount of your time creating for the web, consider building out a generic web template that works for you. Despite what some might have you think, you don't need a complicated JavaScript framework just to build a simple front-end, whether for a traditional informational page or a lightweight web application.
You might also check out Initializr, an open source web application that can pre-configure HTML5 Boilerplate, either as a classic or responsive page, or Bootstrap, with only the options you need.
So what about you? Do you have a favorite template or framework for web design? Or do you take a different approach to web design altogether? Let us know in the comments below.
6 Comments