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: