Almost forgot to add the codepen link http://codepen.io/seanclayton/pen/ryPWMM
Nicely done, I forked and styled it. I also replaced the "dashed" by "dotted". http://codepen.io/antoinelouis/pen/qrvEVd
Sweet. Love where you took this :D
I'll fight you though!
- Make sure you set a line-height (1.5em for body, 1.2 for headings) - especially when you have a large x-height. In this case I'd go 1.65-ish em. That way your copy doesn't risk looking like a brick :x (sorry! lol)
I personally almost always use relevant copy. Makes it easier to spot issues.
Also, I love not using upper-case. That way you can use uppercase letters to show abbreviations, names, etc. Just gives you more room to let the copy do the talking!
With those tweaks, and a wee bit of padding rejig, here's my iteration :D
Who's next? :p
You should use an HTML definition list, it was made for this. More semantically-correct than any other tags you could use.
Will this menu be printed as well?
If so, then have you considered using LaTeX? I would code the menu in LaTeX, then use the PDF to print and display online. Reduces the amount of places you need to manage changes.
Seems like an odd choice; if your endgame is just to have a PDF then any visual design tool would be fine, no need to code.
There's nothing there that couldn't be handled by some print CSS and HTML, so why forego all the benefits of that?
If you're avoiding flexbox for whatever reason, one option is to create a dot (e.g. border-bottom or top) div and then put it behind the title/price. Set relative position accordingly to center the dots. Layer things with z-index. Put background color on the title/price div to match the background color of choice.
It's a hack, and it won't really work if you have variable background colors or a background image behind it, but it's the best method unless you're using flex.
The only reason I can think of to avoid using flexbox is to support old ie. Are there any other reasons?
IE support is sketchy, up to 11. Of course, you can choose to ignore that, considering thats not a significant part of the market nowadays.
Tables. That's how you'd do it for print, why do it any other way for web?
Yes, I think tables are semantically correct (menus are just fancy pricing tables).
Definition List or table plus schema formatting.