Layout thrift store

All the layouts here work regardless of screen resolution, including phones, and can be zoomed in and out of without breaking anything. I generally consider them to be templates, so you'll likely need to do some degree of modification to use them. (Of course, you're also free to use them as-is if you like the default styling!) There are Github "download" links so you can copy the code more easily, or you can just copy the source code in most instances. I'm available for technical support if needed (email me)

This stuff will always be free, and you can do virtually whatever you want with it as long as you don't restrict the freedoms of others. Read my license terms for more information. I take donations at Ko-fi as well if you have any spare change, but that's completely optional!

Contents

Simple 2 column

Skill level: Beginner
Preview Version 1Download Version 1
Preview Version 2Download Version 2

Pretty minimal - there's room for a banner and a sidebar. That's it! There are 2 versions, which look the same on desktop but behave differently on mobile. Version 1 stays in 2 columns regardless of screen size, while version 2 turns into 1 column and gets a hamburger menu on phones and small screens. The icons for the hamburger menu can be downloaded on the snippet page, or you can make your own .svg files to use!

Simple 3 column

Skill level: Beginner-intermediate
PreviewDownload

A responsive version of the usual 3 column layout. It has a hamburger menu on small screens. The icons for the hamburger menu can be downloaded on the snippet page, or you can make your own .svg files to use!

Skill level: Intermediate
PreviewDownload

A reponsive version of the structure of a free layout from Createblog. It has a banner, horizontal tabbing, and a sidebar, all of which can fit approximately a metric ton of links. The sidebar can also be used for text or whatever else you feel like using it for.

Classless CSS

Skill level: Beginner
PreviewDownload CSS

Classless CSS allows you to make a nice looking page with only basic semantic HTML, allowing you to focus on just writing the damn page instead of fiddling with styling. It's accessible, responsive, and easy to use. It has light/dark mode built in, and the colors are easily customizable if you hate what I picked.

The CSS can also be used as a content styling template for other layouts.

Fun with flexbox

Skill level: Beginner-intermediate
PreviewDownload

This used to be the base for my character website. It has a sidebar with space for some links, a picture, and a description, but its main feature is the grid system used for the main content area. Great if you're looking for an offbrand Tumblr setup!

Pride flags

Skill level: Beginner-intermediate
PreviewDownload

A layout and a collection of CSS themes based on pride flags, using CSS gradients for the backgrounds (no images)! These are pretty much plug-and-play, and they have a light and dark toggle built in.

You'll need to download the HTML and CSS for your chosen color scheme separately. The base code assumes you're saving the CSS as style.css, but you can fix that if that isn't the case.

If you'd just like to know how to get the striped background, I have those by themselves as code snippets.

Reader mode blog

Skill level: Beginner
Preview
Download HTMLDownload CSS

Simple blog code inspired by browser reader mode. As a bonus, it works with the base Zonelets HTML, so Zonelets users only need to copy/download the CSS file.

Terminal

Skill level: Beginner
PreviewDownload

The layout of my UTAU website, loosely fashioned after a terminal window. It works best if you're not planning on putting too many links in the menu. It has space for a banner, and there's built-in light/dark mode.

Totally Tabular

Skill level: Beginner
PreviewDownload

The base layout of Brian Aneurysm, designed to look like the shitty table-based layouts of yore without any of the actual tables. Everything is done in Flexbox, so it works on all screen sizes while retaining the overall 2000s look.