https://github.com/jordienr/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.
https://github.com/jordienr/astro-design-system

astro design-system theme

Last synced: 16 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/jordienr/astro-design-system
• Owner: jordienr
• License: mit
• Created: 2022-04-08T22:34:36.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2023-05-18T17:42:16.000Z (about 1 year ago)
• Last Synced: 2024-02-23T22:39:46.089Z (4 months ago)
• Topics: astro, design-system, theme
• Language: Astro
• Homepage: https://astro-design-system.vercel.app
• Size: 924 KB
• Stars: 99
• Watchers: 4
• Forks: 18
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-stars - jordienr/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. (Astro)

README

        
---

title: Introduction

description: Docs intro

layout: ../../layouts/MainLayout.astro

---

# Astro Design System Theme

Astro Design System is the easiest way to start your our design system. Since Astro is compatible with many frameworks, you can import your components and document them right in the markdown files.

## Getting started

### Adding new sections

Although it's not required, you can create folders for new sections.

To show the section on the left side navigation, add it to the navigation config file at `src/config.ts`.

Example:

```js

export const SIDEBAR = [

    { text: "Core", header: true },

    { text: "Introduction", link: "/core/introduction" },

    ...,

    { text: "Components", header: true },

    { text: "Buttons", link: "/components/buttons" },

    ...,

    { text: "New section", header: true },

    { text: "New component", link: "/new-section/new-component.md" },

];

```

### Adding new pages

To add new pages just create an .astro or markdown file in `src/pages/[section]/my-page.md`. Remember to add it to the navigation config in `src/config.ts` so it shows up in the left side navigation.

You're free to organize the pages however you want.

### Customizing Core section (colors, typography, shadows...)

If you want to customize the default colors, typography or shadows you can find the configuration file at `src/config/design.config.ts`.

Feel free to add new pages to the Core section

### Customizing the page layout

You can find the css for the pages in `src/styles/content.scss`.

### Adding your components

Astro is great for design systems because it allows you to import components from different frameworks like react, vue or svelte.

To get started check how the `MainButton` component is used in the `src/pages/en/buttons.md` file.

You can import your component library or create your own and document it easily.

### `.component-preview` utility

There's a class called `.component-preview` that you can use to wrap your component in a grid, and it will look like this:



    Your component



### Have fun!

Astro Design System template was made by **[@jordienr](https://twitter.com/jordienr)** for personal and commercial use.