This is a theme/starter project for design systems built in Astro. You can install and import your own component library and document all your design decisions and components.
Overview:
Astro Design System is a user-friendly tool that helps designers easily start their own design system. It offers compatibility with multiple frameworks and allows users to import components and document them directly in markdown files.
Features:
- Compatible with multiple frameworks: Astro Design System supports various frameworks, including React, Vue, and Svelte, making it flexible and adaptable for different development environments.
- Easy component organization: Users can create folders for new sections to organize their components efficiently. Additionally, sections can be added to the left side navigation by modifying the navigation configuration file.
- Customizable design elements: The design.config.ts file allows users to customize core design elements such as colors, typography, and shadows to match their visual preferences.
- Simplified component import: Astro makes it simple to import components from different frameworks or create custom components. The MainButton component usage in the provided example file demonstrates how to integrate components seamlessly.
- Convenient component preview: The utility class .component-preview provides a grid-style wrapper for components, allowing users to view them conveniently while documenting.
Installation:
To install Astro Design System, follow these steps:
- Clone the Astro Design System repository.
- Navigate to the repository directory.
- Open the configuration file located at src/config.ts to customize the left side navigation sections.
- Make changes to design elements by modifying the configuration file at src/config/design.config.ts.
- Customize the page layout by editing the css file found at src/styles/content.scss.
- Import components from desired frameworks or create custom components using the provided examples in the markdown files.
Summary:
Astro Design System is a powerful tool that simplifies the process of creating a design system. Its compatibility with multiple frameworks, easy component organization, customizable design elements, and convenient component import and preview features make it an ideal choice for designers and developers. By following the installation guide, users can quickly set up and customize their design system using Astro.
