Semantic UI

Plone Frontend Chapter

Learn about templates in the classic frontend in chapter Page Templates

Semantic UI is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. It provides a declarative API, shorthand props and many helpers that simplifies development.

Its React complement Semantic UI React provides React components while Semantic UI provides themes as CSS style sheets with less variables and rules.

Volto is per default, not mandatory, build on both: the Semantic UI theming and the Semantic UI React Components.

Volto applies components from Semantic UI React to compose a large part of the views. For example the component Label is used to render votes on talks during this training.

import React from 'react'
import { Icon, Label } from 'semantic-ui-react'

const LabelExampleBasic = () => (
  <Label>
    <Icon name='mail' /> 23
  </Label>
)

export default LabelExampleBasic

Another example is the container component, that wraps content to be rendered with a margin depending on the browser window size / media query. You have seen this component already in the news item view.

See next chapter Theming in Volto for theming with Semantic UI.