matter icon indicating copy to clipboard operation
matter copied to clipboard

Published 20 hours ago • verified publisher icon finnhvman

Combine with Surface

Open niutech opened this issue 6 years ago • 9 comments

Have you heard of Surface CSS-only Material Design framework. Why don't you combine it with Matter and base your missing components on Surface?

niutech avatar Feb 01 '19 00:02 niutech

Hello! Matter and Surface are two very different approaches. Matter is an implementation of the latest Material Design spec, on the other hand Surface is more loose on the spec, experimental and unmaintained. Compare for example the button component from both libraries and see in how many aspects they differ.

Let's get practical though. Which components do you miss from Matter? 🙂

finnhvman avatar Feb 03 '19 03:02 finnhvman

Modals would be super nice, maybe you could implement them in a similar way to GitHub with the

<details>cool :p</details>

tag, would keep it fast and require no js. not sure how animations work with the tag though

KieranHolroyd avatar Mar 04 '19 02:03 KieranHolroyd

I would like to see Tabs, Modals, Collapsibles and Drop-down Menus, which are already implemented in Surface CSS.

niutech avatar Mar 04 '19 15:03 niutech

Navbars, file input.

DevFelixDorn avatar Mar 04 '19 16:03 DevFelixDorn

This tweet on how github did javascript-free modals might be useful to you https://twitter.com/Keithamus/status/1098260366017134592

willpower232 avatar Mar 04 '19 17:03 willpower232

Thank you all! (especially @willpower232)

Looks like modal is the obvious next choice.

For the other requests: I'm trying to follow the Material Design Components specs at https://material.io/design/ (Hamburger menu | Scroll the menu down to bottom -> Components). The ones requested but not found here require more time.

Also keep in mind that these factors come into play in an implementation:

  • Accessibility
  • CSS-only-ness
  • Developer Experience
  • Material Design Spec

At this point I'm not sure I would be able to deliver any component (some would become overly complex without JavaScript), but I'll do my best. 🙂

finnhvman avatar Mar 05 '19 07:03 finnhvman

Thumbs up for tabs as there is a bunch of CSS-only tabs solution, e.g. here.

web-padawan avatar Mar 06 '19 12:03 web-padawan

@web-padawan Thanks for this list!

finnhvman avatar Mar 08 '19 08:03 finnhvman

Great work! Thank you, I admit, it helps me a lot, you have successfully made scriptless the material. While wait Matter stuff of SELECT next release, I use Pavel Paravko crafting https://codepen.io/pavelvaravko/pen/qjojOr

silikidi avatar Mar 10 '19 03:03 silikidi