Download
Download Halfmoon to get the compiled CSS and JavaScript, and start building right away.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
Compiled CSS and JavaScript #
Download ready-to-use compiled code for Halfmoon v1.1.1, which includes the following:
- halfmoon-variables.css — both compiled and minified, learn about variable usage (opens in new tab)
- halfmoon.css — both compiled and minified (same as above, but with variables flattened, supports IE11)
- halfmoon.js — both compiled and minified, learn about the core JavaScript library (opens in new tab)
- halfmoon-module.js — halfmoon.js as a module (used for the npm package)
Once you have downloaded the files, all you have to do is include the following files in your project:
Include Halfmoon in your project
<!-- Halfmoon CSS -->
<link href="path/to/halfmoon-variables.min.css" rel="stylesheet" />
<!--
Or,
Use the following (no variables, supports IE11):
<link href="path/to/halfmoon.min.css" rel="stylesheet" />
-->
<!-- Halfmoon JS -->
<script src="path/to/halfmoon.min.js"></script>Pleast note, the JS file should be placed at the end of the <body> 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 <body> tag.
As for the CSS file, it can be placed inside the <head> tag, which is the usual convention in most projects.
CDN #
You can also include the required files using a CDN:
Include Halfmoon in your project (using CDN)
<!-- Halfmoon CSS -->
<link href="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/css/halfmoon-variables.min.css" rel="stylesheet" />
<!--
Or,
Use the following (no variables, supports IE11):
<link href="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/css/halfmoon.min.css" rel="stylesheet" />
-->
<!-- Halfmoon JS -->
<script src="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/js/halfmoon.min.js"></script>Using npm #
Install Halfmoon (using npm)
npm install halfmoonAfter installation, the required CSS and JS file can be imported in the following way:
Include CSS file and import JS library
// Include CSS file
require("halfmoon/css/halfmoon-variables.min.css");
/*
Or,
Include the following (no variables, supports IE11):
require("halfmoon/css/halfmoon.min.css");
*/
// Import JS library
const halfmoon = require("halfmoon");Please note that manual initialization is required for some components, that is, after the DOM is loaded, the following method needs to be called:
Initialize after DOM is loaded
// Call this method after the DOM has been loaded
halfmoon.onDOMContentLoaded();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.
Where to next #
Once you have downloaded Halfmoon, you can check out the customize section of the docs, which is a guide for understanding customization with CSS variables.
If you are not interested in that, you can check out the page building section of the docs, which breaks down the basics of building pages. Otherwise, you can jump right into the starter template generator section, which lets you generate boilerplates for your project.
Up next:
Customize
Help us grow
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
Gold sponsor
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
Sponsors
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor image placeholder
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
Backers
The following people have generously decided to support Halfmoon.
- Ethan Fann
- Julia Koblitz
- Benjamin Listwon
- Sean Lindsay
- Daan
Become a backer on Patreon .
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.
