halfmoonui / halfmoon Goto Github PK

I love the aesthetics so far. In terms of UX, I would love if it had swipe-based navigation on small devices like phones.
For instance, swiping across the screen opens the sidebar (reaching up to the very top for sidebar activation on phones is not very ergonomic). Something like the navigation interactions on Slack's phone app.

Hello! This is an amazing library - I'm the author of YMath.io and looking to redo the site from Bootstrap 4 to Halfmoon.
One thing I want to implement in my site is a sidebar navigation for courses. So first the user would see the left image, then the right image. Could this be implemented? I'd really like to use Halfmoon for YMath.

If you can suggest a better, alternative form of navigation, then I am definitely open to hearing that too!

Have an option to show/hide password (like with an eye icon) on password boxes.
This can be a non-default feature, meaning an additional attribute will be needed to be set on the password textbox to allow this feature.

I have a requirement for slider, allowing for increments of 50 (starting from 100).

Is it possible to create this already? If not, I would like to request this feature.

The option to start at n and stop at n, allowing unique step.
So for example, start at 10, finish at 20. The step range of 2 would allow 10, 12, 14, 16, 18, 20.

Something along the lines of materialize perhaps? https://materializecss.com/range.html

by default, the entire page is displayed in position absolute [html, body, page-wrapper], I'm guessing this was done in order to have a nicer display for scrollbars? this causes many issues with js like:

window.onscroll
window.pageYOffset
window.innerHeight

this can be worked around manually however it causes issues for existing scrollspy JS libraries, one solution could be to remove the position absolute and move the

 class="with-custom-webkit-scrollbars with-custom-css-scrollbars"

to the HTML tag instead of body and removing height and position from the .content-wrapper, body, html selectors, this would mostly solve the issue and remove the hacky workaround without majorly breaking anything

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!

hello a great job, I'm already integrating it into a project :),

Is tab on roadmap?

I discovered this framework recently, and it looks really cool, but one thing really popped out when I added this to a project: the size of elements.

When I added this to one of my projects, there was a very noticeable increase in the size of all the elements. To illustrate this, here's the Halfmoon documentation page, compared to the Bootstrap documentation page.

I fixed this for the most part by decreasing my root font size, but I was wondering: is this intentional? Because I think it may be better to have the size be similar to what people are used to.

However, <1600px, where there isn't auto-scaling, things look standard.

I will do a better investigation/write up later but just to put this on your radar for now...

Reduced test case on Codepen showing navbar bottom dropdown bug on small screens and down (width <= 768px). Dropdown appears briefly and then is hidden.

Have the meta theme color change when the user toggles between dark/light modes:
https://webhint.io/docs/user-guide/hints/hint-meta-theme-color/

I visited the documentation today and noticed a white bar appear at the bottom of the documentation pages.

I don't actually have a means of investigating further right now (I can't replaicate it in the desktop browser) but figured I'd add it here in case it's of any help. It appears when scrolling down, but then disappears when scrolling back up.

I looks as though it's positioned offscreen.

Firefox (81.1.1) for Android.

