kickstartDS Agency Starter

kickstartDS Agency Starter is a specialized version of the kickstartDS Starter, tailored for digital agencies. It provides a set of content components that can be used to style marketing pages, while maintaining the flexibility and customizability of the original starter.

Features

• Design System: A ready-to-use Design System, with pre-configured semantic token structure and example components.
• Storybook Integration: Storybook is configured with best practices, kickstartDS integration, addons, and composition. Hot reload is enabled for all code changes.
• Playroom Integration: Playroom is integrated for prototyping, including snippets.
• Bundling: The Design System is bundled for use with and without React.
• Release Handling: Semantic release handling is configured using auto.
• Content: Includes components, recipes, pages, and docs.

Installation

To install the Agency Starter, you need to have Node.js installed. We recommend managing your local Node.js versions using nvm.

Getting Started

To get started with the Agency Starter, follow these steps:

1. Create a new repository based on this template.
2. Update the package.json file with your project details.
3. Add your own logo.
4. Install the dependencies (npm install / yarn install).
5. Start Storybook (npm start, yarn start).

Components

The Agency Starter includes several components that are immediately useful for creating marketing pages. These components are built using the kickstartDS Starter and kickstartDS itself, showcasing its features and best practices:

| Component | Description | Main Properties | | --------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | | Blog Aside | This component provides meta info for a singular blog entry. | author, social sharing links, reading time, and published date | | Blog Head | This component serves as the intro portion of a singular blog entry. | published date, tags, headline, and cover image | | Blog Teaser | This component is used to display a blog teaser with date, tags, headline, teaser text and author. | date, tags, headline, teaser text, image, link, reading time, and author | | Button | A basic button component for user interaction. | label, target, variant, icon, size, and disabled state | | CTA | A Call to Action component. | headline, subheadline, text, button, and alignment | | FAQ | This component is used to display a FAQ section. | an array of questions and answers | | Features | This component is used to display a set of features. | layout and features | | Footer | A basic footer component. | logo, navigation, and social links | | Gallery | This component is used to display a gallery of images. | images and captions | | Header | A basic header component. | logo, navigation, and social links | | Logos | This component is used to display a set of logos. | an array of logos | | Nav Main | This component is used for main navigation. | an array of navigation items | | Section | This component is used to layout components into pages. | title, content, and layout | | Split | This component is used to create a split layout. | left and right content | | Stats | This component is used to display a set of statistics. | an array of stats | | Teaser Card | This component is used to display a teaser card. | image, headline, text, and link | | Testimonial | This component is used to display a testimonial. | author, quote, and image | | Text | A basic text component. | content and variant | | Visual | This component is used to display a visual element. | image, alt text, and caption |

Customizing

Applying your Design / Brand

To apply your branding and corporate design to kickstartDS, you need to follow two main steps:

1. Use a reduced set of Branding Token to generate your initial Design Token set in src/token/branding-token.json.
2. Fine-tune the resulting Design Token set in src/token/dictionary to closely fit your corporate identity.

For a more in-depth overview of those tokens, have a look at our foundations page about Branding Token, detailing all values in use.

You can change some select values around to match your brand. For example, you might want to change the primary color to #05566a, the primary-inverted color to #ecff00, and the font-family to -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' if you're trying to recreate the kickstartDS branding.

After you've selected your Branding Tokens, you can apply them by updating the branding-token.json file with your chosen values, and running npm run init-tokens / yarn init-tokens.

With this, you have completed your Design Token setup, and your branding should be successfully applied to kickstartDS!

Adding Your Own Component

To add your own component to this project, you can follow the guide "Create a component". Alternatively you can read about the ideas behind component creation. Here is a brief overview of the steps involved:

1. Create your component file: This should be a .tsx file in the src/components directory. The component should be a functional component and should follow the structure of existing components. For example, if you're creating a MyComponent component, you would create a MyComponent.tsx file in the src/components/my-component directory.

2. Create your component's JSON Schema: This should be a .schema.json file in the same directory as your component file. This file should define the component API for your component. For example, if you're creating a MyComponent component, you would create a my-component.schema.json file in the src/components/my-component directory. The .ts file for props will be generated based on this JSON Schema definition.

3. Create your component's Storybook file: This should be a .stories.tsx file in the same directory as your component file. This file should define the Storybook stories for your component. For example, if you're creating a MyComponent component, you would create a MyComponent.stories.tsx file in the src/components/my-component directory.

4. Add your component to the Playroom components: This involves adding an export statement for your component in the src/playroom/components.ts file.

Contributing

Contributions are welcome. Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as below, without any additional terms or conditions.

License

This project is licensed under either of

• Apache License, Version 2.0 (LICENSE-APACHE)
• MIT license (LICENSE-MIT)

at your option.

The SPDX license identifier for this project is MIT OR Apache-2.0.