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

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

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

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

10.
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

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

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

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

14.
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"; }
[…]

15.
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';

16.
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";

17.
Theming engine

18.
Theming engine
definitions
default theme

19.
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

20.
Theming engine
definitions
default theme
.variables
.overrides

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

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

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

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

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

26.
Extending Pastanaga UI
(Semantic UI way)

27.
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'; }

28.
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

29.
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

30.
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

31.
Dev Workflow
Mockups Prototype Wiring

32.
Tooling
package.json

33.
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

34.
Final Thoughts

35.
Questions?

36.
Thanks!