0%10min
kickstartDS low-code CMS starters: Connecting a Design System to a CMS just got easier
Learn more
Profile image Jonas Ulrich

Jonas Ulrich

Founder & CTO, frontend first since day one



Share this article

Release Spotlight: Documentation & Starter

Release Spotlight: Documentation & Starter

#tldr We’ve added extensive documentation around the creation of Design Systems with kickstartDS. From general intro, foundation articles and component example guides to our main guide “Create your Design System”… explaining every single step of the process in detail. And for everyone wanting to dive in head first, we’ve added an extensive, best-practice Starter as a Github template! Clone it and kickstart your Design System in just 5 minutes!

Documentation

The third big pillar of our Open Source release is our documentation (read about Semantic Token in Release Spotlight 1/3, or Container Queries in Release Spotlight 2/3).

Why is documentation so important to us? Because we know that just putting your code on GitHub, even using a fitting LICENSE, will not be enough if we really want people to take a serious look… and even more so if considering adoption.

Additionally, Design Systems need you to take a lot of decisions. Those can be both highly custom and opinionated. This is why we think explaining our reasoning in detail, especially when we take decisions for you (like using Style Dictionary), is super important. And for areas where there is no clear cut decision to take, we always try to add recommendations (like how to best construct your components to avoid adding technical debt) instead.

Screenshot of the docs index page
Intro page of our docs

Intro and Getting Started

The “Introduction to kickstartDS page, also the index page for the “Getting Started” section, features a short video of us introducing kickstartDS, defines features and aspirations, and introduces the motivation behind creating kickstartDS.

Next to that, this section is mainly about giving you a first, good understanding for the context you’d work in when building on kickstartDS. This includes talking about release handling and upgrade processes, the environment involved, how our CLI works, or what packages exist to choose from.

It also describes the next steps you could take, after deciding if what you’ve read is to your liking.

Create your Design System guide

The guide” ™️, where we try to explain the process of creating your Design System atop kickstartDS in detail. Starting from scratch (seriously: an empty directory!) we build up everything needed to have your first Design System release published, ready to be consumed by others!

As the guide is quite lengthy, we broke it up into 5 main parts:

All the code involved with the guide is also available on GitHub (there’s one branch per step) for quick referencing, and included in Code Sandboxes alongside the major guide sections.

Additionally, our Starter includes the exact same components created here. This makes the guide a great reference if you’re not feeling like following lengthy instructions, but would still prefer a place to look up implementation choices “on demand”.

Foundations

Our “Foundations” section describes the basic aspects of all main areas you can find in a Design System, especially when combined with the choices made in kickstartDS to be built upon.

Learn about Branding Token, Design Token and Component Token in the “Token” part, the layers of components in “Components”, how to handle “Layout”, and which “Modules” (collections of components) exist.

You can find all of those categories on the foundations index page.

Design Token additionally contain distinct pages per token category (Color, Typography, Spacing, Border, Shadow, Depth, Breakpoints), while the layout section includes a selection of examples, ready to copy and paste… both for the Section component included with kickstartDS and our recommendation for more general layout needs in Bedrock Layout Primitives.

Integration

Every Design system lives and fails with its success in being applied in real projects, the ones actually generating tangible value.

Component API for integrations

Making the application of your Design System as effortless as possible necessarily involves integrating with other frameworks, tooling, processes, libraries and technologies. Regardless of whether you are integrating HTML into your backend (written in e.g. PHP, ASP.NET, Ruby on Rails, etc), or alternatively using React templates directly… combining headless CMS and APIs through something like Gatsby or Next.js, integrations can really speed up that adoption process.

We also try to integrate really well out-of-the-box with popular tooling for Design Systems. First and foremost this means providing the best workbench experience possible using Storybook. Be it using addons we’ve written ourselves for JSON Schema support or Component Token, or adding best-practices and configuration you can easily adopt.

Guides

This is the meat of our documentation! We try to provide detailed guides here, each focused on a particular topic. Main topics currently include: Components, Examples, Migrations, Using our Starter and the Design System Initiative.

One special mention should be awarded to our main guide “Create your Design System”. With that one you start with an empty folder, and build up your Design System piece by piece… always accompanied by explanations. This is the perfect start to learn everything from the ground up!

5 steps of creating a Design System
5 steps of creating a Design System

The main guide also provides a great segue to our kickstartDS Design System Starter. If you don’t feel like following a lengthy guide, and prefer to get going with some code immediately, it is the most efficient way of starting your Design System. It contains the exact same code described in our component examples, and said main guide, so those can provide a great reference when going down that route. It is ready to be cloned on GitHub as a template repository, so you could have your own Design System open in your browser in 5 minutes max!

Design System Starter

Our Design System Starter is the perfect starting point if you want to get going immediately. You get everything described in our guides… and some really nice and helpful integrations (like Bedrock Layout Primitives, Bundling, Playroom, Releases) on top of that.

Initial setup only includes 5 super simple steps, that should be done within just 5 minutes, leaving you with a great foundation to start your real Design System work!

Screenshot of started but unchanged Starter Storybook
Screenshot of started, but unchanged, Starter Storybook

Features

The main features included with our Starter:

Getting Started

Getting started means following the following 5 steps:

  1. Create from template
  2. Update package.json
  3. Add your own logo
  4. Install dependencies
  5. Start Storybook

This hopefully gives you an idea on why we think this should be possible in just 5 minutes!

Result

After successfully cloning the Starter, and following the Getting Started, you’ll be left with a Design System ready to be added to!

Where exactly you take it next is pretty much up to you completely. There are some things one would pretty much always want to do (e.g. Customizing Design Token), while others might be optional. In which order you tackle those shouldn’t make a difference, just choose what fancies you the most!

You can also have a look at the “Next steps” section of the Starter docs, which give some more detailed pointers on what could come next (for example starting a Design System Initiative)

Feedback

We’d love to hear your feedback! Doesn’t matter if you only found a typo in our docs, or maybe your Design System journey came to a screeching halt when following our main guide, or just want to leave some warm words!

Feel free to join us on Discord!

If that’s not your cup of tea, you can also reach out to us:

Share this article


Get to know us

Find out if kickstartDS suits your project

Get in contact with our team

Talk to us now
Profile image Jonas Ulrich

Jonas Ulrich

Founder & CTO, frontend first since day one

After more than 15 years building websites and UIs ourselves, we wanted to improve the way teams collaborate when creating web frontends. That's why we started kickstartDS.

We want to share our experience and offer a huge library of best practice patterns and well tested web components. All the while following the principles of the Atomic Design methodology.

Dig deeper ⛏️

Back to blog

Have a look through our other blog posts about all aspects kickstartDS, technical or not.

Storybook

Discover all the different components included with kickstartDS, especially their controls and tokens.

kickstartDS

Explore kickstartDS, and how it can help your team create consistent interfaces super fast.