search

nicolas-t / Chocolat

Chocolat : the lightbox so cool horses use it :horse:
http://chocolat.insipi.de
GNU General Public License v3.0
1.69k stars 169 forks source link

* switch out bitmap icons for css inlined vector icons #137

Closed thomas-franz closed 2 years ago

thomas-franz commented 2 years ago

First of all, thank you very much for creating and maintaining chocolat!

I had some problems importing the chocolat css file in my webpack environment. It would try follow the relative path from my entrypoint.

I had a look at the icons and decided to try and improve the project whilst possibly fixing my issue.

I hope this is a fitting improvement, please let me know any thoughts you have on this.

thomas-franz commented 2 years ago

Preview: https://user-images.githubusercontent.com/48122323/177197492-6ef45e06-c4f3-468c-a26f-10313f1f0dd5.mp4

nicolas-t commented 2 years ago

Thanks !

I like the idea :) , you didn't manage to make it work with non-inline svg ?

thomas-franz commented 2 years ago

Thank you!

Non-inline would also work just fine, inlining them does simply eliminate all path resolving issues that might come up like it did for me. It's also not uncommon and should be pretty usable, see bootstrap

Commiting something to this project goes beyond solving my own problem for me here, so if you'd like for them to not be inlined then that's no prob!

nicolas-t commented 2 years ago

Yes, ideally I would like to have svg files, and maybe have them inlined at build time in the dist folder.

thomas-franz commented 2 years ago

Great idea, would you also be open for SCSS replacing plain CSS? If so I'd like to tackle that on a different feature branch beforehand.

nicolas-t commented 2 years ago

Thanks ! I really want to keep this project simple, so I don't think adding a css preprocessor would be a good idea. But what would be the benefits of using SCSS ?

thomas-franz commented 2 years ago

I thought so, good reason! The benefits I see are maintenance related. Mostly meaningful nesting, grouping and DRY-reduction: css / scss css / scss

nicolas-t commented 2 years ago

Thanks for adding the SVGs and the build step :)

Can we use this loader instead (the one you added isn't animated)? https://github.com/SamHerbert/SVG-Loaders/blob/master/svg-loaders/oval.svg

About CSS I love nested css too but I don't think it's worth it for this project.

thomas-franz commented 2 years ago

My pleasure! For sure, in the making (The current one is animated with CSS keyframes) I see, uint me up when there is any potential for it some day :)