search

tabvengers / spicy-sections

Creative Commons Zero v1.0 Universal
128 stars 10 forks source link

Styling guidelines/parts and dogfooding #45

Open bkardell opened 2 years ago

bkardell commented 2 years ago

Using our custom element today in a site and it strikes me that while I had more lengthy documentation at first in the glitch we created this from, we skipped a lot of that and have since also done some tweaking and it really could use some documentation and 'tests'. I say 'tests' here because if we create a bunch of cases that need to be explained I feel like we'll inevitably really improve things too and find stuff we hadn't considered.

A really simple example of this is "I would like to style the twistys in collapses... how?" including simply "They don't seem to be appearing" which is currently the case if you display on a black background, because they are black background svgs. Currently you have to provide a new version of the background image which uses fill='white' instead of fill='black'.

:where(spicy-sections > [affordance*="collapse"])::before { 
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='10px' height='10px' viewBox='0 0 270 240' enable-background='new 0 0 270 240' xml:space='preserve'%3e%3cpolygon fill='white' points='5,235 135,10 265,235 '/%3e%3c/svg%3e ");
}

Maybe this is fine because people will want to change all manner of thing about it, I'm sure - but for something so simple as "I have a dark background" this feels a little broken currently. In the very least this should be well documented.

Are there any volunteers who would like to help me assemble such a list of "I would like to do X" pens and short documentation (and then file bugs if we cannot)?

hidde commented 2 years ago

I'd love to help with this!

bkardell commented 2 years ago

Great, feel free to just create some and link them here, or we can meet up and create a list to start - let me know what you want to do. I'd love opinions on where to put this - the readme could get quite long if we put it all there - I have the previous docs I made that answered a bunch of things, tho it is incomplete and outdated, we could review it. (note, I deleted your comment about the typo because I fixed it in the post, thanks)

davatron5000 commented 2 years ago

Stuff we need to document

Stuff we need to demo

Ideally we can spin up an auto-deploying site to show off demos.

Stuff we need to log/discuss