Chamomile Honey Tea

Intro

Chamomile Honey Tea is a CSS framework/theme made for the 32-Bit Cafe Spring 2025 Tea Party! This framework includes just about all of the semantic CSS needed for a site (the chamomile tea), plus a few classes thrown in for flavor (the honey). It'll be up to you, however, to code some HTML. This is, after all, geared towrards those who are still learning! All of the classes will be explained, but feel free to refrence the HTML of this page if you ever feel stuck!

This framework is responsive by default. It also detects light/dark mode prefrence and will change colors accordingly.

This is also completely free to use. No copyright. Have fun. Though, credit would be nice, if only so others can also find the cool free resource :3

If you would like to use this CSS theme, then you can download or copy/paste the code from my Github. Or you can use "view page source". Whatever floats your boat.

Enough yapping, it's time to show off everything that Chamomile Honey Tea can do!

Header, Nav, Footer

If you look at the very top and bottom of the page, you'll find a header and footer. Neat stuff. If you want to add them, you can do so with header as the first thing after body and footer as the last thing before /body

Other Semantics

This is a paragraph. Beautiful. The entire theme has padding. Links will look like this: 32-Bit Cafe. They change color once you visit the site/page.

Fair warning to anyone using a screen reader, what follows is a list of all headings for sake of example.

Header Level 1

Header Level 2

Header Level 3

Header Level 4

Header Level 5
Header Level 6

Both the headers and the main text use a web-safe font, so they should work no matter what.

Also, by default, there's a bee emoji next to level one headers. I recognize that will look diffrent on each device and browser. If you don't want it, here's the CSS to get rid of. Also, this is what code blocks look like!

h1:before {
    content:'\1F41D';
}

Here's an unordered list featuring font variations:

And just for completions sake, an ordered list:

  1. I don't have anything to rank
  2. So this isn't as useful as last time
  3. Oops
  4. But hey we can do nested lists!
    1. Like this!
  5. Nested lists can also come in the flavor of unordered lists!
    • How tasty

We also have blockquotes for all of your block quote needs.

Hm. I need to fill this somehow. Uh, I chose the theme of chamomile honey because it's my favorite tea! I just put honey in plain chamomile and am one happy man. Normal honey, that is. Recently my brother discovered spicy honey. It was gross. Would NOT put that in tea.

Tables are fun, too!

Frogs and their Favorite Teas
Frog Tea Reason? Notes
Tree Frog Peppermint Very plentiful in the forest Mint infestation in their forest.
Pond Frog Matcha The aesthetic ngl On their phone entire time we were talking.
Desert Rain Frog Hibiscus None of your buisness >:( VERY rude.
Me :) Chamomile Tasty Actually a dragon. Mistakes were made.
Disclaimer: Not scientificaly acurate at all. Do not give frogs tea.

Images will be responsive by default; once the screen gets too small for them they'll just shrink.

greyscale photo of a house with chamomile growing on a turf roof
An Icelandic turf house with chamomile growing on the turf. Image is from Wikimedia. Also, this is how figure captions look!

Bonus and early class: here's one just for images that can be used to center them if desired! Just put this in the code:

<img src="image.file" alt="alt text is important!" class="center-img">

Where the class="center-img" goes in the order doesn't matter too much, so long as you have a pattren and stick to it. Makes editing code easier. Trust me.

While this framework is free for anyone to use, it really is geared towrards beginners and hobbiests. So I debated if I really wanted a bunch of text input feilds and menus. In the end, I decided to go for minimal options. I don't see hobby sites needing much more than these, but I may add more if asked!

Just know these will have little use without Javascript (or some very clever CSS).

Text boxes:


Radio Selection:

Can only choose one!

We also got a button!

Oh, and just because I don't have a better place to put it: you can make a large text area without it being an input and then fill it with your own text. This is commonly used to share text to be copy/pasted.

To end this section off, I'll go ahead and show off a horizontal rule! It has a nice little flower. We can pretend it's a chamomile flower.

Classes

Center Text

This text is centered. You need a class to do this sadly. Thankfuly, the code is super easy. Here it is:

<p class="center">
    <p>Centered text!</p>
</p>

Doesn't just have to be a paragraph, either. It'll also work with headings and almost any text. Experiment!

Box

This is a box you can put things in. Nifty! How/if you use it is up to you. It's a diffrent color, so things look a little diffrent in here. For example, text is darker. Links have also been tweaked for better contrast, as you can see here: 32-Bit Cafe.

Here's a line break to show how that looks in a box.

Do headings still look okay?

Yes! As should everything else. The code for a box is as follows:

<div class="box">
    <p>Whatever you want here tbh.</p>
</div>

Scroll Box

I'm full of text! So much so that you have to scroll in order to see all of it! Handy for some situations, probably. These are the same color as code blocks, so while you could put a code block in here it won't be visable. So the code block is going to come after for the sake of readability. Plus, the code blocks will scroll horizontalally when overfilled... yeah that would be a nightmare to navigate. Hm, still haven't hit the scroll minimum on my biggest screen yet. About that spicy honey from earlier: it didn't even taste like honey. Just spicy. Like, why would you ruin perfectly good honey like that??? It had all the downsides of honey (sticky) with none of the upsides (uniqe sweet flavor). So strange.

Code for a scroll box is as follows:

<div class="scroll">
    <p>Yeah the class names are very simple, still I wanna show them off like this. Feels like the best way to me.</p>
</div>

Flexbox

If desired, you can use flexbox to get some more complex layouts with this framework. I'll put the box class inside of it to make it more visable, but this is optional.

Half width box!
Another half width box!
Third width box!
Two-thirdss width box!
Three-fourths width box!
One-fourth width box!
You can also put four tiny ones together.
Like this!
Whatver you want, really.
This framework is your oyster.

How you arange them is up to you, but so long as it equals a whole it should look okay! Just know that heights are not gurenteed to match, as you can probably see.

The code block for this is as follows:

<div class="container">
    <div class="half">This is just for one half</div>
    <div class="third">This is for a third</div>
    <div class="twothird">And two-thirds</div>
    <div class="threequarter">Three quarters...</div>
    <div class="quarter">And last, and technically least, just one quarter!</div>
</div>

And... that's about it! These are just about all the pices needed to make a site :D If you need help or have any questions, please feel free to let me know! ^^