CSS file that makes your webpage look good with just 144 bytes.
Drop gross.css
somewhere in your project and use it in the html <head>
:
<link rel="stylesheet" media="all" href="gross.css" />
Browser default styles are great, they take care of most of the styling, they use system fonts, they respect accessibility settings, etc. But they are pretty ugly. It looks like your visiting a page from 90’s. With these 144 characters of CSS you get most of the browser defaults, with a tiny set of tweaks to make the page look more modern.
Visit the Demo to see all the styles. And make sure to have a look at it in different browsers.
Make the background light gray to make it more calming for the eyes.
Use system font, but soften the color and increase the size and the line height.
Give tables nicer borders.
Show blockquotes in a different text color.
12 times a dozen is 144, and it is called a gross. So this it’s a joke. Browsers default styles are ugly, and this CSS file uses just 144 bytes to make it gross.
Because I can. I wanted to create a smalltiny project that I actually was able to get to a completed state. With just 144 characters, I didn’t set the bar high.
It orginally started with a tweet by @pjaspers:
The minimal amount of CSS to make a plain old HTML document look good? codepen.io/anon/pen/RxymdE
This got my thinking, and suddenly I came up with the name gross and the number 144, and I just had to make it happen.
Read the CHANGELOG.
gross.css is licensed under MPL 2.0.