Styling

WEM uses Bootstrap v3 as its base design system. While there are ways to use other design systems, the generated HTML is currently compatible only with Bootstrap v3.

File Structure

Depending on the design template you copied via the WMT tool, the styles structure may look something like this:

/my-design-template
    /styles
        /bootstrap
        /bootstrap-extensions
        /custom
        /fonts
        /wem
        default.less
        email.less
        pdf.less

The folder structure is fixed but can be modified. The /bootstrap and /bootstrap-extensions folders are reserved for Bootstrap Less files. You can make additional changes in the /custom folder, which is empty by default. The /fonts folder contains FontAwesome v4 and Glyphicon font icons, while the /wem folder is reserved for WEM-specific components.

styles/default.less

By default, a Bootstrap stylesheet is generated from the default Less files in the /styles/default.less file. The <% Uses Bootstrap [version] %> template part, or the absence of it, determines which Bootstrap version is used to compile default.less into default.css. This process occurs automatically when you push changes to the design template.

styles/email.less

This file is processed by the WMT server and compiled into /styles/email.css. This stylesheet is used in emails sent by your WEM application.

styles/pdf.less

This file is processed by the WMT server and compiled into /styles/pdf.css. This stylesheet is used in PDFs generated by your WEM application.

CommonStyles Template Part

By using the <% CommonStyles %> template part, you include the default WEM runtime styles compiled from /styles/default.less as well as the styles from the included custom controls in your WEM project.

While it is possible to omit this template part, you would then need to manually add the mandatory stylesheets of the WEM runtime. The paths are determined by the runtime and may change in the future, so we advise using the template part instead.

<head>
    <!-- The entries added by CommonStyles -->
    <link rel="stylesheet" href="/static/styles/default.css">
    <link rel="stylesheet" href="/static/styles/customcontrol.css">
</head>

Custom Design System

If you want to use your own design system instead of Bootstrap v3, you can simply add your own CSS stylesheets to the design template. However, we recommend overwriting the /styles/default.less file with an empty comment like /**/ or body{}. This is necessary because the WMT server expects this file and wants to compile it into default.css. Making this file "empty" prevents the Bootstrap Less file from being compiled and included in your website, avoiding unnecessary bloat from having both the default Bootstrap design system and your own.

To ignore using Bootstrap, the /styles/default.less file should be made "empty" as follows:

body{}

The location of your new design system may vary, but to be safe, either avoid using the reserved /styles folder altogether or use the /styles/custom folder.

Putting everything together, your design template would include an additional entry for your custom CSS file:

<head>
    <!-- Head content -->
    <% CommonStyles %>
    <link rel="stylesheet" href="<% Expression ApplicationRoot %>/static/custom-styles/my-theme.css">
    <!-- Head content -->
</head>

PreviousBasic Functional Template NextFont Icons

Last updated 3 months ago

Was this helpful?