Halfmoon

Front-end framework with a built-in dark mode and full customizability usin...

CSS Toolkit
halfmoonui/halfmoonwww.gethalfmoon.comhalfmoon

README

This is the main branch of the repo, which contains the latest stable release. For the ongoing development, see the develop branch.

Halfmoon


Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.


- Built-in dark mode—Halfmoon comes with a built-in, toggleable dark mode, which is one of its most important and defining features.
- Fully customizable using CSS variables—The framework 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. Learn more about customization.
- Great for building dashboards and tools—The components have a very standard look and feel to them, making them suitable for dashboards and tools. Moreover, a lot of importance is placed on components such as forms, navbars, sidebars, dropdowns, toasts, shortcuts, etc. and there are also tons of utilities available.
- Optional JS library—Many of the components found in Halfmoon are built to work without JavaScript. However, the framework still comes with a powerful JavaScript library with no extra dependencies, such as jQuery.
- Bootstrap like classes—The class names should be instantly familiar to anyone who has used Bootstrap.
- Cross-browser compatibility—Fully supports almost all the browsers under the sun, including really old ones like Internet Explorer 11.

To learn more, go to the documentation.

Quickstart


The quickest way to get started with Halfmoon is by using the CDN to include the following files:

  1. ``` html
  3. <link href="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/css/halfmoon-variables.min.css" rel="stylesheet" />
  4. <!--
  5.   Or,
  6.   Use the following (no variables, supports IE11):
  7.   <link href="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/css/halfmoon.min.css" rel="stylesheet" />
  8. -->
  9. <script src="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/js/halfmoon.min.js"></script>
  10. ```

**Pleast note**, the JS file should be placed at the end of the `` tag. Otherwise, some things may not work as expected. For example, using the `onclick="..."` event to call one of Halfmoon's built-in methods will not work **unless** the JS file is placed at the end of the `` tag.

Using npm


  1. ```
  2. npm install halfmoon
  3. ```

After installation, the required CSS and JS file can be imported in the following way:

  1. ``` js
  2. // Include CSS file
  3. require("halfmoon/css/halfmoon-variables.min.css");
  4. /*
  5.   Or,
  6.   Include the following (no variables, supports IE11):
  7.   require("halfmoon/css/halfmoon.min.css");
  8. */

  10. // Import JS library
  11. const halfmoon = require("halfmoon");
  12. ```

Please note that manual initialization is required for some components, that is, after the DOM is loaded, the following method needs to be called:

  1. ``` js
  2. // Call this method after the DOM has been loaded
  3. halfmoon.onDOMContentLoaded();
  4. ```

This initializes all of the components that require JavaScript, such as dropdowns, custom file inputs, shortcuts, etc.

In this way, Halfmoon can be used with frameworks that use the virtual DOM, such as React and Vue. For instance, in the case of Vue, the halfmoon.onDOMContentLoaded() method would be called inside the mounted() hook of your component.

Using React


If you are using React to call the built-in methods, such as halfmoon.toggleSidebar(), please make sure the call is made in a way that binds the correct context. There are two ways to do this:

1.  Using an anonymous method:

  1. ``` html
  2.     <button className="btn" type="button" onClick={() => halfmoon.toggleSidebar()}
  3. ```

2.  Using bind:

  1. ``` html
  2.     <button className="btn" type="button" onClick={halfmoon.toggleSidebar.bind(halfmoon)}>
  3. ```

You can find more details in the React documentation.

Starter template generator


You can use the starter template generator to generate boilerplates for your project. The generator takes your settings and adds the appropriate classes and defines the required containers and elements.

Once again, we recommend reading the documentation, as it contains a lot of examples to help you quickly build websites.

License


Halfmoon is licensed under the MIT license.

Copyright


Copyright 2020, Halfmoon UI