Download

Download Halfmoon to get the compiled CSS, or include it with a package manager.

Compiled CSS #

Halfmoon is an open-source, MIT-licensed, CSS framework. You can find everything on GitHub (opens in new tab), or click on the button below to download ready-to-use compiled CSS for Halfmoon, which includes the following:

halfmoon.css — compiled and minified
halfmoon.rtl.css — compiled and minified, for right-to-left pages (learn more)
Core theme CSS files inside the /css/cores folder (learn more)

Start download

JavaScript #

Halfmoon is a drop-in replacement for Bootstrap. We implement no JavaScript on our own, therefore, there is no halfmoon.js (or anything similar). Instead we rely entirely on bootstrap.bundle.js, which you can download from Bootstrap's website (opens in new tab). This means that you can replace bootstrap.css with halfmoon.css on your website, and everything should work exactly as expected.

This also means that you can use any of the Bootstrap component libraries for popular JS frameworks such as React, Vue, Angular, Svelte, etc.

Starter template #

Here's a starter template to help you quickly get started with Halfmoon. You can replace the CDN links with locally available file paths if you want to.

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Starter template - Halfmoon</title>

    <!-- Halfmoon CSS -->
    <link href="https://cdn.jsdelivr.net/npm/halfmoon@2.0.1/css/halfmoon.min.css" rel="stylesheet" integrity="sha256-SsJizWSIG9JT9Qxbiy8xnYJfjCAkhEQ0hihxRn7jt2M=" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Option 1: Bootstrap JS bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Package managers #

Pull Halfmoon into your projects with some of the most popular package managers.

Package managers npm #

Use Halfmoon in your Node.js powered apps with the npm package (opens in new tab):

Terminal

# Install Halfmoon with npm
npm i halfmoon@2.0.1

Once the package has been installed, you can simply import the CSS file:

JavaScript

// Import Halfmoon CSS
import "halfmoon/css/halfmoon.min.css";

Package managers yarn #

Use Halfmoon in your Node.js powered apps with the yarn package (opens in new tab):

Terminal

# Install Halfmoon with yarn
yarn add halfmoon@2.0.1

Up next

Customize and theme

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.