fullmooncss

v0.0.2

Published

2 years ago

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

Downloads

0High
0Medium
0Low

ksengine

halfmoon fullmoon css javascript dark-theme dark-mode dashboard web-framework css-framework css-variables css-custom-properties

🌝 Fullmoon CSS

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

This is the activly developing fork of halfmoon, Once halfmoon became active. We could merge both.

in active development.

🌚 Dark mode with toggle option.
🛠️ Customization with CSS variables.
📋 Prefect for dashboard and tools.
♨️ Optional JavaScript library.
👢 Bootstrap like classes.
🌐 Modern but with Cross browser support.

To learn more, go to the documentation.

Quickstart

Looking to quickly add Fullmoon to your project? Use jsDelivr, a free open source CDN or a Node package manager (npm, pnpm or yarn).

Using CDN

When you only need to include Fullmoon’s compiled CSS or JS, you can use jsDelivr.

<!-- Fullmoon CSS -->
<link
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/fullmoon.min.css"
    rel="stylesheet"
/>

<!-- Fullmoon JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/fullmoon.umd.js"></script>

Pleast note, the JS file should be placed at the end of the <body> tag.

Using a package manager

npm install fullmooncss
# or pnpm add fullmooncss
# or yarn add fullmooncss

After installation, the required CSS and JS file can be imported in the following way as a ES module.

// Include CSS file
import 'fullmooncss/dist/css/fullmoon.min.css';

// Import JS library
import fullmoon from 'fullmooncss';

Or import it as a commonjs(default NodeJs modules) module.

// Include CSS file
require('fullmooncss/dist/css/fullmoon.min.css');

// Import JS library
const fullmoon = require('fullmooncss');

Initialization

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

// Call this method after the DOM has been loaded
fullmoon.onDOMContentLoaded();

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

In this way, Fullmoon can be used with frameworks that use the virtual DOM, such as React and Vue. For instance, in the case of Vue, the fullmoon.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 fullmoon.toggleSidebar(), Don't assign them directly as event handlers.

- <button className="btn" type="button" onClick={fullmoon.toggleSidebar}>
+ <button className="btn" type="button" onClick={() => fullmoon.toggleSidebar()}>

See React documentation.

Contributing

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

License

Fullmoon is licensed under the MIT license.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme