How theming is done in Plone-React using SemanticUI. Introduction and basic concepts of this CSS Framework, and how to effectively build a theme on Pastanaga UI (or build a completely new one from scratch. How to add new React components to the theme and apply the correct patterns. Apply a proven development workflow to build a theme using Create React App.

1. Theming
Víctor Fernández de Alba
Plone-React
Plone Conference 2018, Tokyo

2. Víctor Fernández de Alba
Theming
VOLTO

3. • Reinventing Plone: Roadmap to the Modern Web
• Volto
• Volto Extensibility Story
• Theming Volto
• Volto Case Studies
• Volto as Libary (create-volto-app)
Talks
You are here

4. Plone ❤ React
Plone ❤ Angular
Plone ❤ Vue
Plone ❤
NameYesterdayTrendyJSFrameworkYet

5. Plone
❤
Modern Frontend
(All of them)

6. Plone ❤ React

9. Semantic UI
https://react.semantic-ui.com
“progressive truthfulness”
Frederick Brooks - The Design of Design
https://semantic-ui.com/
React
+
https://semantic-ui.com/

10. Why (React) Semantic UI ?
• Components architecture
• Flexibility
• Extensibility
THEMING!

11. Semantic UI is built with
Deal with it! 😉

12. Components
site
reset
button
container
divider
flag
header
icon
image
input
label
list
loader
rail
reveal
segment
step
form
grid
menu
message
table
accordion
checkbox
dimmer
dropdown
embed
modal
nag
popup
progress
rating
search
shape
sidebar
sticky
tab
ad
card
comment
feed
item
statistic
Elements
Collections
Views
Modules

13. OK yeah fine, but wait…
show me!

14. Component anatomy
• LESS Variables
• Base styles definition
• React component

15. semantic.less
Main entrypoint
import 'semantic-ui-less/semantic.less';
@plone/volto/start-client

16. semantic.less
/* Global */
& { @import "definitions/globals/reset"; }
& { @import "definitions/globals/site"; }
/* Elements */
& { @import "definitions/elements/button"; }
& { @import "definitions/elements/container"; }
& { @import "definitions/elements/divider"; }
& { @import "definitions/elements/flag"; }
& { @import "definitions/elements/header"; }
& { @import "definitions/elements/icon"; }
& { @import "definitions/elements/image"; }
& { @import "definitions/elements/input"; }
& { @import "definitions/elements/label"; }
& { @import "definitions/elements/list"; }
& { @import "definitions/elements/loader"; }
& { @import "definitions/elements/rail"; }
[…]

17. theme.config
/* Global */
@site : 'pastanaga';
@reset : 'pastanaga';
/* Elements */
@button : 'pastanaga';
@container : 'pastanaga';
@divider : 'pastanaga';
@flag : 'pastanaga';
@header : 'pastanaga';
@icon : 'pastanaga';
@image : 'pastanaga';
@input : 'pastanaga';
@label : 'pastanaga';
@list : 'pastanaga';
@loader : 'pastanaga';
@rail : 'pastanaga';

18. theme.config
/* Path to theme packages */
@themesFolder : '../../node_modules/@plone/volto/theme/themes';
/* Path to site override folder */
@siteFolder : "../../theme";
/*******************************
Import Theme
*******************************/
@import "~semantic-ui-less/theme.less";
@fontPath : "../../@{theme}/assets/fonts";

19. Theming engine

20. Theming engine
definitions
default theme

21. defaults
definitions
https://github.com/Semantic-Org/Semantic-UI/tree/master/src/definitions
./node_modules/semantic-ui-less/src/definitions
default theme
https://github.com/Semantic-Org/Semantic-UI/tree/master/src/themes/default
./node_modules/semantic-ui-less/src/themes/default

22. Theming engine
definitions
default theme
.variables
.overrides

23. .variables
3000+ Theming Variables
https://github.com/Semantic-Org/Semantic-UI/tree/master/src/themes/default

24. .overrides
LESS files, overriding (in cascade) the default styling

25. Pastanaga UI Theme
https://github.com/plone/volto/tree/master/theme/themes/pastanaga
./node_modules/@plone/volto/themes/pastanaga
Still not complete though
70%

26. Theming engine
definitions
default theme
.variables
.overrides
.variables
.overrides

27. Theming engine
definitions
default theme
.variables
.overrides
.variables
.overrides

28. Extending Pastanaga UI
(Semantic UI way)

29. Third party components
import '../theme/extras/extras.less';
src/client.js
Add an additional ‘extra’ entrypoint
// Place here all the extra non-SemanticUI CSS
// and make behave it like the SemanticUI ones
& { @import 'select'; }

30. Third party components
Add an inside ‘extra’ the variables/less pairs
@type : 'extra';
@element : 'select';
@import (multiple) '../../theme.config';
.loadUIOverrides();
// Place the content of the third party LESS
(or CSS) files here

31. Third party components
Add an inside ‘extra’ the variables/less pairs
@type : 'extra';
@element : 'select';
@import (multiple) '../../theme.config';
.loadUIOverrides();
// Place the content of the third party LESS
(or CSS) files here
select.less

32. Third party components
Add an inside ‘extra’ the variables/less pairs
@selectBorderColor: '#eee';
@selectFontSize: '1.5em';
// Place the content of the third party LESS
variables (if any) or add yours here
select.variables

33. Dev Workflow
Mockups Prototype Wiring

34. Tooling
package.json

35. Toolingprettier
prettier-stylelint
stylelint
stylelint-config-standard
stylelint-config-idiomatic-order
"stylelint": {
"extends": [
"stylelint-config-standard",
"stylelint-config-idiomatic-order",
"./node_modules/prettier-stylelint/config.js"
]
},
package.json
$ yarn add prettier prettier-stylelint stylelint stylelint-config-
standard stylelint-config-idiomatic-order --dev

36. Final Thoughts

37. Questions?

38. Thanks!