WPanel Theme Development

WPanel appearance in the default theme is purposely minimal and can mostly be updated to meet branding standards by over-riding Sass variables and by extension.

The appearance of decorated Types such as WPanel.Type.HEADER, is a primary differentiator of applications from different themes. The theme appearance is all determined in CSS through the theme Sass source and is adjustable at theme build time and within an application using any theme. This section is concerned only with theme build-time options. For information about extending the appearance in a theme see Creating a theme and for application level changes see Adding custom CSS. In both cases the Theme class name conventions may prove useful.

Sass

The core CSS for WPanel is in src/main/sass/components/_wpanel.scss and there is not much of it. The structural styles for the various layouts is found in src/main/sass/components/_layout.scss and should not usually need to be changed. There are a few constructs which straddle structure and style and these may be modified using Sass variables as shown below.

Sass var	Purpose	default
$wc-panel-feature-padding	Padding of Types FEATURE and BOX	$wc-gap-normal
$wc-column-list	supported column widths supported	16,33,34,66,67,83
$wc-column-widths-include-fives	add multiples of 5 to the list of supported column widths	true
$wc-list-layout-dot-spacing	space between items in a flat dotted list	1.5rem
$wc-list-layout-ordered-spacing	space between marker and items in a flat numbered list	2rem
$wc-list-layout-bar-width-offset	space to allow for marker in a vertical bar separated list	1rem