Front-end framework with a built-in dark mode, designed for rapidly building beautiful dashboards and product pages.
- Designed specifically for building dashboards—This means that a lot of importance is placed on components such as forms, navbars, sidebars, dropdowns, toasts, shortcuts, etc.
- Built-in dark mode—Now all of your websites will automatically come with a dark mode.
- Bootstrap like classes—The class names should be instantly familiar to anyone who has used Bootstrap.
- Cross-browser compatibility—Fully supports almost all the browsers under the sun, including really old ones like Internet Explorer 11.
- Easily customizable—The repo also contains a
variables file (
halfmoon-variables.css) where custom CSS properties (variables) are used in the code for things like colors, layout properties, etc. This makes it extremely easy to customize Halfmoon to your liking, as the use of modern CSS variables means that things like pre-processors are not needed.
To learn more, go to the documentation.
The quickest way to get started with Halfmoon is by using the CDN to include the following files:
<!-- Halfmoon CSS --> <link href="https://email@example.com/css/halfmoon.min.css" rel="stylesheet" /> <!-- Halfmoon JS --> <script src="https://firstname.lastname@example.org/js/halfmoon.min.js"></script>
npm install halfmoon
After installation, the required CSS and JS file can be imported in the following way:
// Include CSS file require("halfmoon/css/halfmoon.min.css"); // Import JS library var halfmoon = require("halfmoon");
Please note that manual initialization is required for some components, that is, after the DOM is loaded, the following method needs to be called:
// Call this method after the DOM has been loaded halfmoon.onDOMContentLoaded();
In this way, Halfmoon can be used with frameworks that use the
virtual DOM, such as React and Vue. For instance, in the case of
halfmoon.onDOMContentLoaded() method would be
called inside the
mounted() hook of your
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.
Copyright 2020, Halfmoon UI