I recently launched the first production version of Halfmoon, a front-end framework that I have been building for the last few months. This is a short introductory post about what the framework is, and why I decided to build it.
The elevator pitch
Halfmoon is a front-end framework with a few interesting things going for it:
- Dark mode built right in: Creating a dark mode version of a site is baked in and a snap.
- Modular components: A lot of consideration has gone into making modular components — such as forms, navbars, sidebars, dropdowns, toasts, shortcuts, etc. — that can be used anywhere to make layouts, even complex ones like dashboards.
- All the CSS classes you need: The class names should be instantly familiar to anyone who has used Bootstrap because that was the inspiration.
- Cross-browser compatibility: Halfmoon fully supports nearly every browser under the sun, including really old ones like Internet Explorer 11.
- Easily customizable: Halfmoon uses custom CSS properties for things like colors and layouts, making it extremely easy to customize things to your liking, even without a CSS preprocessor.
In many ways, you can think of Halfmoon as Bootstrap with an integrated dark mode implementation. It uses a lot of Bootstrap’s components with slightly altered markup in many cases.
OK, great, but why this framework?
Whenever a new framework is introduced, the same question is inevitably pops up: Why did you actually build this? The answer is that I freaking love dark modes and themes. Tools that come with both a light and a dark mode (along with a toggle switch) are my favorite because I feel that being able to change a theme on a whim makes me less likely to get bored looking at it for hours. I sometimes read in dim lighting conditions (pray for my eyes), and dark modes are significantly more comfortable in that type of situation.
I just wanted to share Halfmoon with you to let you know that it exists and is freely available if you happen to be looking for an extensible framework in the same vein as Bootstrap that prioritizes dark mode in the implementation.
And, as you might imagine, I’m still working on Halfmoon. In fact I have plenty of enhancements in mind:
- More components
- More customization options (using CSS variables)
- More examples and templates
- Better tooling
- Improved accessibility examples in the docs
In short, the plan is to build a framework that is really useful when it comes to building complex dashboards, but is still great for building any website. The documentation for the framework can be found on the project’s website. The code is all open-source and licensed under MIT. You can also follow the project on GitHub. I’d love for you to check it out, leave feedback, open issues, or even contribute to it.
The post Halfmoon: A Bootstrap Alternative with Dark Mode Built In appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.