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.

You can click on the following button to toggle dark mode (or press shift + D).

<!-- HTML -->
<button class="btn btn-primary" type="button" onclick="toggleDemo()">Click me!</button>

<!-- JavaScript -->
<script src="path/to/halfmoon.js"></script>
<script type="text/javascript">
  // Dark mode toggle demo
  function toggleDemo() {
    halfmoon.toggleDarkMode();
  }
</script>

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.

This demo does not work on Internet Explorer, because the browser does not support CSS variables. Please open this page using another browser to view the demo.

The above example is loaded in an iFrame, so a few things may look out of place depending on your browser settings and screen size. Open it in a new tab

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 the 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 very standard 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).
  • Two different types of navbars, and five different types of flexible sidebars.
  • Built-in shortcuts — shift + D to toggle dark mode, and shift + S to toggle the sidebar.
  • General emphasis placed on components such as forms, dropdowns, toasts, etc. and availability of tons of utilities.

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. It is worth repeating however, 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.

The following button opens a modal with a tooltip attached to it. All of this works without any JavaScript.

Open modal
<!-- Modal -->
<div class="modal" id="demo-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Button to open modal -->
<a href="#demo-modal" class="btn btn-primary" data-toggle="tooltip" data-title="Tooltip message" role="button">Open modal</a>

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.

This switch is rendered using class names taken from Bootstrap's docs:

<!-- Bootstrap classes -->
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="switch-1">
  <label class="custom-control-label" for="switch-1">Toggle switch</label>
</div>

This switch element is rendered using class names found in Halfmoon:

<!-- Halfmoon classes -->
<div class="custom-switch">
  <input type="checkbox" id="switch-2">
  <label for="switch-2">Toggle switch</label>
</div>

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.


Up next: Download

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.