Neat CSS
Quickly construct environment friendly websites with Neat, the minimalist css framework.
Obtain
Neat CSS 0.1.1 — 25 April 2023
About
Neat is a straightforward HTML template. It is tiny, opinionated, and made to final. It is created by Joel Dare and closely impressed by different minimalist websites like Hundred Rabbits and dozens of comparable blogs.
Neat is about 2Kb and that’s not minified or compressed. This documentation provides a couple of extra bytes.
“That is fairly neat!”
Getting Began
Seize the neat.css and neat.html information.
curl -O https://neat.joeldare.com/neat.css
curl -O https://neat.joeldare.com/neat.htmlThen copy neat.html to index.html and make your modifications. Use neat.html as a reference.
Makes use of
Neat was designed for.
- Blogs
- Journals
- Technical websites
- Documentation
- Books
- Easy outlets
Customizing
It is easy to customise Neat. One of the simplest ways is to create a brand new customized.css file after which add the next line to the top of your web page.
<hyperlink rel="stylesheet" kind="textual content/css" href="https://neat.joeldare.com/customized.css">
That gives you the choice of updating neat.css with out shedding any of your personalizations.
Design Selections
Neat is opinionated and listed below are a number of the design choices and the rationale for every of them.
Small
In distinction with nearly all of the fashionable internet, Neat was designed to be tiny. A side-effect of being small is that it is also very quick.
Low Power
As a result of it is small and quick it additionally consumes fewer assets. It ought to work nicely even on the slowest connections. Consuming much less vitality on each the consumer and the server.
Lengthy-Lasting
The online is comparatively younger and know-how modifications quick however one of many applied sciences that has lasted so long as the Web is HTML. There are many different attention-grabbing codecs however plain HTML has a very good probability of working nicely into the longer term.
Not Minified
Minified code requires the complexity of a transpiler and makes the location much less open for inspection, studying, accessibility, and archive. The scale trade-off is not price it for Neat.
Max Width
The physique max-width is 800px by default. Research has proven that limiting the width can result in higher retention of the content material itself, in addition to a lower in eye pressure. A thinner column of textual content is extra readable on very giant screens. That is easy to alter by enhancing the max-width of the physique component in your customized.css file.
Centered Physique
The physique is centered as of Neat 0.1.0. I exploit Neat as a place to begin for many of my very own initiatives and I discovered myself centering the physique nearly all of the time. Because of this, the default is now centered. You may nonetheless left-align by including margin-left and margin-right to your customized.css file.
Pictures
Pictures are 100% width by default. This works greatest with pictures which can be large and brief. You may set handbook sizes on particular person pictures because it fits you or change the picture width in your customized.css for those who sometimes use a unique side ratio.
Pictures don’t have any border by default. This works nicely for darkish coloured pictures however gentle coloured pictures can get misplaced. Add one thing like border: 3px strong #404040 in case your picture wants a border.
Left Gutter
The left gutter is wider at bigger sizes, giving the web page somewhat extra respiration room at desktop and pill sizes.
Buttons
There are a number of varieties of buttons. There are anchor tags (hyperlinks) that ought to typically seem like buttons, button tags, and submit model enter tags.
It is best to make use of semantic internet tags every time potential. Buttons generally is a distinctive case the place you are usually linking someplace, however the button tag does not help the href attribute. So, buttons may be anchor tags with a class of button.
The html button tag can also be styled in the identical method. When buttons aren’t hyperlinks, for instance while you’re utilizing JavaScript to set off actions from button clicks, the button tag nonetheless works.
Enter tags of kind submit are additionally styled this fashion.
<a href="#" class="button">
<button>Button</button>
<enter kind="submit" worth="Button">
Enter Fields
The enter tag is styled to help gentle and darkish themes.
<enter>
No Header
Due to the complexity of the css and the distraction of navigation, there isn’t any header and no navigation, aside from the hyperlink again to the house web page.
Responsive
Neat is designed to be responsive.
Grid
As of v0.1.0 Neat has a easy grid system. Every column is robotically sized. Put in 4 columns and you will get 4 equally sized columns. All columns collapse to a single column on cell.
<div class="row">
<div class="column">One</div>
<div class="column">Two</div>
<div class="column">Three</div>
<div class="column">4</div>
</div>Centering
You may throw the heart class on virtually something you need to heart, together with a div tag.
Contributing
Neat is distributed as open-source beneath the MIT license.
Something associated to Neat is truthful recreation for dialogue. Anybody who’s is welcome to hitch within the dialog. When you discover an issue or have a suggestion, be happy to create an issue on GitHub. I am additionally completely happy to evaluate code change requests. To do this, fork the undertaking and create a pull request or simply email me a diff. Suggestions and discussions will result in higher concepts for future enhancements.
GitHub
You may discover Neat CSS on GitHub.