Create a separate CSS file with element selectors

[rdlauer]

I find myself struggling to implement the core theme, as I have to look up a lot of class names for each element I want to style. It would be great if we could do one (or both) of these things:

1. Create a doc that shows all of the elements and their associated class names for easy reference.
2. Create a separate CSS file that uses element selectors instead of class selectors. Then just import that CSS file and everything works like magic!

[tjvantoll]

The theme’s current approach was chosen because 1) it’s the same thing Bootstrap does (no element selectors), and 2) undoing CSS is not really possible in NativeScript, at least for now. There’s no background-color: inherit or background-color: default, for instance.

That being said I think @rdlauer’s second idea is a really good one. An opt-in stylesheet that makes the theme class names the default for elements would also be really easy to implement.

Button { .btn; }
ListView { .list-view; }

So +1 from me.

[NathanWalker]

I like the second thought as well; presumably generating another stylesheet option in with the bundle which would use @tjvantoll 's suggestion is doable if others agree.

@rdlauer I plan to release a free video on egghead.io which will detail every single class option from the core theme. In addition I believe the live embedded app viewer I'm working on will serve to help that purpose as we can use it on the theme page to visually show what every core theme class option looks like, but a printable doc might be nice too.

[rdlauer]

I just discovered another reason to have an element selector option. With UI for NativeScript's DataForm control, you can't apply CSS classes to individual widgets (they are generated at runtime). So you lose the ability to style those as you can't manually apply classes.