Design System to CSS Code

This page summarizes the projects mentioned and recommended in the original post on /r/web_design

Our great sponsors
  • Appwrite - The open-source backend cloud platform
  • Onboard AI - Learn any GitHub repo in 59 seconds
  • InfluxDB - Collect and Analyze Billions of Data Points in Real Time
  • storybook

    Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

    There are multiple design system solutions like zeroheight, supernova, storybook and even figma has some options that allows you to document design logic and setup design tokens (variables).

  • Bootstrap

    The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

    However, none of them allows you to export the entire design system as a single CSS bundle. Usually these tools provides you a CSS file with tokens and that's it. As a reference, you can think about Bootstrap's bundle css file that contains all the variables (tokens) and classNames of components. I am looking for something similar. A software that allows me to manage components and their styling (classNames). Things like buttons, forms, alert messages, article card, sidebars etc... and export everything as a single CSS bundle file, kind of "Global Styling" file.

  • Appwrite

    Appwrite - The open-source backend cloud platform. Add Auth, Databases, Functions, and Storage to your product and build any application at any scale while using your preferred coding languages and tools.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts