Configuration

Configuration exists in _config.yml file. If you change configuration you have to restart jekyll server to apply the changes.

Site settings

Change basic information about design system.

# Site settings
title: Design System Template
author: Lundegaard a.s.
email: [email protected]
baseurl: "/design-system-template" # the subpath of your site, e.g. /blog
url: "https://lundegaard.github.io/" # the base hostname & protocol for your site

Branding

Change branding with your own logo and colors.

# Overriding default colors
branding:
  logo_path: '/assets/logo.svg'
  navigation_background_color: '#eee'
  navigation_link_color: '#444'
  navigation_link_color_hover: 'gray'
  main_background_color: '#fff'
  highlight_color: '#444'
  code_background_color: '#f9f9f9''

Analytics and Feedback

You can define your Google Tag Manager container to design system documentation. Simply set your GTM container ID.

# GTM analytics
gtm_id: GTM-XXXXXX

Then you can use Hotjar to provide users simple feedback on every page.

Customize design

Even when you using design system template as theme you can overwrite any theme file (layouts, HTML, CSS etc.). Simply duplicate file in your design system and Jekyll will use your version instead theme version of file.

Change design

If you want to make more sophisticated changes, you can customize design directly with styles located in _sass/ or with main CSS file located in /assets/css/style-guide.scss.

Change footer

Probably you would like to change footer. Create file _includes/footer.html and change it:

<footer class="c-footer" role="contentinfo">

    <div class="c-footer-author">Developed by <a href="https://www.lundegaard.eu/">Lundegaard a.s.</a></div>

</footer>