If you want to get started in designing a modern codebase
for a web project, surely these templates and frameworks will help you.
In the past years, it was easy to create a website from
If you have a basic understanding of HTML, and a little of
CSS, you could put together a beautiful functional web page with very little
effort. Place it onto your web server, and you were good to go.
<title>My awesome webpage</title>
<h1>This site is awesome!</h1>
<p>And I coded it from scratch.</p>
Obviously, you can still code a page like this today.
What has changed, are expectations, for better or for worse. As internet
connection speeds grew faster, and browsers became more standardized and mightier,
people demanded some extra from the web. And websites enhanced in size and
complexity, more and more often we'd see even expert designers who were
comfortable with raw HTML and CSS using design tools and code editors with
advanced features just to keep everything simple.
At present, only few people design their web pages from
scratch. Most choose to use a readymade template design, custom fit for their
content management system of choice. Even developers crafting complex web
applications came to rely on templating libraries to put together the large
part of their application.
There are still numerous of reasons out there to hand-craft
a web page. For me, the first reason is control. Web pages are getting
increasingly obese as time is passing. But when you design a page from scratch,
it's easier to remove out things that you don't really require. Do I really
need to load in web fonts for this page to look good? Does I require jQuery, or
just a couple of lines of Vanilla JS fulfills the same demand?
At the same time, there's no point in reinventing a thing
every time you have to design a page for the web. There are possibly some common
elements you want on every page you build, and modern development tools like
Sass and Less deal with finicky CSS which is much easier to used.
Due to these reasons, using an HTML boilerplate templates
and frameworks will help you bring the best of both worlds. This can help you
in bringing 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 of anything you're not actually using.
Take a look at the following three open source HTML5
templates for your next web project.
Bootstrap by Twitter is possibly one of the most-known
templating framework for designing new web pages. Its extensiveness has led to
a backlash from some in the web design community, not so much because of the
framework itself but because of the prevalence of very simple, almost
completely non-customized applications of it out in the wild.
But if it has been overused, this probably speaks as much
as anything to its usefulness. Using Bootstrap it makes easy to create a
responsive design that also comes with lots of capabilities 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 large
number of ready-made themes out there, in case theming isn't your thing.
Bootstrap is available on Getbootstrap under
an MIT license.
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 to work
with: a simple grid, nicely formatted forms, tables lists. Typography, and
other basic elements, and cross-browser support. Everything else is upon you.
Skeleton is on getskeleton under
an MIT license.
Many person’s favorite is HTML5 Boilerplate framework to
start working on a new project. It includes most of the elements you may add up
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
It's also much lightweight, and if you don't require a
particular component for a project, it's easy enough to remove it and never
look back. If you're looking for a stability between minimalist and full
featured, HTML5 Boilerplate might hit that sweet spot for you.
HTML5 Boilerplate is on html5boilerplate under
an MIT license.
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 invest a sufficient
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 require
traditional informational page or a lightweight web application.
You may also try another open source web application
Initializr 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 any favorite template or
framework for web design? Or do you apply any other approach to web design
altogether? Let us know in the comments below.