Originally published at: http://www.sitepoint.com/tutorial-tumblr-theme-with-bootstrap/
If you have ever looked at all the wonderful Tumblr themes and wondered what it takes to build one from scratch, then this tutorial is for you. In this post, I am going to show you how to use Bootstrap and Tumblr’s special operators to create a theme you can use for your Tumblr blog.
Here’s what you need to get started:
- A Tumblr account
- A basic understanding of Bootstrap the popular front-end framework.
Our Basic HTML and Bootstrap Resources
A Tumblr theme is just an HTML file that uses Tumblr’s special operators. We’ll start off by creating a new file using our favorite text editor and adding the following boilerplate HTML code to it:
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
</body>
</html>
Next, we’ll add the necessary Bootstrap resources. Bootstrap CDN makes it easy to add the files to your theme. Just put the following in your theme’s head:
<!-- Bootstrap CSS --> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
And the following before the closing body tag: