Astro Design System
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.
- Astro
Astro is the all-in-one web framework designed for speed. Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Templates & Themes
A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.
