Word Vomit
This is where i will annoyingly vent about issues in my life. Will it be brutal to read? Perhaps, Yes. But a girl has to express her feelings in a healthy way, Right?.
I'll start with a recent converation at work that actually boilied my blood and made me wish the absolute worst for the poor, miserable fucks at Firebirds.
Men at Firebirds ad thier Stupidity
There is a very specific element wrapping pattern you need to follow for the styling to look correct. Usually, you'll probably be splitting your page into sections, so use the <section>
tag with the "post:
class with the following structure:
Conversation with Dave and Alexis
To be Continued Lungfish.
There are two scenarios where you don't want to use section
: if you're doing an actual list of blog posts, each post should be wrapped in an article tag, so use <article class="post">
instead. If you're just using the boxes for stylistic purposes, use <div class="post">
. (If you're not sure whether that's the case, you should most likely use a regular div
if there's no header at the beginning of the section.)
Tags
The footer is optional, so just delete it if you don't want it. You can also add "tags" to the footer in true Tumblr fashion:
<footer class="article-footer"><div class="date">Date or whatever</div> <div class="tags"> <span class="tag">#tag here</span> </div> </footer>
Tags can contain links without any issues.
Image posts
You can add a main image to a section by putting it in front of the article-content
element. It will separate the image from the rest of the "post" content like in a Tumblr image post. If you want inline images (i.e. the image is inside the box), you can just add them normally.
<section class="post">
<img src="IMAGE PATH" alt="ALT TEXT" class="postimage" />
<div class="article-content">
THIS IS WHERE YOUR TEXT ACTUALLY GOES
</div>
<footer class="article-footer"><div class="date">FOOTER</div></footer>
</section>
If you're still confused, the next post has the full enchilada (image and tags) as a demo.