search

finnhvman / matter

Material Design Components in Pure CSS. Materializing HTML at just one class per component 🍰
MIT License
1.13k stars 85 forks source link

Combine with Surface #2

Open niutech opened 5 years ago

niutech commented 5 years ago

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?

finnhvman commented 5 years ago

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? 🙂

KieranHolroyd commented 5 years ago

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

niutech commented 5 years ago

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

DevFelixDorn commented 5 years ago

Navbars, file input.

willpower232 commented 5 years ago

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

finnhvman commented 5 years ago

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:

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. 🙂

web-padawan commented 5 years ago

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

finnhvman commented 5 years ago

@web-padawan Thanks for this list!

silikidi commented 5 years ago

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