Halfmoon is a drop-in Bootstrap replacement that is highly customizable. Build anything—from prototype to production—in minutes.
Halfmoon is an open-source, MIT-licensed, responsive CSS framework. You can find everything on GitHub (opens in new tab). It has a lot of useful and interesting qualities to help you quickly build websites and web applications, such as a built-in dark mode, full customizability with CSS variables, etc.
Halfmoon's defining feature is that it is a drop-in replacement for Bootstrap, meaning you can replace
bootstrap.bundle.js), meaning that the entire Bootstrap ecosystem is immediately available for you to use with Halfmoon, including the component libraries for popular JS frameworks such as React, Vue, Angular, Svelte, etc.
Customization and theming #
Halfmoon is fully customizable using CSS variables. We employ a novel method for this: defining broadly scoped, root-level variables, which are then inherited by component-level variables. This means that you can change a handful of the root-level variables and have those changes propagate to individual components. For example, changing the root-level
--bs-content-bg will change the background color of cards, modals, sidebar, and offcanvas components. This makes theming incredibly quick and easy.
Please see the customization and theming page to learn more. In the meantime, check out this cool demo, where you can click the button on the top right to change the theme.
Why use over Bootstrap? #
The decision to use Halfmoon over Bootstrap (or vice versa) will ultimately come down to personal preferences, and the unique needs of that particular project. All we want to do is document the core differences to make the decision easier:
Halfmoon is designed from the ground up with a highly standardized look. This means that a lot of the components will look perfectly suited for dashboards, tools, e-commerce stores, etc. The design is intentionally standard and classic, inspired by the likes of macOS. This is going to be the most important factor for someone picking one over the other. If you like the look and feel here, feel free to use Halfmoon because everything else is the same.
Approach to customization
As mentioned above, Halfmoon employs a different method of customization. If you prefer CSS variables over Sass and other CSS build systems, it is recommended that you stick with Halfmoon. CSS variables are now widely supported, and they are (by far) the easiest way to theme and customize websites and applications.
This ties into the above point. Halfmoon has no build system—nothing to compile, variables work at runtime, etc. It is easy to get started and customize—pull in the CSS file, override the variables to fit your needs (or use the default theme), and start building right away.
The only additional feature that Halfmoon has over Bootstrap is the dedicated sidebar component. Therefore, if your project absolutely needs a sidebar and you don't want to implement one yourself, feel free to use ours.
Quick start #
Ready to get started? Go to the download page to get yourself a copy of the latest version of Halfmoon. That page also contains a useful starter template. We look forward to seeing what you decide to build with Halfmoon!
Help us grow
Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.
You can email us directly if you have any queries. We are always happy to answer.
Subscribe for updates
We will notify you when the framework gets a substantial update. No spam ever.
Follow us on Twitter so that you can stay updated that way.