Neat CSS

Rapidly build efficient sites with Neat, the minimalist css framework.

  1. Download
  2. About
  3. Getting Started
  4. Uses
  5. Customizing
  6. Design Decisions
  7. Contributing
  8. Github

Download

Neat CSS 0.0.2 (4k) — 25 September 2020

About

Neat is a simple HTML template. It's tiny, opinionated, and made to last. It's created by Joel Dare and heavily inspired by other minimalist sites like Hundred Rabbits and dozens of similar blogs.

Neat is currently 7k (yes kilobytes) including this documentation. It adds only about 1k of overhead to whatever you create and that's not minified or compressed.

"That's pretty neat!"

Getting Started

Grab the neat.css and neat.html files.

curl -O https://neat.joeldare.com/neat.css
curl -O https://neat.joeldare.com/neat.html

Then copy neat.html to index.html and make your changes. Use neat.html as a reference.

Uses

Neat was designed for.

Customizing

It's easy to customize Neat. The best way is to create a new custom.css file and then add the following line to the head of your page.

<link rel="stylesheet" type="text/css" href="custom.css">

That will give you the option of updating neat.css without losing any of your personalizations.

Design Decisions

Neat is opinionated and here are some of the design decisions and the rationale for each of them.

Small

In contrast with the majority of the modern web, Neat was designed to be tiny. A side-effect of being small is that it's also very fast.

Low Energy

Because it's small and fast it also consumes fewer resources. It should work well even on the slowest connections. Consuming less energy on both the client and the server.

Long-Lasting

The web is relatively young and technology changes fast but one of the technologies that has lasted as long as the Internet is HTML. There are lots of other interesting formats but plain HTML has a good chance of working well into the future.

Not Minified

Minified code requires the complexity of a transpiler and makes the site less open for inspection, learning, accessibility, and archive. The size trade-off isn't worth it for Neat.

Max Width

The body max-width is 800px by default. Research has shown that limiting the width can lead to better retention of the content itself, as well as a decrease in eye strain. A thinner column of text is more readable on very large monitors. This is simple to change by editing the max-width of the body element in your custom.css file.

Images

Images are 100% width by default. This works best with images that are wide and short. You can set manual sizes on individual images as it suits you or change the image width in your custom.css if you typically use a different aspect ratio.

Images have no border by default. This works well for dark colored images but light colored images can get lost. Add something like border: 3px solid #404040 if your image needs a border.

Left Gutter

The left gutter is wider at larger sizes, giving the page a little more breathing room at desktop and tablet sizes.

Buttons are Links

It's best to use semantic web tags whenever possible. Buttons are a unique case where you're typically linking somewhere, but the button tag doesn't currently support the href attribute. So, buttons are anchor tags with a class of button. You can also throw a div, with a center class, around them if you want a button centered.

<a class="button" href="#">Button</a>
Button

No Header

Because of the complexity of the css and the distraction of navigation, there is no header and no navigation, other than the link back to the home page.

Responsive

Neat is designed to be responsive.

Contributing

Neat is distributed as open-source under the MIT license.

Anything related to Neat is fair game for discussion. Anyone who's interested is welcome to join in the conversation. If you find a problem or have a suggestion, feel free to create an issue on Github. I'm also happy to review code change requests. To do that, fork the project and create a pull request or just email me a diff. Feedback and discussions will lead to better ideas for future improvements.

Github

You'll find Neat CSS on Github.