Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Theming Volto

419 views

Published on

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.

Published in: Internet
  • Login to see the comments

  • Be the first to like this

Theming Volto

  1. 1. Theming Víctor Fernández de Alba Plone-React Plone Conference 2018, Tokyo
  2. 2. Víctor Fernández de Alba Theming VOLTO
  3. 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. 4. Plone ❤ React Plone ❤ Angular Plone ❤ Vue Plone ❤ NameYesterdayTrendyJSFrameworkYet
  5. 5. Plone ❤ Modern Frontend (All of them)
  6. 6. Plone ❤ React
  7. 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. 8. Why (React) Semantic UI ? • Components architecture • Flexibility • Extensibility THEMING!
  9. 9. Semantic UI is built with Deal with it! 😉
  10. 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. 11. OK yeah fine, but wait… show me!
  12. 12. Component anatomy • LESS Variables • Base styles definition • React component
  13. 13. semantic.less Main entrypoint import 'semantic-ui-less/semantic.less'; @plone/volto/start-client
  14. 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. 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. 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. 17. Theming engine
  18. 18. Theming engine definitions default theme
  19. 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. 20. Theming engine definitions default theme .variables .overrides
  21. 21. .variables 3000+ Theming Variables https://github.com/Semantic-Org/Semantic-UI/tree/master/src/themes/default
  22. 22. .overrides LESS files, overriding (in cascade) the default styling
  23. 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. 24. Theming engine definitions default theme .variables .overrides .variables .overrides
  25. 25. Theming engine definitions default theme .variables .overrides .variables .overrides
  26. 26. Extending Pastanaga UI (Semantic UI way)
  27. 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. 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. 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. 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. 31. Dev Workflow Mockups Prototype Wiring
  32. 32. Tooling package.json
  33. 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. 34. Final Thoughts
  35. 35. Questions?
  36. 36. Thanks!

×