The Upbound document website is in a unique website GitHub repository.
Upbound uses Hugo, a static site generator. Hugo influences the directory structure of the website repository.
/content directory is the root directory for all documentation content.
/themes/upbound directory is the root directory for all website related
files, like HTML templates, shortcodes and global media files.
for the website.
Upbound documentation uses
Unmodified Bootstrap SCSS files are in
/themes/upbound/assets/scss/bootstrap/. Any docs-specific overrides are in
per-element SCSS files located one directory higher in
Crossplane docs support a light and dark color theme that’s applied via CSS variables.
Universal and default variables are defined in
Provide theme specific color overrides in
Hugo compiles the SCSS to CSS. Local development doesn’t require SCSS installed.
For local development (when using
hugo server) Hugo compiles SCSS without
Production deployments use the command
hugo --environment production to
trigger SCSS optimization.
Hugo compiles SCSS and optimizes the CSS with
PostCSS. The PostCSS configuration is in
/postcss.config.js. The optimizations includes:
- postcss-lightningcss - for building, minimizing and generating a source map.
- PurgeCSS - removes unused styles to reduce the CSS file size.
- postcss-sort-media-queries- to organize and reduce CSS media queries to remove duplicate and unused CSS.
Optimizing CSS locally with PostCSS requires installing extra packages.
requires Webpack to bundle and optimize the code.
colorMode.jsprovides the ability to change the light/dark mode color theme.
customClipboard.jscreates the ability to define which lines to copy in code boxes.
tabDeepAnchor.jsrewrites anchor links inside tabs to open a tab and present the anchor.
source is in
Adding a new Bootstrap feature requires importing it in