Style Guide

Design patterns and components for Gravitational

Getting Started

Site Structure

Our site is built using Hugo and composed of layouts, partials, shortcodes, and html components. Below is a breakdown of the current directories you will be using to leverage these items in your code.

/layouts
  - partials
    -- website
        * footer.html
  - shortcodes
    * code
    * section

/web-assets
  - js
  - scss

Shortcodes

Shortcodes are simple snippets inside your content files calling built-in or custom templates. In the example below to display a code sample in your page you simply include the shortcode {{< code >}} and write your sample code inside similar to an html tag.

{{< code >}}
  // EXAMPLE SNIPPET
  teleport:
    auth_token: dogs-are-much-nicer-than-cats
    # you can also use auth server's IP, i.e. "10.1.1.10:3025"
    auth_servers: [ "auth.example.com:3025" ]
{{</ code >}}

Partials

Partials are smaller, context-aware components in your list and page templates that can be used economically to keep your templating DRY. For example we have partials for the website footer, top navigation, etc.

Note: the . before the closing }} is used to pass the content for the page including the variables in the pages front matter.

<!DOCTYPE html>
<html lang="en">
<head>
  {{ partial "website/head.html" . }}
</head>
<body class="has-side-nav">
  {{ partial "website/top-nav.html" . }}
  {{ partial "website/hero.html" . }}

  <!-- Hugo populates content from .md files here -->
  {{ .Content }}

  {{ partial "website/footer.html" . }}
  {{ partial "website/scripts.html" . }}
</body>
</html>