Moth CSS

A suckless anti-css3 framework compatible with small / legacy web browser.

Why not use CSS3? That's pretty extreme dude.

Extreme yes, but it's necessary. Hence why this framework only uses CSS1

...no seriously, why?

It's heartbreaking when you can no longer visit your favorite website on your retro device because it's using an out-of-date browser. On top of that the modern web is infested with unesserary bloat, which leads to wasting precious bandwidth.

By using moth.css you can make a modern looking website without the bloat and your users can view your website on legacy devices.

Okay, but what about CSS2?

Originally Moth.CSS had CSS Level 2 in mind but it's best for Moth.CSS to just use CSS Level 1 so that most old web browsers will display elements properly.

In short, structure your website using Moth.CSS. After that sprinkle some CSS2 / CSS3 when needed.

Think of it like a cupcake.

Templates

Moth.CSS + Bootstrap + Jquery + Vue.JS Example

Webpage Restaurant

Structure

.grid

.w-100
.w-50
.w-50

.w-30

.w-30

.w-30

Header

Left
middle
Right

footer

Cards

John

Buddy ol pal

Friend Request

John

Buddy ol pal

Accept Decline

Panels

Success!

Yay, its green... green is good. Go you.

Error

Oh no, its red.... red is bad. Thats sucks.

Notes

The web is a friggin mess.

The web is a friggin mess.

The web is a friggin mess.

The web is a friggin mess.

Example:

<div class='panel bar-left clr-pale-yellow'>
<p>The web is a friggin mess.</p>
</div>

Navigation

Navbar

Pagination

Visuals

Colors

Primary colors

clr-red - #d75f5f clr-green - #5faf87 clr-blue - #5f87d7 clr-yellow - #ffd787

Pale Colors

clr-pale-red - #ffd7d7 clr-pale-green - #d7ffd7 clr-pale-blue - #d7d7ff clr-pale-yellow - #ffffd7

Dark Colors

clr-red - #af8787 clr-dark-green - #87af87 clr-dark-blue - #5f87af clr-dark-yellow - #d7d700

Neturals

clr-black - #444 clr-dark-grey - #757575 clr-grey - #c6c6c6 clr-light-grey - #e4e4e4

Key

Ctrl + F

Code

	#include stdio.h
		
	int main(){
		printf("The web is a friggin mess.");
	}

Input

Form

Input Form






Input Form





Contact Us