Uncategorized 3 open source web design templates – Opensource.com
Jump to navigation
Get the highlights in your inbox every week.
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.
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.
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?
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!
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/
Get the highlights in your inbox every week.
For more discussion on open source and the role of the CIO in the enterprise, join us at The EnterprisersProject.com.
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.
Copyright ©2021 Red Hat, Inc.