SDS is the easiest way to start websites with simple design system. Since Astro is compatible with many frameworks, you can import your components and document them right in the markdown files. The project is still in the development phase, use at your own risk ;-)
Please feel free to fork it, edit it and let me know what do you think about it.
| title | Introduction |
|---|---|
| description | Docs intro |
| layout | ../../layouts/MainLayout.astro |
pnpm add spoko-design-systemor just clone the repository.
Most of the components from this repository can be seen in my projects:
- ⚡️Vue 3, Vite, pnpm - born with fastness
- 🎨 UnoCSS - the instant on-demand atomic CSS engine
- 😃 astro-icon - for local icons, sprites and
@iconify-json/*sets - 🍔 astro-navbar - fully responsive and accessible headless navigation bar
- 🔎 astro-pagefind - Astro integration for Pagefind static site search
- 🗒 astrojs/mdx - markdown support
- 📦 Playform compression - compression utilities to your Astro project
- 📲 PWA - Zero-config PWA Integration for Astro
- 🏷️ astro-meta-tags - Meta Tags inside for Astro Dev Toolbar
- 🖨 Static-site generation (SSG)
- 🎡 Swiper - modern mobile touch slider with hardware accelerated transitions and amazing native behavior
- 🌠 View Transitions API - View Transition API - makes it easy to change the DOM in a single step, while creating an animated transition between the two states. It's available in Chrome 111+ (more details)
- ☁️ Deploy on Netlify
The design system includes carefully curated icon collections from Iconify:
- 🎨 Material Design Icons - comprehensive icon set for UI elements
- 🚗 Ant Design Icons - clean outlined icons
- 📱 Bootstrap Icons - simple and consistent icons
- 🎯 Boxicons - high quality web icons
- 🌍 Carbon Icons - IBM's design language icons
- 🎪 Lucide Icons - beautiful & consistent icon toolkit
- 🎨 Streamline Freehand Color - hand-drawn style colored icons
- 📟 VS Code Icons - file type and technology icons
- 🏢 Simple Icons - brand icons for popular services
- ⚡ Fluent UI Icons - Microsoft's design system icons
See the complete list and configuration in icon.config.ts.
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.
export const SIDEBAR = [
{ text: "Core", header: true },
{ text: "Introduction", link: "/core/introduction" },
...,
{ text: "Components", header: true },
{ text: "Buttons", link: "/components/jumbotron" },
...,
{ text: "New section", header: true },
{ text: "New component", link: "/new-section/new-component.md" },
];To add new pages just create an .astro or markdown file in src/pages/[section]/my-page.mdx. 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.
If you want to customize the default colors, typography or shadows you can find the configuration file at uno.config.ts`. I think I have prepared enough shades of blue ;-)
Feel free to add new pages to the Core section
You can find the css for the pages in src/styles/content.css.
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/buttons.mdx file.
You can import your component library or create your own and document it easily.
There's a class called .component-preview that you can use to wrap your component in a grid, and it will look like this:
Spoko Design System template was made in Poland by @spoko.space for personal and commercial use.