flexx
flexx copied to clipboard
flexxui
Theming
In flexx, layout is mostly determined by choice of widgets and their configuration. Styling however is "open for interpretation". Since styling a webpage is very much an interactive process, it would be nice to have a resource available for editing that can reload upon page refresh, instead of restarting the server.
A static CSS stylesheet that is served independently is one option for such functionality. Determining global style, like background color, font family and size, and so on, could go in there.
Default styling for widgets like ui.TabPanel is nice when you want to prototype things, but doesn't lend itself very much to styling a production application. Perhaps the docs could include a section that explain how you can apply a custom "theme" to the flexx-provided widgets? This is probably also easiest to implement using static stylesheets. Related to #139, I think.
I agree that Flexx needs first class support for theming.
Though for shorter term. You can still collect all CSS in one place and then set it as the CSS attribute of a single class. The CSS of all class is simply collected and put together in one CSS file by Flexx, so you could put any style there.
Another option could be to create a static .css file and make Flexx load it as a resource similar to howe we load additional .js resources.
The fact that the TabPanel is so hard to style is I think mainly because its implemented via Phosphor which has its own CSS prefix etc. This is sometithing that can also possibly be improved.
It would be nice to break the CSS that is currently in Flexx into flexx.css for core settings and flexx.theme.default.css for anything theme-related, so that you can easily add your own theme. As far as I can see, flexx.app.assets already supports serving custom stylesheets, so this shouldn't be a difficult change.
Another question that I have: how likely is it that HTML structure or classes will change from one release of Flexx to the next? Is it possible that it will break stylesheets?
Another question that I have: how likely is it that HTML structure or classes will change from one release of Flexx to the next? Is it possible that it will break stylesheets?
That's a good question. For simple widgets it should not change much. Some more complex widgets could, e.g. Canvas changed along the way to allow better positioning. Anything based on Phosphor (i.e. all layout widgets) I have not much control over. Phosphor is turning into 1.0 but I am not sure if this means that the underlying HTML structure will never change.
BTW: CSS theming migh be an issue that is also relevant to the Phosphor project.
Some updates:
In the form.py example I added a few lines illustrating how theming can be done via CSS. In this case the CSS is added to the application widget, but you can also write an actual css file and add it as an asset.
Flexx is no longer based on Phosphor, so the dom structure should be pretty stable from here on.
Work that remains would be to factor out the theme-specific CSS into a separate file and add that as a default asset, which can easily be used as starting point for custom themes.