fullmooncss

    0.0.2 • Public • Published

    🌝 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/fullmooncss@0.0.1/dist/css/fullmoon.min.css"
        rel="stylesheet"
    />
    
    <!-- Fullmoon JS -->
    <script src="https://cdn.jsdelivr.net/npm/fullmooncss@0.0.1/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.

    Copyright

    Copyright 2022, Kavindu Santhusa

    Install

    npm i fullmooncss

    DownloadsWeekly Downloads

    2

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    6.52 MB

    Total Files

    52

    Last publish

    Collaborators

    • ksengine