Halfmoon v2 Release, Past, Present, and Future

[halfmoonui]

Hey everyone, Tahmid here. It's been a while. Let me first apologize for being inactive on GitHub regarding Halfmoon - there are a few PRs open and tons of issues with no comments. I underestimated the amount of work and time that it takes to build an open-source project, even a small one like Halfmoon. I have been employed full-time for the last 3 years (still am), and the rest of my free time went to my family.

Anyway, I want to use this post to discuss the Halfmoon project, where I'm coming from, where I'm right now, and where I want to take it in the future.

Past

I first built Halfmoon v1 back in 2020. This was when Bootstrap did not have a dark mode. I've always been a big fan of Bootstrap (still am), so I built Halfmoon as a way to sort of "use Bootstrap", but with a dark mode. The results were satisfactory, so I wrote the docs and put it out there.

The project obviously was far from perfect, as there were tons of issues: lack of full compatibility with Bootstrap, accessibility issues, weird UX choices like built-in shortcuts, wonky sidebar, jarring animations, missing components like tabs, etc. The biggest issue by far was that I really did not understand the importance of communities and ecosystems. You see, if you want to use Bootstrap with React, there's the excellent and well-maintained React Bootstrap. Stuff like was always missing from Halfmoon, and this really hindered its usage in production (even in places where I worked at and had a say in the tech stack). It was also impossible for me to build out an entire ecosystem on my own. There were a few projects that tried, but as far as I know, none of them got anywhere significant.

On the flip side, I also got a lot of things right: the importance of dark mode (every framework has one now), the standard design, usage of CSS variables for everything, simplicity of use (no build system), etc. I decided back in late 2021-early 2022 that if I were to make another major version of Halfmoon, I would fix my mistakes (and issues with the framework), and enhance the things that I got right.

Present

The opportunity presented itself when Bootstrap unveiled the alpha version of their dark mode. At this point, I made the conscious decision to make Halfmoon what it is in v2: a drop-in Bootstrap replacement. This would fix every single issue that I brought up before, and I would still be able to enhance the things I got right. So I got to work, and now, Halfmoon v2 has been released and ready for production: https://www.gethalfmoon.com.

As of me writing this, Halfmoon is fully compatible with Bootstrap, it's fully accessible (for example, the website gets a 98-100 rating on all pages using a tool like Experte Accessibility Check, and has everything you would need from a production-grade CSS framework. It also has full access to the entire Bootstrap ecosystem! This is super exciting for me because for example, if you want React components for Halfmoon, you can just use React Bootstrap and replace bootstrap.css with halfmoon.css, and voila! Moreover, it also has a great run-time customization system. The docs and website does not do a good job of explaining this at the moment, but this is something I want to fix ASAP, so please stay tuned for that. I'm talking about having different themes on your website (not just light and dark, but more broad ones like "Modern" or "Retro") with very little CSS, all of it being set according to the user's preferences.

Future

I want to focus on these things going forward:

• Be more active with Halfmoon, so regular bug-fixes, handling issues, answering questions, etc.
• This ties to the above point, but I intend to dedicate at least a few hours during the weekends specifically for Halfmoon related community work.
• Flesh out the documentation, specifically about theming and customization.
• Build more themes and example pages.
• And hopefully something more!

I'm going to close the PRs, and tag all of the existing issues as v1. The v1 itself is available as a separate branch.

Anyway, if you've read this, thank you. Please spread the word, write down any comments or feedback you may have, and start building with Halfmoon v2!

[FlavioSuarez]

What a great news!!
I'm one of your first followers since I read your post on css-tricks.com and I spread the word on the CodeIgniter community every time I can.
Looking forward your great work!

Cheers!

[halfmoonui]

Thank you so much for the support @FlavioSuarez!

[Supernova3339]

Hey Tahmid 👋
Used this framework when I was testing HalfmoonUI. I want to add something to this that helps it get out there, I was thinking of an IDE extension for VS Code.
Does that sound like something you'd be interested in?

Cheers, SuperDev.

[halfmoonui]

Hey @Supernova3339. Of course, that sounds great to me. What are you thinking of? Something like this: https://marketplace.visualstudio.com/items?itemName=AnbuselvanRocky.bootstrap5-vscode?

[Supernova3339]

Something similar, yeah. When I'm more familiar with my current IDE jetbrains I'd love to add that too.

…

On Thu, Aug 24, 2023, 3:56 AM Tahmid (Halfmoon UI) ***@***.***> wrote: Hey @Supernova3339 <https://github.com/Supernova3339>. Of course, that sounds great to me. What are you thinking of? Something like this: https://marketplace.visualstudio.com/items?itemName=AnbuselvanRocky.bootstrap5-vscode ? — Reply to this email directly, view it on GitHub <#135 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APESZJSZ2CHXHVNYM3DUXM3XW4JNPANCNFSM6AAAAAA33JWNEA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[halfmoonui]

Sounds great. Given that Halfmoon's class names are exactly similar to Bootstrap, I think you can probably fork the project I linked. Looks like it's licensed under MIT.

[FlavioSuarez]

For SublimeText too, please!! :-)

[Supernova3339]

I have never used sublime text before. My current IDE is the Jetbrains suite.

[jimkring]

This is great news Tamid. I think it would also be good to define a process that allows other community members to help with fixes/features/releases. I think you’ll find a lot of other people want to help :) Jim

On Thu, Aug 24, 2023 at 2:55 PM Flavio Suárez ***@***.***> wrote: For SublimeText too, please!! :-) — Reply to this email directly, view it on GitHub <#135 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAC5D6AUAIML5D6VJJUU7KTXW7EWXANCNFSM6AAAAAA33JWNEA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- Jim Sent from my mobile.

