halfmoonui / halfmoon

Halfmoon is a highly customizable, drop-in Bootstrap replacement. It comes with three built-in core themes, with dark mode support for all themes and components.
https://www.gethalfmoon.com
MIT License
3.03k stars 118 forks source link

More modular approach #78

Open dennis-f opened 3 years ago

dennis-f commented 3 years ago

This framework could really be the next big thing for me. The only downside I see right now is the missing opportunity to use only certain modules. I know most people do not care about filesizes, but it's not a good approach to ignore that completely.

For example if I have a page that does not use table, codeor progress, I still have that in my code. When using bootstrap and SASS I copy the bootstrap.scss and comment out every component thats not needed.

With pure CSS we could use @import to import certain modules, which will create multiple requests but that would propably be fine for most users.

CSS variables should then be scoped per module and inherit styles from some base.css or scaffolding.css.

This would also be a benefit when using Angular, React or Svelte (❤).

halfmoonui commented 3 years ago

Thank you for bringing this up. I definitely agree with you, and a modular approach is in the project roadmap. I have looked into pure CSS @import, and they will probably work fine with our use case. Anyway, this is definitely something I want to get to in the near future.

nathonius commented 3 years ago

I'd like to add that beyond splitting each piece out, it would be really nice to have everything more scoped. When using with any other css, it's easy to get in a situation where there's css pollution. Modals are class="modal", buttons are class="btn", etc, all very common css class names. Even if the intent was for halfmoon to be the singular CSS framework for a project, some sort of prefix/namespacing might make it easier to migrate to it without fear of conflicting styles.

As someone using halfmoon in Angular, I think these two things together would be a huge value add.

jeshuavegas commented 1 year ago

@OfficerHalf Hey, there's a way to solve this? As I-m using HF for a WP plugin. And I would like to avoid theme issues/conflicts. Thanks in advance for any suggestion.