search

garth / snabbdom-material

Stateless UI components for snabbdom that follow material design
http://garth.github.io/snabbdom-material/
MIT License
49 stars 6 forks source link

Use free-style for styles #25

Closed carloslfu closed 8 years ago

carloslfu commented 8 years ago

This project looks great. I think that styling would be nice with free-style. For responsive web design, we need media queries and it is pretty simple with this library, among other advantages.

garth commented 8 years ago

@carloslfu I find that I use media queries less and less these days. Take a look at the responsive events documentation. http://garth.github.io/snabbdom-material/dist/#/responsiveEvents

It's better to render what the device needs rather than always rendering all html and using media queries to hide or restyle elements based on screen size and orientation. Depending on your app, this can make rending on phones faster than using media queries.

I have considered free-style and would like to revamp the styling mechanism of this lib and introduce better customisation. The main issue is packaging though. As a lib all css and js needs to be easy to import into your app, but since webpack doesn't parse node_modules content it's not so straightforward. For this reason in leaning towards having all default base styles embedded. But if you have any suggestions with examples of how this could be done better I would be happy to hear them?

carloslfu commented 8 years ago

Oh, you are right. The responsive events is a better approach, with they, you have the screen size as part of the app state. The customization part looks good to me, components are modular and use the style attribute to each one is a good way to customize them.