3 open source boilerplate web design templates – Opensource.com

Jason Baker for Opensource.com. 
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.
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.
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.
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 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.
I particularly love Bootstrap. Its thorough documentation makes it greatly easy for newbies to use it efficiently; but this Skeleton one also seems pretty interesting, can’t wait to try it out with our next project 🙂
Bootstrap has come to revolutionalize the web design industry. With the use of a boiler plate a developer can design a website in les than 1 hour.
Thank to opensource and to those who advocate to opensource products
I have used both Bootstrap and boilerplate quite extensively but, for green field projects usually find myself using ZURB Foundation instead.
It is equivalent to Bootstrap (which is great, don’t get me wrong) in terms of scope but (in my opinion) you end up creating much cleaner code and the way it can be customised through SASS allows you to create a style framework that has just what you need in the way you want it.
In my above comment, I forgot to mention that it also has a bunch of ready to go code in the form of both templates and building blocks. You should check it out!
In reply to I have used both Bootstrap by Symbal
Accomplished designers have to work to design a logo and this takes work. To design a logo, you need to invest time and effort. It is not equivalent to just playing on the computer for a few hours. https://www.google.com
A special thanks to opensource.com and to those who favour opensource products.
Bootstrap has managed to revolutionalize the web designing arena. With the use of a boiler plate a developer can design a website in less than 1 hour.
some more posts https://www.staticgen.com/
https://www.mindstick.com/Articles/12344/3-open-source-boilerplate-web-…
The opinions expressed on this website are those of each author, not of the author’s employer or of Red Hat.
Opensource.com aspires to publish all content under a Creative Commons license but may not be able to do so in all cases. You are responsible for ensuring that you have the necessary permission to reuse any work on this site. Red Hat and the Red Hat logo are trademarks of Red Hat, Inc., registered in the United States and other countries.
A note on advertising: Opensource.com does not sell advertising on the site or in any of its newsletters.
Copyright ©2021 Red Hat, Inc.

source