search

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.04k stars 118 forks source link

[Documentation Concern] Example of usage of halfmoon.variables.css? #12

Closed aufcedaz0234 closed 4 years ago

aufcedaz0234 commented 4 years ago

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.

halfmoonui commented 4 years ago

Hey, the way the customization works is that you simply edit the CSS variables, and the CSS properties will change depending on what you set. For example, if you set the --primary-color to green, all the primary buttons and components will change to the green color. I recommend reading this: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

You definitely bring up a good point that the documentation makes an assumption when it comes to customization. However, it does not assume that you know Bootstrap, it assumes you know how to use CSS variables. In any case, this is one area I am already working on. Please look forward to the next update (1.1.0), and that should solve this issue. The update being worked on is planned to have a stronger focus on customization and how to use the variables file.

aufcedaz0234 commented 4 years ago

Okay, thank you very much. I will read up on the linked topic, I really do think halfmoon is a cool library. I am just frustrated at my lack of knowledge on CSS variables. I tried to make some CSS variables in halfmoon.variables.css, but perhaps I am doing it all wrong. Anyways, thank you again! Cannot wait to see what the next update has in store. :)

EDIT: I attempted to create my own css variable --bg-navbar-blue: [color code here]; to no avail. Is that even possible to do with halfmoon? I will just resort to changing to colour in the way you described, for now. Thank you again! Can't wait for the future update.

halfmoonui commented 4 years ago

Ok so for your case, what you have to do is open the halfmoon-variables.css file, and set the --lm-navbar-bg-color variable to blue (this is for light mode only). If you also want a blue navbar in dark mode, also change the --dm-navbar-bg-color variable to blue. And of course, reference the halfmoon-variables.css file in your HTML, not halfmoon.min.css.

halfmoonui commented 4 years ago

@aufcedaz0234 Variables are given first class treatment in v1.1.0. Please read this docs page: https://www.gethalfmoon.com/docs/customize/

Hopefully that should solve this issue. I will go ahead and close this. You can re-open it if you think the issue is still not resolved, or open another issue.