(I've had to modify this screenshot to show it properly)

Screen recording here:
https://streamable.com/1zrcg8

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.

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?

I introduced myself in a previous issue also, I'm the author of YMath.io.
There, I have programmed my own dark mode using CSS variables but want to switch over to Halfmoon because I'm redoing the site. I was feeling that there are some improvements that could be made to the Halfmoon dark mode.

1. For one, I highly recommend using Apple's Human Interface Guidelines for light and dark mode for the different colors.
2. If you don't do that, then what really matters is depth. The dark mode is good in the sense that different components are different greys. But when I switch to light mode, everything is white. It would definitely help to keep the depth that you introduced in dark mode when the user enables light mode. YMath uses Apple's colors to do this, for example, notice how there are 3 different shades used here:

Discord is also a site that has written a great light/dark transition, although they are quite blue.

This framework is going in a great direction, keep it up! I especially love the sidebar!

Hello Team,

This is best Front end framework I have seen so far. I have used Bootstrap, Foundation and many more but This looks so much appealing.

I am just wondering that, is there any guide or documentation to extend this library seamlessly to Angular or React frameworks. It would be great help.

All the best to team for such a wonderful framework.

Regards,
Samir.

Issue

The contrast on the .btn-primary, .btn-danger and .btn-link button classes do not meet the required color contrast ratio of 4.5:1, (WCAG 1.4.3 Contrast).

To resolve this issue

Increasing the contrast would solve this issue, happy to recommend some colors or create a pull request with some ammendments.

Leverage use local-storage window.localStorage() for storing internal states instead of cookies.

Just converted a personal project to halfmoon from bootstrap and I like it a lot. I know you have more components planned, but the one I was really missing when doing the conversion was List group.

Thanks!

When you navigate from page to page, the sidebar flashes and goes away in mobile view.

Will rounded buttons be added?

And, thanks for this beautiful framework!

Hi there,
I really like the Halfmoon framework. It's so beautiful, functional and yet simple. My compliments!

However, I have run into a problem which I cannot solve. I am developing a theme for a billing system (WHMCS) and have started designing the sidebar. However, it won't open when I press a button with onclick="halfmoon.toggleSidebar()". The dark mode switch is working correctly so I don't think it is a problem with the JavaScript library.
Can someone tell me what the problem is? The URL is https://dev.proxeuse.nl/whmcs/.

Thanks in advance!
Kind regards

It struck me as being a bit strange that this repo is under a user account instead of a GitHub organization account. Is there a reason for this?

The documentation just feels half empty, a little extra could be added. I would appreciate if there was more documentation on the usage and implementation of halfmoon.variables.css. Or perhaps, some kind of way to customize halfmoon outside the presets?

EDIT: I am working on a site in PHP, I was going to go with Bootstrap, but was recommended halfmoon. Halfmoon looks cute and definitely seems nice, but I just cannot seem to figure out how to customize it. I know some of the documentation is under the assumption that users have prior experience with Bootstrap, but what about those who do not? The documentation lacks in that part. Halfmoon.variables.css gets mentioned a bit, but there is practically no further documentation on how to use or implement it/customize halfmoon from the presets.

I'm testing out Halfmoon on Blazor Server Side (an ASP.Net SPA framework) and noticed anything that relies on the pageWrapper and stickyAlerts doesn't get updated correctly.

To fix,

if (!halfmoon.pageWrapper) {
    halfmoon.pageWrapper = document.getElementsByClassName("page-wrapper")[0];
}
if (!halfmoon.stickyAlerts) {
    halfmoon.stickyAlerts = document.getElementsByClassName("sticky-alerts")[0];
}

must be changed to,

halfmoon.pageWrapper = document.getElementsByClassName("page-wrapper")[0];
halfmoon.stickyAlerts = document.getElementsByClassName("sticky-alerts")[0];

in order for the sidebar to toggle (toasts and whatever else relies on those variables). Unfortunately this is just due to the way Blazor functions. I don't have time to dive deep into the issue and what Blazor is doing exactly but the elements stored in the javascript is not the one in the actual DOM.

Not sure if this is an ideal fix for you, since I don't know if it has any consequences I'm not aware of.

GitHub actions provides some handy tools which open-source repositories like this one would greatly benefit from.

The following would help you handle issues and pull requests more easily, including closing/deleting stale issues and pull requests, greeting new contributors, and automatically labelling pull requests:

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>

This is something I have been wondering for some time. Should the .dark-mode class be applied to the <html> element instead of the <body>? The main benefit of this is that global variables can be scoped depending on the mode. For example:

:root {
  --primary-color: darkblue;
}
.dark-mode {
  --primary-color: dodgerblue;
}
.btn-primary {
  background-color: var(--primary-color);
}

This way, colors can have different values based on the mode being used. This could be a way of solving the problem I brought up in #27 (comment), and also just give more control.

Anyway, I would appreciate any comments or feedback on this issue: why you are for or against this possible change.

The custom checkbox and radio classes require the use of the labels' for attribute:
https://www.gethalfmoon.com/docs/checkbox/

The id="..." attribute of the input and the for="..." attribute of the label should have the same value.

Is it possible to support the following syntax?:

<label>
	<input type="checkbox" name="checkbox" value="value">
	Text
</label>

The advantage being that this avoids accidental duplicate id's, i.e.: if you copy paste the form, you have to rename the checkboxes when using label for, otherwise the label clicks will toggle the wrong checkboxes

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

a class for skeleton loaders based on background color and text color would be really cool, not many frameworks include skeleton loaders

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.

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";
}

