Nits in Waiting

[coolaj86]

• Get help with fieldset @uniqname
  • Flex: https://codepen.io/cwadrupldijjit/pen/ZEKRpQY
  • Grid: <fieldset style="grid-template-areas: 'x x x y'><label><button style="grid-area: x;">...
• Recommend Eon (needs template first) @ryanburnette
• Add to js.org Nits for v1.0 #6

[uniqname]

Talk to me about fieldset. How can I help?

[coolaj86]

Oh, hello! I didn't realize it was actually going to notify you (your username didn't turn blue).

This is the project: https://bliss.js.org - a frontend for SSGs that opens a commit on your Git platform of choice with your content and the necessary YAML pre-filled.

To style it I've been using MVP.css, which is just about the coolest classless CSS stylesheet I've found yet. It goes beyond "classless" and ventures onto "semantic".

It doesn't have solution for inline / grouped form inputs and I thought you might know how to apply flexbox or grid or some such in a classless way such that I can wrap a group of inputs in <fieldset> and have it "Just Work"™.

Does that make sense?

[coolaj86]

My hacky-do: https://github.com/coolaj86/bliss/blob/main/index.html#L30

I also had to hacky-do the form itself to get it to not be uber-narrow:

• https://github.com/coolaj86/bliss/blob/4519e830dc50780054f8452066200f14027ab73b/index.html#L98
• https://github.com/coolaj86/bliss/blob/4519e830dc50780054f8452066200f14027ab73b/index.html#L179

It's not working particularly well. I think it may be due to padding vs margin.

[uniqname]

It does. Do you have a back-of-the-napkin type design for what you imagine it to look like? I'm sure I can deliver.

[coolaj86]

These are the problem areas:

They would not be problem areas if

• they had the same margin/padding on right as on the left
• had a minimum reasonable distance

I imagine that I may need to do some sort of width specification on each element, which would be fine. It'd be cool if by default they were equally wide in a row - or if they distributed fluidly according to their need.

I think Ideally I should be able to do something like one of these, and either they need to add up to 100% or add up to whatever they add up to and are adjusted by ratio.

<fieldset>
    <label style="width: 50%">Name: <input type="text" /></label>
    <label style="width: 20%"><input type="checkbox" /> Cool</label>
    <label style="width: 30%"><button>Post</submit></label>
</fieldset>

<fieldset>
    <label style="width: 7rem">Name: <input type="text" /></label>
    <label style="width: 3rem"><input type="checkbox" /> Cool</label>
    <label style="width: 4rem"><button>Post</submit></label>
</fieldset>