↖

# Neat CSS

Rapidly build efficient sites with Neat, the minimalist css framework. Neat is about 3Kb and that's before it's minified and compressed.

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

## About

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.

"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.

Need a hand? Join the free Five Day Neat Starter email course and build a lean, production-ready page before Friday.

Click Here for the Free Starter Course

## Uses

Neat was designed for:

- Blogs
- Journals
- Technical sites
- Documentation
- Books
- Simple shops

## 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.

### Centered Body

The body is centered as of Neat 0.1.0. I use Neat as a starting point for most of my own projects and I found myself centering the body the majority of the time. As a result, the default is now centered. You can still left-align by adding `margin-left` and `margin-right` to your custom.css file.

### Single Navigation Link

There is no header and no navigation, other than a single link back to the home page or a menu page. This prevents both the distraction of navigation and the requirement to edit multiple pages to change navigation.

The default template includes a single "home" button at the top-left. You can also use the `menu` class with a `&equiv;` html entity (hamburger menu) and link to something like `menu.html`. The `menu` class is right-aligned while the `home` class is left-aligned.

### 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

If you don't center the page, the left gutter is wider at larger sizes, giving the page a little more breathing room at desktop and tablet sizes. You don't typically notice this because the default is now centered.

### Buttons

There are multiple types of buttons. There are anchor tags (links) that should sometimes look like buttons, button tags, and submit style input tags.

It's best to use semantic web tags whenever possible. Buttons can be a unique case where you're often linking somewhere, but the button tag doesn't support the href attribute. So, buttons can be anchor tags with a class of button.

The html button tag is also styled in the same way. When buttons aren't links, for example when you're using JavaScript to trigger actions from button clicks, the button tag still works.

Input tags of type submit are also styled this way.

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

    <button>Button</button>

    <input type="submit" value="Button">

Button

### Input Fields

The input tag is styled to support light and dark themes.

    <input>

### Responsive

Neat is designed to be responsive.

### Grid

As of v0.1.0 Neat has a simple grid system. Each column is automatically sized. Put in four columns and you'll get four equally sized columns. All columns collapse to a single column on mobile. If you force something too large into one of the columns it will automatically grow to fit the content, shrinking the other columns. You can either avoid doing that or add something like `overflow: hidden;` to the `.flow > *` selector in your custom.css file.

Note: The column class has been removed as of v1.0.0 and all elements become columns by default. This should be backword compatible in most cases and is less code.

    <div class="row">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
    </div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

### Centering

You can throw the center class on almost anything you want to center, including a div tag.

### Breathing Room

You can throw the breathe class on almost anything to add a bit of breathing room, including a div or p tag. This is useful for marketing page text on landing pages and footers that you want to move down a bit.

### Quotes

Blockquotes now have a left border.

> Hello World

## Examples

Example uses of Neat can be found in the example repository.

### Framework

Yes, Neat is a framework. The American Heritage Dictionary describes a framework as, "a skeletal support used as the basis for something being constructed". Wikipedia describes a CSS Framework as, "a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language." That's exactly what Neat is, a framework that I use on dozens of my own websites.

## 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. Feedback and discussions will lead to better ideas for future improvements.

## GitHub

You'll find Neat CSS on GitHub.

Neat is an open source project operated by Dare Companies Dotcom LLC.