I'm loving Halfmoon so much!

Congratulations! You are doing an amazing job with it ; )

I'm trying to do a page layout for my website using only Halfmoon : )

But I see that you're using "navbar-nav" and "navbar-content" for making looks the Navigation menu like responsive.
The problem is that my website have several links on the menu and make them duplicate doesn't looks like a good idea for me 🤔.

There isn't a way of making the same effect? a responsive Navbar-nav without duplicating all the links?

Thank you so much for your answer and the great work! Cheers!!

would be nice to add a simple transition to the checkmark switch like so:

.custom-switch input[type=checkbox]:checked~label:after,
.custom-switch input[type=checkbox]~label:after{
    transition: left .2s ease
}

it's really simple and makes it feel a LOT better

Hi there, you did an awesome job here !

I have only one little concern. I was playing arround with .custom-switch>(input+label) especially about width ; when I found this :

--switch-width: 3.2rem;
--switch-slider-width-height: 1.2rem;
--switch-slider-left: 0.5rem;
--switch-slider-left-checked: 1.5rem;

Trying to change the width of the switch, I was wondering how the --switch-slider-left-checked was calculated. Then I came to this :

--switch-slider-left-checked: calc(
  var(--switch-width) - var(--switch-slider-width-height) - var(--switch-slider-left)
);

So I did a little quick search, and found another constants that are somehow calculated but written by hand ; and a little fews or no calc().

So here is the question :

• Why did choose to set calculated variables as constant instead of using calc ? Is this a core choice or a mistake ?

Somehow, setting only a variable that will snow ball all the others ones that may depend on it, could be so powerful !
What do you think ?

Cheers,

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()}
            >

the sidebar animation looks poor because of how much its moved offscreen, this can easily be fixed with:

.page-wrapper.with-sidebar[data-sidebar-hidden]>.sidebar {
    left: calc(-1 *var(--sidebar-width));
}

Hey, great job with halfmoon.

Is datepicker on roadmap?

Personal opinion, but I think having a progress indicator component (like a linear or circular progress) is going to be very helpful.

Chrome browser changes textbox color if a user auto-fills a textbox.

This is especially disruptive to the experience when the user is in dark mode and the textbox color suddenly changes to bright white.

Hi,

Halfmoon is amazing project, thank you for starting it.
Now I am working on a status page and I am missing Github-style badges.
Bootstrap does not have it either, and all badge generators I found (e.g. shields.io) provide only images, but not the markup.

So I came up with something that covers my needs, take a look: https://jsfiddle.net/zahhar/8ezmnLy9/3/

Will be happy to improve (dark mode, links, unification with existing badges - you name it) and create PR if you think this is valuable addition to Halfmoon.

Hello,

First of all awesome framework, great job! I have a small suggestion, with the increased resolution of screens, it seems like 1200px as a max breakpoint is a bit too small. Bootstrap v5 introduces a new breakpoint (xxl) which is 1400px. I think this breakpoint could be a great addition as that it will be nicer on high resolution screens. I can help out with creating this.

Thanks!

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?

Hello, I wanted to shrink the navbar on scroll by using js function

window.onscroll = function () {
console.log("onscroll");
scrollFunction(); //handling navbar height according to scroll value from top using document.body.scrollTop()
};

but it never gets triggered. is it because of page-wrapper? i dont get any error. Can you help me with this?

Hello,

first of all nice framework, but would it be possible to add the possibility to include it through npm?
Also it would be great if you could provide the pre-proccesed files, so we could modify it more easy.

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.

Hi,

how to get something like this ?
https://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/

This looks like a great alternative to Bootstrap. It'd be great to see the dark mode support work "automatically" via the prefers-color-scheme media query. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

I would like to help if this is liked...

The code page of the docs mentions a custom theme for hightlight.js.
I noticed that the theme is loaded from here.
It would be nice if this could be included in Halfmoon somehow, possibly as an extra file.