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. This repository contains the kickstartDS Premium Agency Starter... which includes more visually rich content components based off of our kickstartDS Content module.
- 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.
- 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.
To install the Agency Starter, you need to have Node.js installed. We recommend managing your local Node.js versions using nvm.
To get started with the Agency Starter, follow these steps:
- Create a new repository based on this template.
- Update the
package.jsonfile with your project details. - Add your own logo.
- Install the dependencies (
npm install/yarn install). - Start Storybook (
npm start,yarn start).
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 |
To apply your branding and corporate design to kickstartDS, you need to follow two main steps:
- Use a reduced set of Branding Token to generate your initial Design Token set in
src/token/branding-token.json. - Fine-tune the resulting Design Token set in
src/token/dictionaryto 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!
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:
-
Create your component file: This should be a
.tsxfile in thesrc/componentsdirectory. The component should be a functional component and should follow the structure of existing components. For example, if you're creating aMyComponentcomponent, you would create aMyComponent.tsxfile in thesrc/components/my-componentdirectory. -
Create your component's JSON Schema: This should be a
.schema.jsonfile in the same directory as your component file. This file should define the component API for your component. For example, if you're creating aMyComponentcomponent, you would create amy-component.schema.jsonfile in thesrc/components/my-componentdirectory. The.tsfile for props will be generated based on this JSON Schema definition. -
Create your component's Storybook file: This should be a
.stories.tsxfile in the same directory as your component file. This file should define the Storybook stories for your component. For example, if you're creating aMyComponentcomponent, you would create aMyComponent.stories.tsxfile in thesrc/components/my-componentdirectory. -
Add your component to the Playroom components: This involves adding an export statement for your component in the
src/playroom/components.tsfile.
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.
This project is licensed under either of
at your option.
The SPDX license identifier for this project is MIT OR Apache-2.0.