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
scratch.
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.
<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>
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
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
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.
HTML5 Boilerplate
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 JavaScript templates that will help you keep organized.
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.
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 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 a complex JavaScript framework just to build a simple front-end, whether for a 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.
Leave Comment