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

Overview

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

Halfmoon

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

  • 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.
  • 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.

To learn more, go to the documentation.

Quickstart

The quickest way to get started with Halfmoon is by using the CDN to include the following files:

<!-- Halfmoon CSS -->
<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/npm/[email protected]/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

npm install halfmoon

After installation, the required CSS and JS file can be imported in the following way:

// 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:

// 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.

Using React

If you are using React to call the built-in methods, such as halfmoon.toggleSidebar(), please make sure the call is made in a way that binds the correct context. There are two ways to do this:

  1. Using an anonymous method:

    <button className="btn" type="button" onClick={() => halfmoon.toggleSidebar()}>
  2. Using bind:

    <button className="btn" type="button" onClick={halfmoon.toggleSidebar.bind(halfmoon)}>

You can find more details in the React documentation.

Starter template generator

You can use the starter template generator to generate boilerplates for your project. The generator takes your settings and adds the appropriate classes and defines the required containers and elements.

Once again, we recommend reading the documentation, as it contains a lot of examples to help you quickly build websites.

License

Halfmoon is licensed under the MIT license.

Copyright

Copyright 2020, Halfmoon UI

Comments
  • Cannot get Sidebar Toggle to work in React

    Cannot get Sidebar Toggle to work in React

    I have looked through the issue queue and thought that upgrading to version 1.0.4 would fix this issue but it hasn't. For some reason I am unable to call the Sidebar toggle, but the dark mode toggle works.

    Here is the code:

    import halfmoon from 'halfmoon';
    
    useEffect(() => {
        if (isMounted.current) {
          halfmoon.onDOMContentLoaded();
          onLoad();
        }
        return () => (isMounted.current = true);
      }, []);
    
    <div className="navbar-content">
                <button
                  id="toggle-sidebar-btn"
                  className="btn btn-action"
                  type="button"
                  onClick={halfmoon.toggleSidebar()}
                >
    
    opened by brettdoyle44 17
  • TypeScript Support

    TypeScript Support

    I saw in #3 that you aren't planning to add TypeScript support, but it would be awesome if you did. I'm probably going to write some types for my current project, so maybe I'll make a PR when I get time.

    This framework is awesome, thanks!

    opened by ja1den 15
  • Cannot read property 'insertBefore' of undefined

    Cannot read property 'insertBefore' of undefined

    I wanted to use Sticky Alerts, but I got an error. Here's what I got: Cannot read property 'insertBefore' of undefined TypeError: Cannot read property 'insertBefore' of undefined at Object.initStickyAlert

    My code:

    halfmoon.initStickyAlert({
    	content: 'Eeee'+result['message'],
    	title: "Error "+result['code']+"!",
    	alertType: "alert-danger",
    	fillType: "filled-lm",
    	hasDismissButton: false,
    	timeShown: 10000
    });
    

    In my HTML, I have the StickyAlerts.

    <!-- Page wrapper -->
    	<div class="page-wrapper text-center">
    		<!-- This parent container is required -->
      		<div class="sticky-alerts"></div>
    
    opened by Meaxis 9
  • darkModeOn cookie return boolean, not string (enhancement)

    darkModeOn cookie return boolean, not string (enhancement)

    Halfmoon's in my new personal website redesign - thanks very much! I just had an idea for a (very) small enhancement...

    The cookie darkModeOn could perhaps return a boolean true/false value and not "yes" or "no".

    We could then check for it in a more intuitive way, like so:

    if (halfmoon.readCookie("darkModeOn")) {
      // 🌑
    } else {
      // 🌞
    }
    

    This stood out to me because my natural expectation is a boolean value for this, personally.

    Maybe this is just a nitpicky opinion thing. Alternatively, maybe instead of darkModeOn the cookie itself could be named mode and then return "light" or "dark"? Any thoughts welcome.

    Relevant docs page.

    opened by edadams 7
  • Button balance off if Roboto is not used

    Button balance off if Roboto is not used

    When Roboto is not used (not used by default in the halfmoon CSS) the balance of the button element is off. An example of this is below, on the left is with Roboto enabled and on the right is without.

    Example

    A quick way to test this is to load the buttons documentation page and toggle the documentation-styles-2.css body font-family on and off.

    /* documentation-styles-2.css */
    body {
        font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }
    
    /* halfmoon.min.css */
    body {
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    }
    
    opened by DouglasRiddle 6
  • Sidebar, darkmode and modals are not automatically toggled as expected.

    Sidebar, darkmode and modals are not automatically toggled as expected.

    This video showcases my issue. Dark mode is not automatically enabled, thus I need to call halfmoon.toggleDarkMode() upon loading the page. And, the sidebar is auto opened as well. Finally, the "followers" modal is opened instantly without toggling it myself. And I cannot find a way to close it upon loading the page. I need help figuring out how to make everything work normally so my project won't look buggy to users.

    opened by ScopesCodez 5
  • Width/Height issues when set to a container

    Width/Height issues when set to a container

    I managed to use halfmoon on a Chrome Extension. I've popup.html which manages to be like a page. Unfortunately, due to some css (that I haven't understood well yet) sets position: absolute to html, body and other containers elements.

    The unique way I have to set a proper size it's by setting a static width/height. If I use "auto", "fit-content" or "100%" doesn't work.

    What I expect: image

    How it's actually: image

    This is pretty frustrating :(

    opened by ghost 5
  • Inconsistent transition speeds

    Inconsistent transition speeds

    Seen on Google Chrome, at the Introduction page of the Docs Toggling between dark and light theme shows that some elements have different transition speeds. The sidebar is clearly slower than the rest of the page, and the text outside of cards transitions slower than that inside

    opened by Toby222 5
  • Use localStorage instead of cookies to store darkMode

    Use localStorage instead of cookies to store darkMode

    I would recommend using localStorage instead of cookies to store the darkMode state.

    This stores the data only on the client and does not send it to the server all the time. It is easier to work with because it does not need additional parsing, or serialization. Additionally it is also well supported and meets the IE11 requirement.

    Example with darkMode:

    // Set darkMode
    window.localStorage.setItem('darkModeOn', this.darkModeOn);
    // Get darkMode
    window.localStorage.getItem('darkModeOn');
    

    I am very willing to create a PR.

    opened by TheKingDave 5
  • Sidebar white flash, dark mode

    Sidebar white flash, dark mode

    Hi. I'm using the framework to build in python with Flask. I have the dark mode switcher available and using the documented script to save the users light/dark preference.

    The preference saves just fine, but often the sidebar will flash white when changing views before returning to the saved dark setting (if dark is set).

    Here's a quick view that will show you the flashing issue:

    https://www.loom.com/share/a09678cdca0a4ad5b6ee06361c7d4bc7

    I have several switches set depending on screen size. Unsure if that would cause this issue?

    opened by mattbingham 5
  • pageWrapper should be initialized in halfmoonOnDOMContentLoaded

    pageWrapper should be initialized in halfmoonOnDOMContentLoaded

    I've installed the npm package and am using it with React as shown in the documentation. There is an issue though. I've called halfmoonOnDOMContentLoaded, however that function doesn't initialize pageWrapper or stickyAlerts like it does for darkModeOn.

    I can put in a PR fix this, however how is the npm package built given there is no package.json in the project? Should I just alter the halfmoon.js file and will you create a new minified version and the npm package?

    opened by visoft 5
  • Text centering inside buttons

    Text centering inside buttons

    I'm following the documentation and using everything at their default settings, but the text inside buttons is not centered vertically. I figured out if I set the line-height of .btn to 2.9rem (29px), then the text is centered. I think the line-height is set too high by default.

    On your documentation website, the buttons have centered text, but if you open dev tools and uncheck the line-height for .btn, a border or outline or something shows up around the buttons, then if you recheck the line-height, the border is still there but now the text is aligned too low, just like the problem I'm having, so there is some issue with the line-height and getting the text centered in the buttons.

    opened by StevenMcgrew 0
  • this.stickyAlerts is undefined

    this.stickyAlerts is undefined

    I have this simple code:

    halfmoon.initStickyAlert({title: 'Publishing...', message: '<i class="fas fa-spinner fa-spin"></i> Your post is being published, please wait..', type: 'alert-secondary', timeShown: 1500})
    

    triggered when a form is being submitted, here's the full code:

    $("#post-form").submit(function (e) {
                        e.preventDefault();
                        $.ajax({
                            url: '/post',
                            type: 'GET',
                            beforeSend: function () {
                                $('#settings-form').find('button').attr('disabled', true);
                                halfmoon.initStickyAlert({title: 'Publishing...', message: '<i class="fas fa-spinner fa-spin"></i> Your post is being published, please wait..', type: 'alert-secondary', timeShown: 1500})
                            },
                            data: {
                                content: content
                            },
                            success: function () {
                                $('#settings-form').find('button').attr('disabled', false);
                                $('#content').val('');
                                $('#posts').unload()
                            },
                            error: function () {
                                $('#settings-form').find('button').attr('disabled', false);
                            }
    
                        });
                    });
    

    I keep getting this error whenever trying to trigger the function. error

    Meanwhile, I have it working in another page. Here's the code:

    $("#settings-form").submit(function(e) {
                    e.preventDefault();
                    $.ajax({
                        type: 'GET',
                        url: '/update-profile',
                        beforeSend: function() {
                            $('#settings-form').find('button').attr('disabled', true);
                            halfmoon.initStickyAlert({
                                title: 'Saving...',
                                content: '<i class="fas fa-spinner fa-spin"></i> Saving changes...',
                                type: 'alert-secondary',
                                timeShown: 1500
                            });
                        },
                        data: $('#settings-form').serialize(),
                        success: function(data) {
                            window.scrollTo(0, 0);
                            halfmoon.initStickyAlert({
                                content: "Profile has been updated successfully.",
                                title: "Changes Saved!",
                                alertType: "alert-success",
                                fillType: "",
                                hasDismissButton: false,
                                timeShown: 3000
                            })
                            $('#sidebar-username').html($('input[name=username]').val());
                            $('#settings-form').find('button').attr('disabled', false);
                        },
                        error: function(data) {
                            console.log("Error")
                            console.log(data)
                            window.scrollTo(0, 0);
                            halfmoon.initStickyAlert({
                                content: "There was an error updating your profile. Please try again.",
                                title: "Error!",
                                alertType: "alert-danger",
                                fillType: "",
                                hasDismissButton: false,
                                timeShown: 3000
                            })
                            $('#settings-form').find('button').attr('disabled', false);
                        },
                        
                    });
                });
    

    I have halfmoon.js imported in a headers file, and this headers file is imported in all my pages' files.

    opened by ScopesCodez 0
  • require problem while using with sveltekit.

    require problem while using with sveltekit.

    How can npm installation can be used in sveltekit? Tried different ways, but nothing's working for me. Any reference would've been helpful & much appreciated.

    opened by xeroticikot 0
  • [Feature request] Put label before switch

    [Feature request] Put label before switch

    Hello,

    I'm desperately trying to put a switch's label before itself.

    I tried :

    • putting the <label> element before the <input> element
    • using CSS display: flex; flex-direction: row-reverse on either parent or children

    Until I realized the switch uses :before and :after.

    So, it would be nice to have a modifier class for the switch component in order to position its label before itself.

    Thanks !

    opened by KaKi87 0
  • add

    add "setColorMode" feture

    title

    you can now use

    halfmoon.setColorMode('dark')
    

    to set the page to darkmode, regardless of its current state, and

    halfmoon.setColorMode('light')
    

    to set the page to lightmode.

    opened by makerio90 0
  • set color mode instead of toggle js

    set color mode instead of toggle js

    the core js lib allowed you to toggle the mode. however many times you want it to force into a mode like halfmoon.setMode("light") for example. if it's in dark mode, set it to light mode, if it's light mode, do nothing.

    opened by makerio90 2
Releases(v1.1.1)
  • v1.1.1(Oct 6, 2020)

    Halfmoon v1.1.1 release. Includes the following files:

    • halfmoon-variables.css (compiled and minified)
    • halfmoon.css (compiled and minified)
    • halfmoon.js (compiled and minified)
    • halfmoon-module.js (halfmoon.js as a module, used for the npm package)
    • starter-template.html

    Minor updates:

    • Rounded buttons ― Link to docs (Issue: https://github.com/halfmoonui/halfmoon/issues/25)
    • Fixed switch transitions ― Link to docs (Issue: https://github.com/halfmoonui/halfmoon/issues/42)
    • Other minor bug fixes, such as the border radius issue with input groups

    If you are updating from v1.0.x, please see the last major release for all the big changes: https://github.com/halfmoonui/halfmoon/releases/tag/v1.1.0

    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Sep 16, 2020)

    Halfmoon v1.1.0 release. Includes the following files:

    • halfmoon-variables.css (compiled and minified)
    • halfmoon.css (compiled and minified)
    • halfmoon.js (compiled and minified)
    • halfmoon-module.js (halfmoon.js as a module, used for the npm package)
    • starter-template.html

    Major change

    The biggest change in v1.1.0 is that the entire framework is now built 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. To better understand what this means, it is highly recommended that you read this docs page: https://www.gethalfmoon.com/docs/customize/.

    New components and utilities

    This version also brings in a lot of new components and utilities. These are listed below.

    Components

    Utilities

    Bug fixes

    No breaking changes

    There are no breaking changes in this version of Halfmoon. However, please take note of the following things:

    • The cookie for storing the user's preferred mode was previously named darkModeOn, with possible values of "yes" or "no". As of v1.1.0, the cookie has been renamed to halfmoon_preferredMode, with possible values of "light-mode" and "dark-mode".
    • The attribute for setting the preferred mode on load has been renamed to data-set-preferred-mode-onload (previously it was data-set-preferred-theme-onload). The previous name still works for the sake of backward compatibility.

    Please give this docs page a quick read: https://www.gethalfmoon.com/docs/core-javascript-library/. The changes are minor and should be very easy to understand once you have read that page.

    Source code(tar.gz)
    Source code(zip)
  • v1.0.4(Aug 17, 2020)

    Halfmoon version 1.0.4 release. Includes the following files:

    • halfmoon.css (Compiled and minified)
    • halfmoon.js (Compiled and minified)
    • halfmoon-variables.css
    • starter-template.html

    Changes:

    • Fixed a bug that sometimes caused issues with virtual DOMs. Thanks to visoft (https://github.com/visoft) for bringing this up and proposing the fix that is implemented.
    Source code(tar.gz)
    Source code(zip)
  • v1.0.3(Jul 18, 2020)

    Halfmoon version 1.0.3 release. Includes the following files:

    • halfmoon.css (Compiled and minified)
    • halfmoon.js (Compiled and minified)
    • halfmoon-variables.css
    • starter-template.html

    Changes:

    • Small refactoring done in the JS files
    Source code(tar.gz)
    Source code(zip)
  • v1.0.2(Jul 13, 2020)

    Halfmoon version 1.0.2 release. Includes the following files:

    • halfmoon.css (Compiled and minified)
    • halfmoon.js (Compiled and minified)
    • halfmoon-variables.css
    • starter-template.html

    Changes:

    • Fixed a small bug in the minified CSS file that affected input groups in older browsers.
    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(Jul 1, 2020)

    Halfmoon version 1.0.1 release. Includes the following files:

    • halfmoon.css (Compiled and minified)
    • halfmoon.js (Compiled and minified)
    • halfmoon-variables.css
    • starter-template.html

    Changes:

    • Increased textarea line-height to make them more readable.
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Jun 30, 2020)

    Halfmoon version 1.0.0 release. Includes the following files:

    • halfmoon.css (Compiled and minified)
    • halfmoon.js (Compiled and minified)
    • halfmoon-variables.css
    • starter-template.html
    Source code(tar.gz)
    Source code(zip)
Owner
Tahmid (Halfmoon UI)
I am building Halfmoon - Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.
Tahmid (Halfmoon UI)
Light-switch-bootstrap - Dark mode toggle for Bootstrap 5

?? Light Switch for Bootstrap 5 Basic Bootstrap 5 custom checkbox to use night mode in your web site. Under the hood Switching to dark mode is done by

Han 35 Jan 2, 2023
Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Mert Aşan 111 Dec 22, 2022
A lightweight and modular front-end framework for developing fast and powerful web interfaces

UIkit UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. Homepage - Learn more about UIkit @getui

null 17.7k Jan 8, 2023
The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

Install | Documentation | Releases | Contributing Foundation is the most advanced responsive front-end framework in the world. Quickly go from prototy

Foundation 29.4k Jan 4, 2023
Giggy is a collection of a few fun jokes related to Coding & Dark Humor - Created using HTML, JavaScript, CSS & Webpack.

Giggy A Collection of some of the best jokes. This is a Web Application with some jokes related to coding & Dark Humor. Created with data from the Jok

Awais Amjed 7 Jul 28, 2022
[ON HOLD] Living Style Guides Engine and Maintenance Environment for Front-end Components. Core repository.

[ON HOLD] SourceJS - Living Style Guide Platform The project been stale for a while and currently is in the [ON HOLD] state until we find new maintain

SourceJS 552 Nov 8, 2022
This stylesheet customizes Jupyter Notebooks to a dark-theme with vibrant pink, blue, and lime accents.

jupyter-dragonfruit-theme This stylesheet customizes Jupyter Notebooks to a dark-theme with vibrant pink, blue, and lime accents. Author Website Conta

Allen Chang 1 Jan 29, 2022
Install the latest artifacts automatically and launch your server in a production ready mode with accessible convars.

Setup Edit the first three lines of the index.ts file to set your custom folder layout, follow the folder structure below for a example. const server_

null 2 Feb 4, 2022
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Krish Dev DB 1.1k Jan 2, 2023
Full CSS support for JSX without compromises

styled-jsx Need help? Full, scoped and component-friendly CSS support for JSX (rendered on the server or the client). Code and docs are for v3 which w

Vercel 7.3k Jan 4, 2023
A classless CSS framework to write modern websites using only HTML.

new.css new.css A classless CSS framework to write modern websites using only HTML. It weighs 4.8kb. All it does is set some sensible defaults and sty

null 3.6k Jan 3, 2023
A CSS button library built using Sass and Compass

Buttons 2.0 Buttons 2.0 Buttons is a highly customizable production ready mobile web and desktop css button library. Buttons is a free open source pro

Alex Wolfe 5.1k Jan 4, 2023
A small codebase to simulate environment of a real software engineering job built using html/css/js

How to setup your development environment? Before you can begin, you will need git, node, and a text editor. If you are running Windows, we recommend

JobSimulator 89 Dec 21, 2022
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161k Jan 1, 2023
Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

Jeremy Thomas 46.6k Dec 31, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 63.5k Dec 30, 2022