Introduction

Halfmoon is a responsive front-end framework with a lot of useful and interesting qualities to help you build websites. It comes with a built-in dark mode, which is one of its most important and defining features.

Every single element has a different set of styles in dark mode. The dark mode styles are applied to an element when its parent element has the .dark-mode class. Therefore, the ideal way to do this is by adding the class to the DOM's body.

This is exactly what the built-in halfmoon.toggleDarkMode() method is doing in the above example (along with saving the preference in a cookie). You can read more about this in the core JavaScript library section (opens in new tab) of the documentation.

Fully customizable using CSS variables #

Another great thing about the framework is that it 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 Halfmoon to fit your brand.

You can see a demo of this below. Click the button on the top right to change the theme.

While it is impossible to understand what is happening without looking at the code, the gist of it is that you can simply override the variables to create a custom theme, or even create completely new components. You can learn about these concepts and also find detailed code examples in the customize section (opens in new tab) of the docs. We highly recommend giving that page a good, thorough read.

Great for building dashboards (and tools) #

Halfmoon can be used to create most types of websites. However, it really shines when it comes to building dashboards and other tools (such as admin panels). This is thanks to the following features:

• A highly standardized look and feel to the components. Everything is designed to be snappy and highly usable.
• The aforementioned built-in dark mode. At least half of the users now expect their dashboards and tools to have a dark mode, and Halfmoon provides this by default.
• Huge customizability thanks to the CSS variables (as explained above).
• Availability of different types of navbars, five different types of sidebars, omnidirectional dropdowns, toasts, tons of utilities, etc. — all of these things are very useful when it comes to building tools on the web.
• Built-in shortcuts — shift + D to toggle dark mode, and shift + S to toggle the sidebar.

Moreover, you will also find that most examples in the docs are geared towards dashboards and tools. For instance, check out this example (opens in new tab) in the grid system section of the docs. With all that said, it is worth repeating that Halfmoon can definitely be used to build other types of websites as well.

Optional JavaScript library #

Many of the components found in Halfmoon are built to work without JavaScript, including things like modals and tooltips. Given below is an example.

However, Halfmoon comes with a powerful JS library that implements all the necessary functionalities in one small file. This also includes things like the keyboard shortcuts mentioned above — shift + D to toggle dark mode, and shift + S to toggle the sidebar. Please note, the shortcuts don't interfere with inputs, and is turned off by default.

See the core JavaScript library (opens in new tab) for details. You can also download it (along with all the other things) from the download page (opens in new tab). Moreover, there is no dependency on jQuery, and everything is pure, vanilla JavaScript.

Bootstrap like classes #

Halfmoon is designed to have classes very similar to the ones found in Bootstrap, which is by far the most popular CSS framework in the world. This is because most designers are already familiar with those class names, and can therefore immediately jump into Halfmoon.

Most of the commonly used components, such as buttons, tables, inputs, dropdowns, alerts, modals, pagination, breadcrumb, badges, etc, are fully similar (in terms of class names and structure). Some components do have tiny differences, but the differences are usually trivial. For instance, see the switches below.

Therefore, even when there are differences, they are usually insignificant. It has to be noted, however, that Halfmoon is not a drop-in replacement theme for Bootstrap. It is a custom front-end framework built from the ground up with a very simple goal — help people quickly build dashboards, tools, and other websites that are highly usable and automatically come with built-in dark modes for their users.

Cross-browser compatibility #

Halfmoon is compatible with almost all the browsers available, including some legacy ones that are still used. This includes but is not limited to:

• Google Chrome
• Safari
• Mozilla Firefox
• Microsoft Edge (including old versions that came pre-packaged with some machines)
• Internet Explorer 11 (almost fully supported)

and more. As mentioned above, Halfmoon has almost full compatibility with IE11. You can learn more about this in the Internet Explorer support section (opens in new tab) of the docs.

Compact and performant #

The core of Halfmoon is the following — one CSS file, and one JavaScript file (with no dependencies). This lack of bloat, and use of native browser technology (plain old CSS and vanilla JS) results in fast page loads and good performance all across the board. Everything is designed to feel snappy and responsive.

Ready to get started? #

Once you are ready to get started, you can jump to the download section. You can also check out the customize section of the docs, which is a guide for understanding customization with CSS variables (as mentioned above). Other than that, the page building section breaks down the basics of building pages in Halfmoon. There is also a starter template generator, which lets you generate boilerplates for your project. We look forward to seeing what you decide to build with Halfmoon.