-
Notifications
You must be signed in to change notification settings - Fork 115
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d791779
commit b649d66
Showing
12 changed files
with
9,780 additions
and
5,442 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,13 @@ | ||
# [Halfmoon](https://www.gethalfmoon.com) | ||
|
||
> Front-end framework with a built-in dark mode, designed for rapidly building beautiful dashboards and product pages. | ||
> Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools. | ||
- **Designed specifically for building dashboards**—This means that a lot of importance is placed on components such as forms, navbars, sidebars, dropdowns, toasts, shortcuts, etc. | ||
- **Built-in dark mode**—Now all of your websites will automatically come with a dark mode. | ||
- **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](https://www.gethalfmoon.com/docs/customize/). | ||
- **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. | ||
- **Easily customizable**—The repo also contains a variables file (`halfmoon-variables.css`) where custom CSS properties (variables) are used in the code for things like colors, layout properties, etc. This makes it extremely easy to customize Halfmoon to your liking, as the use of modern CSS variables means that things like pre-processors are not needed. | ||
|
||
To learn more, go to [the documentation](https://www.gethalfmoon.com/docs/introduction/). | ||
|
||
|
@@ -17,12 +17,19 @@ The quickest way to get started with Halfmoon is by using the CDN to include the | |
|
||
```html | ||
<!-- Halfmoon CSS --> | ||
<link href="https://cdn.jsdelivr.net/gh/halfmoonui/[email protected]/css/halfmoon.min.css" rel="stylesheet" /> | ||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon-variables.min.css" rel="stylesheet" /> | ||
<!-- | ||
Or, | ||
Use the following (no variables, supports IE11): | ||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css" rel="stylesheet" /> | ||
--> | ||
|
||
<!-- Halfmoon JS --> | ||
<script src="https://cdn.jsdelivr.net/gh/halfmoonui/halfmoon@1.0.4/js/halfmoon.min.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/halfmoon@1.1.0/js/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. | ||
|
||
## Using npm | ||
|
||
``` | ||
|
@@ -33,10 +40,15 @@ After installation, the required CSS and JS file can be imported in the followin | |
|
||
```javascript | ||
// Include CSS file | ||
require("halfmoon/css/halfmoon.min.css"); | ||
require("halfmoon/css/halfmoon-variables.min.css"); | ||
/* | ||
Or, | ||
Include the following (no variables, supports IE11): | ||
require("halfmoon/css/halfmoon.min.css"); | ||
*/ | ||
|
||
// Import JS library | ||
var halfmoon = require("halfmoon"); | ||
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: | ||
|
@@ -76,7 +88,7 @@ Once again, we recommend reading [the documentation](https://www.gethalfmoon.com | |
|
||
## License | ||
|
||
[MIT](https://www.gethalfmoon.com/license/) | ||
Halfmoon is licensed under the [MIT](https://www.gethalfmoon.com/license/) license. | ||
|
||
## Copyright | ||
|
||
|
Oops, something went wrong.