Add vanilla template

[kebowen730]

I added a VanillaTemplate with light and dark themes, I attached screenshots above for feedback on the appearance.

[philippjfr]

Looks like a great start!

[MarcSkovMadsen]

Looks great.

I just wanted to share my vision, knowledge and assets on Material Templates, Themes, Styles and widgets for Panel.

Just for inspiration. Take some of it if you can use it.

---

My Vision for Material in Panel

I would like users to be able to easily create powerful and awesomely looking analytics apps in Python. I see Panel as the best technology for that but some functionality is missing.

• Awesome Looking Templates that are easy to use. Includes Light and Dark Theme
• Awesome Looking Themes, Styles and Examples that can used directly or for inspiration.
• Awesome Looking Widgets

I look to the

• Material Design System and the
• MWC Web Components

for the awesomeness.

I have chosen this over for example Bootstrap as Material is modern, it's very popular and have Web Components that work really well with Panel instead of old school js and css files that often do not.

My vision includes being able to let the user toggle between a light and a dark theme (and maybe more) in a live Panel app.

Challenges

The main challenges using Material is that it has a different design system than the Bootstrap inspired widgets of Panel/ Bokeh and that Panel widgets cannot be easily styled to support for example a dark theme.

An example is that Material only have three colors (primary, secondary, error) where Panel has 5 (primary, success, info, warning, danger colors).

Another example is that the Dataframe Pane and Widget do not look great in a Dark theme (Because they are white) and do support easily adjusting the color scheme to the three colors in the Material Design System.

It's not easy to change the style of existing Panel widgets as most of the color from Bokeh or Panel style files is hard coded as far as I can see. Major problem :-)

Experimentation - Material Designer

In order to better enable styling of Panel and Bokeh widgets to Material and Dark Themes I started working on the App Template with Themes PR.

python -m panel serve 'panel\tests\themes\theme_builder\test_theme_builder.py' --dev --show

Please take a look at the PR and its files as there is already a lot of code that can be re-used for styling. The most important ones are

• Material Dark Theme for Bokeh plots (Current Font should be replaced by Roboto).
• Material Text Colors
• All Official Material Color Palettes
• Material Color Scheme Generator
• Color to Material Color Scheme Code. Take one Color and get full Material Color Scheme back including whether to use white or dark text for each Color.
• Material Design System Light/ Dark, Foreground/ Background Themes converted from original SCSS to Python.

Experimentation - Awesome Panel Styler

I have started working on a new Designer and renamed to Styler as I wanted to support both Panel/ Bootstrap designs and Material ones.

And also would make it easy to style new awesome themes I plan to reuse a lot of code from the Material Designer above in the Awesome Panel Styler. Especially in order to style Panel widgets for dark themes.

And increasingly implement more Material Widgets as I need them.

python -m panel serve 'package\tests\styler\test_styler.py' --dev --show

You can find the code in the styler branch here.

Other Resources

• awesome-panel.org Uses a Material Template and the MWC Button so far. Would like to eventually use a lot more MWC widgets and support a dark theme.
• MWC Components Bundled. Loads really, really fast compared to old school js and css.
• Material Template Example PR to Panel
• Material Widgets
• Material Icons Python List

[MarcSkovMadsen]

My feedback images above is that they are a big step in the right direction.

In general my advice is to stick to the original Material Design System including Color Themes simply because this would make life easier for developers, designers, users and enable consistent use of Material Widgets in Panel. You can find the themes here.

So if the background colors in the light and dark themes are not the official ones please consider using them as they are modern, works well with the material colors and widgets and would make it much easier for users to work with designers and their organisations official design systems.

One detail is that I can see the icon used for opening the navbar in the light theme is black. I think it looks fine but In the Material Design System this would be white ( I believe). So I would consider whether my users (developers, designers and app users) would expect this to be white.

The same goes for the app bar in the Material Theme. I think it looks great but I'm not sure its the color scheme recommended by Material Design. So I would pick an official one as the default and support more if I have time or provide an example showcasing how to customize this.

And please add a little bit of margin to the plots. More space between the plots and between the plots and the app bar is needed in my opinion. Or at least use some kind of consistent spacing. That would make both examples look really awesome to me.

[MarcSkovMadsen]

I believe easy to use and awesome looking Templates is is a Killer Feature and one of the key drivers of the success of one of the alternative Python Frameworks :-)

[MarcSkovMadsen]

Another thing is that you need to fine tune the panel.pane.Holoviews pane. There is a little bit of friction in using panel.panel.Holoviews as it has no margin and therefore the plot does not "stay inside" the card.

Example of margin.

plot_pane = pn.pane.HoloViews(
    hv.Curve({}), sizing_mode="stretch_both", margin=10
)

I believe it would a lot of users if the margin was there by default in Panel. What do you think @philippjfr ?

[MarcSkovMadsen]

And one more thing. My users always asks to remove the Bokeh logo from the plots as they don't understand why it should be there. I know this might be there for a reason. But I also believe the app looks simpler, better and more modern without it.

[kebowen730]

@MarcSkovMadsen I don't know if you've seen, but we actually do have a Material template! I can discuss with the team your suggestion of having the option to remove the Bokeh logo.

[MarcSkovMadsen]

Ahh. Sorry @kebowen730 . I thought that the Vanilla template was just the name of the Template based on Material.

I did not know the Vanilla Framework.

[philippjfr]

I did not now the Vanilla Framework.

We may want to find a better name, "Vanilla" in this case just means no framework (see this StackExchange post).

[codecov]

Codecov Report

Merging #1421 into master will increase coverage by 0.00%.
The diff coverage is 88.88%.

@@           Coverage Diff           @@
##           master    #1421   +/-   ##
=======================================
  Coverage   86.20%   86.20%           
=======================================
  Files         138      139    +1     
  Lines       15426    15445   +19     
=======================================
+ Hits        13298    13315   +17     
- Misses       2128     2130    +2     

Impacted Files	Coverage Δ
panel/template/__init__.py	100.00% <ø> (ø)
panel/template/vanilla/__init__.py	88.88% <88.88%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 78d3a60...2c59746. Read the comment docs.

[kebowen730]

@philippjfr I fixed the borders on the Panel cards and fixed the sidebar buttons

[MarcSkovMadsen]

One request streamlit users are having all the time is the possibility to specify the favicon. It might be a good idea to enable that for the template.

[MarcSkovMadsen]

A few other things that would be nice to have in a template is

• easy progress reporting in the same location. Possibility to report value, active and or message. And something more modern looking than the Progress Widget. Something the user can style.
• easy messaging to the user. Something like the Material Snackbar I saw included with the Material Template. Maybe including a color system for reporting info and error.
• maximize. Functionality to wrap a panel into a maximize panel. When the user clicks the associated maximize button, the plot or similar is shown maximized.
• modal. Showing things in a modal.

[philippjfr]

This was next on my to do list before I got pulled into 6 hours of meetings today. I'll revisit tomorrow.

[philippjfr]

modal. Showing things in a modal.

I've got plans to add that to all the templates at once, once this one is merged.

[philippjfr]

@kebowen730 Last issues for you to address:

• Weird margin in sidebar
• Alignment of sidebar collapse ("hamburger") icon with the title

[kebowen730]

Latest version of the vanilla template with fixes for alignment issues.

[philippjfr]

Thanks @kebowen730!