{ "name": "fullmooncss", "version": "0.0.2", "description": "Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools", "source": "js/index.js", "main": "dist/js/fullmoon.js", "module": "dist/js/fullmoon.esm.js", "repository": { "type": "git", "url": "git+https://github.com/ksenginew/fullmoon.git" }, "keywords": [ "halfmoon", "fullmoon", "css", "javascript", "dark-theme", "dark-mode", "dashboard", "web-framework", "css-framework", "css-variables", "css-custom-properties" ], "author": "Kavindu Santhusa", "license": "MIT", "bugs": { "url": "https://github.com/ksenginew/fullmoon/issues" }, "homepage": "https://github.com/ksenginew/fullmoon#readme", "devDependencies": { "autoprefixer": "^10.4.2", "clean-css-cli": "^5.5.0", "cross-env": "^7.0.3", "microbundle": "^0.14.2", "postcss": "^8.4.5", "postcss-cli": "^9.1.0", "postcss-combine-duplicated-selectors": "^10.0.3", "postcss-preset-env": "^7.2.3", "postcss-sort-media-queries": "^4.2.1", "rtlcss": "^3.5.0", "sass": "^1.48.0" }, "style": "dist/css/fullmoon.min.css", "sass": "scss/fullmoon.scss", "files": [ "scss", "dist", "src" ], "scripts": { "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify", "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/", "css-rtl": "cross-env NODE_ENV=RTL postcss --config postcss.config.js --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"", "css-minify": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\"", "css-prefix": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"", "js": "microbundle", "build": "pnpm run css && pnpm run js", "test": "echo \"Error: no test specified\" && exit 1" }, "readme": "# 🌝 Fullmoon CSS\r\n\r\nFront-end framework with a built-in dark mode and\r\nfull customizability using CSS variables; great\r\nfor building dashboards and tools.\r\n\r\n> This is the **activly developing** fork of [halfmoon](https://www.gethalfmoon.com),\r\n> Once halfmoon became active. We could merge both.\r\n\r\nin active development. \r\n- 🌚 **Dark mode with toggle option.**\r\n- 🛠️ **[Customization](https://www.gethalfmoon.com/docs/customize/) with CSS variables.**\r\n- 📋 **Prefect for dashboard and tools.**\r\n- ♨️ **Optional JavaScript library.**\r\n- 👢 **Bootstrap like classes.**\r\n- 🌐 **Modern but with Cross browser support.**\r\n\r\nTo learn more, go to [the documentation](https://www.gethalfmoon.com/docs/containers/).\r\n\r\n## Quickstart\r\nLooking to quickly add Fullmoon to your project?\r\nUse jsDelivr, a free open source CDN or a Node package manager (npm, pnpm or yarn).\r\n\r\n### Using CDN\r\nWhen you only need to include Fullmoon’s compiled\r\nCSS or JS, you can use jsDelivr.\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n**Pleast note**, the JS file should be placed at\r\nthe end of the `` tag.\r\n\r\n### Using a package manager\r\n\r\n```\r\nnpm install fullmooncss\r\n# or pnpm add fullmooncss\r\n# or yarn add fullmooncss\r\n```\r\n\r\nAfter installation, the required CSS and JS file\r\ncan be imported in the following way as a ES module.\r\n\r\n```javascript\r\n// Include CSS file\r\nimport 'fullmooncss/dist/css/fullmoon.min.css';\r\n\r\n// Import JS library\r\nimport fullmoon from 'fullmooncss';\r\n```\r\n\r\nOr import it as a commonjs(default NodeJs modules)\r\nmodule.\r\n\r\n```javascript\r\n// Include CSS file\r\nrequire('fullmooncss/dist/css/fullmoon.min.css');\r\n\r\n// Import JS library\r\nconst fullmoon = require('fullmooncss');\r\n```\r\n\r\n## Initialization\r\n\r\nPlease note that manual initialization is required\r\nfor some components, that is, after the DOM is loaded, the following method needs to be called:\r\n\r\n```javascript\r\n// Call this method after the DOM has been loaded\r\nfullmoon.onDOMContentLoaded();\r\n```\r\n\r\nThis initializes all of the components that require\r\nJavaScript, such as dropdowns, custom file inputs,\r\nshortcuts, etc.\r\n\r\nIn this way, Fullmoon can be used with frameworks\r\nthat use the virtual DOM, such as React and Vue.\r\nFor instance, in the case of Vue, the\r\n`fullmoon.onDOMContentLoaded()` method would be\r\ncalled inside the `mounted()` hook of your\r\ncomponent.\r\n\r\n### Using React\r\n\r\nIf you are using React to call the built-in methods,\r\nsuch as `fullmoon.toggleSidebar()`, Don't assign\r\nthem directly as event handlers.\r\n\r\n```diff\r\n-