Nicola Zambello: Theming Volto without SemanticUI: Is It Possible?

We will walk through the process of building a product for Italian Public Administrations using a bootstrap-based theme. I'm presenting io-comune, RedTurtle's first product based on Volto and the strategies we used. We will see the possibilities in Volto for theming without SemanticUI, using bootstrap and sass and what are the next ideas we could work on.

Scenario:

• We wanted to adopt Volto in our new project.
• We needed to include Bootstrap.
• Volto uses SemanticUI instead.
• Two such frameworks will conflict, for example fighting over the same selector.

We tried. We tried harder. A cheap approach did not seem possible, so we looked for a sane one.

A new theme: pastanaga-cms-ui. Load only the CSS needed for Volto admin UI, see Volto PR 970. And public-ui for public pages. In your src/theme.js do not import the css/less from semantic-ui, but the pastanaga-cms-ui. In theme theme.config also use pastanaga-cms-ui. Also razzle-config.

You should normalize your base style, for example:

body.cms-ui {
  .public-ui {
    font-size: 18px;
  }
}

and wrap your components with .public-ui.

Building a product:

• Base common package for every customer: https://github.com/RedTurtle/design-volto-theme
• New intermediate layer for SemanticUI
• New config layer for razzle/customizations
• Template for actual projects: design-volto-kit, with a Yeoman generator: create-italia-volto-app