[halfmoonui]

Definitely, I really dropped the ball on this one last time. Hoping to get it right this time around.

[firdaus-aziz]

Hi Tahmid,

First of all, I would like to thank you very very much for creating and sharing this library. You have no idea how much I have searched for something like HalfMoonUI.

Second, I am glad that the reason for your absence was work. I was really dreading that something bad happened to you (with all the wars and all).

Last but not least... WELCOME BACK!!!

[halfmoonui]

Thanks for the kind words @firdaus-aziz!

[HarshNarayanJha]

Hi Tahmid,

EDIT:
So all the classes are named exactly as in bootstrap. Everything is fine, but I will have to spend another week to migrate the styles 😅

When I first saw @halfmoonui, I immediately switched all of my projects from bootstrap to halfmoon (no offence, I still like bootstrap), cause halfmoon is amazing. I used v1.1.1 for a very long time for my project websites.
Today I saw v2, updated, but sadly

Page with v1.1.1

Page with v2

Upon Inspecting, majority of classes are not there.
I don't know if this was intended for v2, otherwise I will like to stick with v1.1.1, I really like that whole framework

[HarshNarayanJha]

OK, I just compared the docs, and the css itself, and it seems like a lot of things have changed. Which implies I have to read the docs and then apply changes to my styles, and adapt to new workflow.

And I believe that Tahmid will surely be working on a migration guide.

[halfmoonui]

Hey @HarshNarayanJha, sorry about this, the migration guide is missing right now. But as mentioned in this discussion, the class names now are exactly like Bootstrap, so v1 is not fully compatible with v2. This was done as a deliberate choice though - I was quickly able to add all types of new components to the framework like tabs, collapsing navbars, etc.

[HarshNarayanJha]

That's extremely great and I am happy with lots of new additions. When I updated, I was designing a HTML template, and the first class I found missing was .font-weight-bold, then I cross checked with the my django project , and it was like above. I rollbacked to v1. I will probably stick with v1 for now, cause I have forgot a high amount bootstrap

Thanks very much for this amazing framework. You are great

[halfmoonui]

@HarshNarayanJha There's .fw-bold which does the same thing: https://www.gethalfmoon.com/docs/text-utilities/#font-weight-and-italics

[HarshNarayanJha]

Oh, so bootstrap uses shortened names probably. We really need to set-up a migration guide (for people like me 😝)

[Supernova3339]

Hey @halfmoonui I am working on the snippets right now, could you provide an example of what you would call one of these snippets?

I was thinking something like: `halfmoon-snippet-name"

[HarshNarayanJha]

Sound good

[halfmoonui]

Yeah that sounds good I think.

[Art9681]

Thank you for the lovely update. It also broke my previous UI but i've slowly been refactoring it while reading the new documentation. I think its worth taking the time to learn the updated classes and differences.

[HarshNarayanJha]

So essentially back to bootstrap then? Obviously with halfmoon features ?

[Supernova3339]

Correct!

[HarshNarayanJha]

So I have to migrate then 😥 it sure is a lot of work

[halfmoonui]

Your new UI is looking good! @Art9681

[HarshNarayanJha]

And mine @halfmoonui ?

[firdaus-aziz]

What I miss the most from V1 is the starter/layout guide -- https://halfmoonui.pythonanywhere.com/docs/page-building/

[Art9681]

EDIT: See this comment by @Supernova3339 in regards to the starter template:

#134 (comment)

[FlavioSuarez]

Sorry for the very nooby question...
I'm more a back end guy than a front end one...
Now with BS 5.3 built in dark mode, CSS variables and other things... There is still room for Halfmoon?
I'd appreciate very much your points about this...
TIA!

[reinhart1010]

Hi, author of HAM here. One of the best things that Halfmoon v1 brought is probably the default theme design that looks timeless. It is not just fit for dashboards, that I made it into a Jekyll-based, GitHub Pages-compatible simple wiki framework that I've also used to build an Help Center website and my digital garden.

Speaking of other example themes, I think it would be great to improve the theme editor with custom color schemes, font sizes, font stack, etc., like the official JQuery Mobile theme editor.

Anyways, great work!

[Inwerpsel]

You might be interested in the theme editor I'm working on.

https://inwerpsel.github.io/use-theme-editor/halfmoon/docs/forms (switch to a wider screen as the initial mobile screen variant breaks because the halfmoon.js script is not served)
repo

While it's not built specifically for Halfmoon, it's the framework I probably tested with the most, because the assumptions of how variables are treated (at least in Halfmoon v1) align almost exactly with the theme editor assumptions. In fact it's a pretty complete experience as far as being able to adjust both at a low level or by changing abstractions like "primary color".

I'm still working on a few major parts that are needed to really make it usable as a library or plugin. But you can already use it as a theme roller using the demos on the repo main page, and export the result as a CSS file.

Now as for Halfmoon v2... It does work (I'll add a demo page later), and some of the new "features" from Bootstrap too (primarily scoped custom props instead of inside :root). But it's not nearly as good a result as 1, at the moment. It's not a qualitative difference of Halfmoon, just a matter of assumptions aligning differently. Though it could be interesting to re-evaluate whether some aspects from v1 can be preserved in v2 while still keeping tied to Bootstrap markup. I'll do a more detailed writeup here later of my experiences.

[Supernova3339]

This is awesome! What made you want to make this?

[Inwerpsel]

It started as an experiment inside another project to replace an existing theming feature. At some point I made it a separate repo with the goal of making it work on any page. Halfmoon was incredibly helpful for this as it just gave so many examples of custom props being used in a sensible and consistent manner.