This is a motherfucking website with a stylesheet.

And it's fucking perfect.

Seriously, what the fuck else do you want?

You probably build websites and think your shit is special. You think your 13 megabyte parallax-ative home page is going to get you some fucking Awwward banner you can glue to the top corner of your site. You think your 40-pound jQuery file and 83 polyfills give IE7 a boner because it finally has box-shadow. Wrong, motherfucker. Let me describe your perfect-ass website:

Shit's lightweight and loads fast.
Fits on all your shitty screens.
Looks the same in all your shitty browsers.
The motherfucker's accessible to every asshole that visits your site.
Shit's legible and gets your fucking point across (if you had one instead of just 5mb pics of hipsters drinking coffee).

Well guess what, motherfucker:

You. Are. Over-designing. Look at this shit. It's a motherfucking website. Why the fuck do you need to animate a fucking trendy-ass banner flag when I hover over that useless piece of shit? You spent hours on it and added 80 kilobytes to your fucking site, and some motherfucker jabbing at it on their iPad with fat sausage fingers will never see that shit. Not to mention blind people will never see that shit, but they don't see any of your shitty shit.

You never knew it, but this is your perfect website. Here's why.

It's fucking lightweight

This entire page weighs less than the gradient-meshed facebook logo on your fucking Wordpress site. Did you seriously load 100kb of jQuery UI just so you could animate the fucking background color of a div? You loaded all 7 fontfaces of a shitty webfont just so you could say "Hi." at 100px height at the beginning of your site? You piece of shit.
It's responsive

You dumbass. You thought you needed media queries to be responsive, but no. Responsive means that it responds to whatever motherfucking screensize it's viewed on. This site doesn't care if you're on an iMac or a motherfucking Tamagotchi.
It fucking works

Look at this shit. You can read it ... that is, if you can read, motherfucker. It makes sense. It has motherfucking hierarchy. It's using HTML5 tags so you and your bitch-ass browser know what the fuck's in this fucking site. That's semantics, motherfucker.

It has content on the fucking screen. Your site has three bylines and link to your dribbble account, but you spread it over 7 full screens and make me click some bobbing button to show me how cool the jQuery ScrollTo plugin is.

Cross-browser compatibility? Load this motherfucker in IE6. I fucking dare you.

This is a website. Look at it. You've never seen one before.

Like the man who's never grown out his beard has no idea what his true natural state is, you have no fucking idea what a website is. All you have ever seen are shitty skeuomorphic bastardizations of what should be text communicating a fucking message. This is a real, naked website. Look at it. It's fucking beautiful.

Yes, this is fucking satire, you fuck

I'm not actually saying your shitty site should look like this. What I'm saying is that all the problems we have with websites are ones we create ourselves. Websites aren't broken by default, they are functional, high-performing, and accessible. You break them. You son-of-a-bitch.

"Good design is as little design as possible."
- some German motherfucker

And the rest is fucking beautiful too

This is a motherfucking abbr, cite, code, dfn, kbd, mark, samp, small, _sub, ^sup, time.

preformatted code block

Even a monkey could figure this shit out.

Why?: It's a description list. It describes things. That's it.
HTML: The backbone of the web. Literally.
CSS: Because plain HTML looks like a 90s Geocities page.
JavaScript: The thing you add when you realize your site needs to do stuff.
Frameworks: How you end up shipping a 3MB bundle to display text.
jQuery: It was good. Then it wasn't. Now it's in your legacy code.
So what?: That's it. No div soup. No nonsense. Just a motherfucking description list.

Look at this damn table.

It's a table. It's beautiful. It does exactly what you think it does.
Thing	Description	Does it suck?
Tables	Organize data like a boss.	No.
Spreadsheets	Like tables but with unnecessary drama.	Sometimes.
CSS Grid	Great for layouts, bad for tabular data.	Not really, but don't use it here.
Fancy UI Libraries	Make a table? Sure, just import 50MB of JavaScript.	Yes.
No JavaScript.	No frameworks.	No bullshit.

10% completed bitch

60% of the time it works everytime

Fill out this shit

Personal Information Name: Email: Location:

Preferences

Subscribe to newsletter:

Are you interested in hearing about updates?

Yes No

Message:

Root Variables: The Carrots of Your CSS Diet

Instead of littering your HTML with a hundred utility classes like a chaotic gremlin:

<button class="p-4 text-xl font-bold bg-black hover:bg-gray-800 active:bg-gray-700 focus:ring-4 focus:ring-indigo-500 disabled:opacity-50">Click me</button>

Seriously, what is this? A **button**, or a secret code to launch a spaceship?

Instead, use **variables** like a civilized human:

button {
  padding: var(--s3);
  font-size: var(--f4); font-weight: 700;
  background: var(--c-black);
  color: var(--c-white) }

button:hover {
  background: var(--c-gray);
  color: var(--c-black) }

button:focus {
  outline: 1px solid var(--c-dark-purple); }

button:disabled {
    opacity: .5 }

Look at that. **Readable. Maintainable. Elegant.**

No **class soup**, no searching through a 500-page Tailwind config file, no existential crisis over whether pl-4 or px-4 is the right choice. Just **pure, uncut CSS**, like nature intended.

See the whole motherfucking color palette, even Picasso doesn't have shit on this.

Install

You want to make a beautiful website? Good. But you don't want to spend hours tweaking pixels like a fool? Even better. Just include base.css like this:

<link rel="stylesheet" href="base.css">

Want to find base.css? Open DevTools (F12 like a pro), go to the Network tab, reload the page, and look for a file named base.css. go to the Network tab, reload the page, and look for something called base.css. If that sounds too complicated, just right-click anywhere, hit Inspect, and start clicking around like a caffeinated raccoon digging through a trash can. You'll find it. I believe in you.

Boom. That's it. Your site is now stunning. No 20MB framework, no 500-class utility system, no CSS-in-JS nonsense. Just one damn file that makes everything look good.

I know what you're thinking,

"But duuuuude what if I don't want an extra request?"

Fine. You want real efficiency? Paste the whole stylesheet right inside your HTML like a savage:

<style>
    /* Behold, the only stylesheet you will ever need */
</style>

That's right. No build steps. No dependencies. No BS. Just pure, uncut, artisanal CSS.

Got a suggestion?

Pull request that motherfucker.