Important

This repository is preserved for archival purposes only.

I built this design system back in 2020 for websites in the KATAPULT universe. It grew alongside various side projects and reached full maturity with the launch of the katapult-magazin.de website. After I left KATAPULT in summer 2021, the design system has not been actively maintained anymore.

KATAPULT Design System

KATAPULT Design System is an umbrella for fundamental KATAPULT design tokens and a modern web design framework to develop responsive, accessible websites and web applications for KATAPULT projects.

katapult.design

---

What's included

KATAPULT Design System contains the fundamental design tokens in use to build KATAPULT graphics, layouts and interfaces. It translates the graphical style of KATAPULT print products to the web as well.

In its core, it is a modern web design framework to develop responsive, accessible websites and web applications for KATAPULT projects. The framework is based on CSS custom properties for easy customization and extension and includes extensive prebuilt components. The source is a collection of Sass modules, but in most cases it is sufficientto use the minified CSS file, as it can be modified using the custom properties.

Documentation

Get started with KATAPULT Design System, learn the fundamentals and explore advanced topics on our documentation website.

• Getting Started

Development setup

Prerequisites

• Install Node.js which includes Node Package Manager

Local development

Clone with SSH:

git clone git@gitlab.com:katapult-magazin/katapult-design-system.git

Install dependencies:

npm install

Build and watch for file changes:

npm run dev

Generating tokens

npm run tokens:generate

Building

npm run build

Semantic versioning (SemVer) is a de facto standard for code versioning. It specifies that a version number always contains a major, minor and patch part.

Instead of bumping the file version and running the build scripts etc., we make use of standard-version to combine common build tasks. One command:

• bumps the version (according to release:major, release:minor and release:patch)
• builds the assets (npm run tokens:generate and npm run build)
• creates the changelog from the Git history

You can use one of the following predefined npm scripts:

• # MAJOR: is incremented when you add breaking changes, e.g. an incompatible API change
  npm run release:major

• # MINOR: is incremented when you add backward compatible functionality
  npm run release:minor

• # PATCH: is incremented when you add backward compatible bug fixes
  npm run release:patch

Deployment to KATAPULT CDN

We use the Google Cloud Platform to publish releases to the katapult-cdn bucket. In order to upload the latest build from the dist folder, a Google service account key is required. As a KATAPULT developer you are able to generate one yourself. Download the JSON file and put it into the root folder of this repository named .gcp-service-account.json.

Afterwards you can publish the current release with:

npm run publish

If the version to be published is already present in the bucket, uploading will abort gracefully.

The CORS for the bucket has been configured with gsutil cors set GCP_CORS_CONF.json gs://BUCKET_NAME by using the following configuration:

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "responseHeader": [
      "Access-Control-Allow-Origin",
      "Content-Type"
    ],
    "maxAgeSeconds": 3600
  }
]

Notes

Changelog

Learn about the latest improvements.

Contributing

Contributing guidelines

Read through our contributing guidelines to learn about our submission process, coding rules and more.

Want to help?

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing and then check out one of our issues on GitLab.

Love KATAPULT Design System? Give our repo a star ⭐ ⬆️.