Skip to content

Instantly share code, notes, and snippets.

@armornick

armornick/tumblr-theme-boilerplate.html

Created July 12, 2023 06:54
Show Gist options
  • Save armornick/3dd3f568bf15669709846c13408d7c15 to your computer and use it in GitHub Desktop.
Save armornick/3dd3f568bf15669709846c13408d7c15 to your computer and use it in GitHub Desktop.
Download ZIP
Tumblr theme boilerplate
Raw
tumblr-theme-boilerplate.html
<!--
BOILERPLATE FOR TUMBLR THEME DEVELOPMENT
Based on the code from <https://buildthemes.tumblr.com/>
Available under the 0BSD license (https://opensource.org/license/0bsd/)
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tumblr Theme Template</title>
</head>
<body>
<header class="masthead" role="banner">
<div class="meta-wrapper">
<img class="portrait" src="https://placehold.co/128"/>
<div class="blog-details">
<h1 class="blog-title">
<a href="/" title="site title">Site Title</a>
</h1>
<p class="blog-description">Site Description</p>
</div><!-- /blog-details -->
</div><!-- /meta-wrapper -->
<div class="nav-wrapper">
<nav>
<ul>
<li><a href="#">Page link</a></li>
<li><a href="#">Submit something</a></li>
<li><a href="#">Ask me question</a></li>
</ul>
</nav>
</div><!-- /nav-wrapper -->
<form action="">
<input type="text" name="q" placeholder="search something">
</form>
</header>
<div class="search-page message">
<p class="search-result">Search results for query</p>
</div><!-- /search-page -->
<div class="tag-page message">
<p class="tag-wrapper">Showing posts tagged tag</p>
</div><!-- /tag-page -->
<main role="main">
<article>
<div class="type-text post-content">
<h2 class="title">
<a href="#">Text Post</a>
</h2>
<p>Lorem ipsum dolor, sit amet <strong>consectetur adipisicing elit</strong>. Perferendis <em>mollitia quibusdam magnam</em>, cumque, quo placeat reiciendis inventore dicta maxime, odit sequi. Omnis ipsum totam voluptatibus nisi hic <a href="#">dolorem architecto</a> neque.</p>
<ul>
<li>unordered list item 1</li>
<li>unordered list item 2</li>
<li>unordered list item 3</li>
</ul>
<ol>
<li>ordered list item 1</li>
<li>ordered list item 2</li>
<li>ordered list item 3</li>
</ol>
<blockquote>
<p>This quote is in a text post.</p>
</blockquote>
<p><code>console.log("This is a code example!")</code></p>
</div><!-- /post-content -->
<footer class="contentinfo" role="contentinfo">
<a href="#" title="2023-01-01">
23 days ago
</a>
<a class="note-count" href="#notes">
69 notes
</a>
<a class="reblog-link" href="#reblog">
Reblogged from
</a>
<ul class="tags">
<li><a href="#">#tag</a> </li>
<li><a href="#">#tag</a> </li>
<li><a href="#">#tag</a> </li>
</ul>
</footer>
</article>
<article>
<figure class="type-photo post-content">
<a href="#">
<img src="https://placehold.co/600x400" alt="placeholder image">
</a>
<figcaption class="caption">
This is the image caption.
</figcaption>
</figure>
<footer class="contentinfo" role="contentinfo">
<a href="#" title="2023-01-01">
23 days ago
</a>
<a class="note-count" href="#notes">
69 notes
</a>
<a class="reblog-link" href="#reblog">
Reblogged from
</a>
<ul class="tags">
<li><a href="#">#tag</a> </li>
<li><a href="#">#tag</a> </li>
<li><a href="#">#tag</a> </li>
</ul>
</footer>
</article>
<article>
<div class="type-quote post-content">
<blockquote>This is an example quote post!</blockquote>
<cite class="caption">
It was me; I said it.
</cite>
</div><!-- /post-content -->
<footer class="contentinfo" role="contentinfo">
<a href="#" title="2023-01-01">
23 days ago
</a>
<a class="note-count" href="#notes">
69 notes
</a>
<a class="reblog-link" href="#reblog">
Reblogged from
</a>
<ul class="tags">
<li><a href="#">#tag</a> </li>
<li><a href="#">#tag</a> </li>
<li><a href="#">#tag</a> </li>
</ul>
</footer>
</article>
<article>
<div class="type-link post-content">
<a href="https://example.com" class="link-name">Link post example</a>
<div class="caption">
This is an example caption for link posts
</div>
</div><!-- /post-content -->
<footer class="contentinfo" role="contentinfo">
<a href="#" title="2023-01-01">
23 days ago
</a>
<a class="note-count" href="#notes">
69 notes
</a>
<a class="reblog-link" href="#reblog">
Reblogged from
</a>
<ul class="tags">
<li><a href="#">#tag</a> </li>
<li><a href="#">#tag</a> </li>
<li><a href="#">#tag</a> </li>
</ul>
</footer>
</article>
<article>
<div class="type-chat post-content">
<ul class="chat-lines">
<li>
<span class="label">Chat line label: </span> this is an example chat line
</li>
<li>
<span class="label">Chat line label: </span> this is an example chat line
</li>
<li>
<span class="label">Chat line label: </span> this is an example chat line
</li>
</ul>
</div><!-- /post-content -->
<footer class="contentinfo" role="contentinfo">
<a href="#" title="2023-01-01">
23 days ago
</a>
<a class="note-count" href="#notes">
69 notes
</a>
<a class="reblog-link" href="#reblog">
Reblogged from
</a>
<ul class="tags">
<li><a href="#">#tag</a> </li>
<li><a href="#">#tag</a> </li>
<li><a href="#">#tag</a> </li>
</ul>
</footer>
</article>
<article>
<div class="type-answer post-content">
<div class="question">
<p class="asker">
<span class="user-name">Asker username</span> asked
</p>
<h2 class="title">This is an example question?</h2>
</div><!-- /question -->
<div class="answer">
<p class="answerer">
<span class="user-name">Answerer username</span> answered
</p>
<div class="caption">
This is an example answer.
</div>
</div><!-- /answer -->
</div><!-- /post-content -->
<footer class="contentinfo" role="contentinfo">
<a href="#" title="2023-01-01">
23 days ago
</a>
<a class="note-count" href="#notes">
69 notes
</a>
<a class="reblog-link" href="#reblog">
Reblogged from
</a>
<ul class="tags">
<li><a href="#">#tag</a> </li>
<li><a href="#">#tag</a> </li>
<li><a href="#">#tag</a> </li>
</ul>
</footer>
</article>
</main>
<nav class="pagination">
<ul>
<li><a href="#">Previous Page</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</nav><!-- /pagination -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment