Instalation

There exists two ways how to use this template:

• Direct use - the most straightforward is fork this repo and directly edit files in it.
• Theme use - more flexible way is use this repository as theme for your own design system. This approach enable to split appearance of DS from its content. More suitable for agencies who delivers different design systems for several agencies.

Direct use

1. Install Ruby
2. In console install Ruby bundler by gem install bundler
3. In console go to forked repository and install all requirements bundle install
4. In console run bundle exec jekyll serve to startup your design system locally.
5. Visit http://localhost:4000/design-system-template/ in your browser to see the design system. You can open it in your browser on address http://localhost:4000/design-system-template/

Use as Jekyll theme

You can use Design System Template as Jekyll theme. Future propagation of changes and bugfixes from theme to your site will be easier. You can override any of the theme defaults with your own site content. To replace any part of theme just make a copy of the specific file you wish to modify, or create the file from scratch giving it the same name as the file you wish to override.

1. Install Ruby
2. In console install Ruby bundler and Jekyll by gem install bundler jekyll
3. Add the following to your Gemfile

gem "jekyll-remote-theme"

and run bundle install to install the plugin

3. Create _config.yml file with content

# 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

# Build settings
markdown: kramdown
plugins:
  - jekyll-feed

# Setup pattern collection
collections:
  patterns:
    output: true

# 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'
  
# GTM analytics
gtm_id: GTM-XXXXXX

Note: If you are using a Jekyll version less than 3.5.0, use the gems key instead of plugins.

4. Add the following to your site's _config.yml to choose your theme

remote_theme: lundegaard/design-system-template

Note: You may also optionally specify a branch, tag, or commit to use by appending an @ and the Git ref (e.g., lundegaard/[email protected]). If you don't specify a Git ref, the master branch will be used.