newmoon

Newmoon CSS

Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.

⚠️ WARNING: until the 2.0.0 release, this is heavily work-in-progress, and lots of stuff like HTML usage and especially CSS variables are subject to change! Don't use this yet unless you want to keep up with the latest commits & change everything accordingly.

Newmoon is forked from Halfmoon with the aim to provide a very lightweight alternative to heavy frameworks like Bootstrap or Bulma. If you are looking for a drop-in replacement for Halfmoon instead, have a look at Fullmoon. All changes are logged in the changelog.

• Built-in dark mode — Newmoon comes built-in support for prefers-color-scheme.
• Fully customizable using CSS variables — The framework is built entirely using CSS variables (also known as CSS custom properties). There are close to 1,500 CSS variables, which means that almost everything can be customized by overriding a property, making it very easy to theme Newmoon to fit your brand. Learn more about customization.
• Great for building dashboards and tools — The components have a very standard look and feel to them, making them suitable for dashboards and tools. Moreover, a lot of importance is placed on components such as forms, navbars, sidebars, dropdowns, toasts, shortcuts, etc. and there are also tons of utilities available.
• Bootstrap like classes — The class names should be instantly familiar to anyone who has used Bootstrap.
• Cross-browser compatibility — Fully supports almost all the current browsers under the sun.
• Tiny filesize — The whole framework is just ... KB in size.
• No JavaScript out-of-the-box — Many frameworks require JavaScript for UI features, which is avoided at all costs while still providing modern functionality like popups, a toggleable sidebar, and much more.

To learn more, go to the documentation.

Quickstart

The quickest way to get started with Newmoon is by using the CDN to include the following files:

<!-- Halfmoon CSS -->
<link href="https://cdn.jsdelivr.net/npm/newmoon@2.0.0/dist/newmoon.min.css" rel="stylesheet" />

Using npm

npm install newmoon

After installation, the required CSS file can be imported in the following way:

// Include CSS file
require("halfmoon/dist/newmoon.min.css");

Starter template generator

You can use the starter template generator to generate boilerplates for your project. The generator takes your settings and adds the appropriate classes and defines the required containers and elements.

Once again, we recommend reading the documentation, as it contains a lot of examples to help you quickly build websites.

License

Newmoon is licensed under the MIT license.

Copyright

Copyright 2022, Moritz Marquardt & others, see LICENSE.

Based on Halfmoon (by Halfmoon UI), which in turn is based on Bootstrap.