dylandepass / rosalind-boilerplate

A Customizable Design System for Franklin Based Websites

Rosalind Boilerplate

A Customizable Design System for Franklin Based Websites

View Demo · Documentation · Report Bug · Request Feature

📔 Table of Contents

• About the Project
  • Features
• Getting Started
  • Running Tests
  • Run Locally
• Contributing
  • Code of Conduct
• FAQ
• License
• Contact

🌟 About the Project

When you are managing user experiences, it can be quite challenging to keep styles consistent and synchronized across multiple development platforms and devices. Rosalind offers a boilerplate setup to help get your company's design system started with an end-to-end designer/developer workflow across any platform.

With Rosalind, design decisions start in Figma, which is where designers feel most at home. They can then customize the design system to their liking and, with the click of a button, give developers access to these decisions in code on any platform iOS, Android, CSS, JS, HTML etc.

🎯 Features

• Manage design system in figma
• Sync design tokens across multiple development platforms with Style Dictionary
• Develop your Franklin blocks in isolation using Storybook JS
• Leverage the latest css features with PostCSS integration.
• Optimized for the best performance on AEM Franklin
• Fluid Typography that resizes smoothly to match any device width
• Light and dark themes included. Fully customizable
• Includes the incredible open source feather icons set

🧰 Getting Started

🏃 Run Locally

Clone the project

  git clone https://github.com/dylandepass/rosalind-boilerplate.git

Go to the project directory

  cd rosalind-boilerplate

Install dependencies

  npm install

Start the server

  npm run dev

🧪 Running Tests

To run tests, run the following command.

  npm run test

To run storybook tests, run the following command.

  npm run storybook
  npm run test-storybook

👋 Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

📜 Code of Conduct

Please read the Code of Conduct

❔ FAQ

• How do you managing the tokens?

  • The design tokens are managed in Figma and transformed into variable files (css, scss, swift etc) using StyleDictionary. Currently rosalind is only setup to work with Token Studio for Figma but could be setup to work with other token management software.

• How do you apply tokens to franklin blocks?

  • The tokens can be applied using standard css variables. Rosalind also includes a set of mixins that can be used instead of css variables. These mixins abstract the complexities of having to remember token names.

• How do you keep the design and the code in sync? i.e if a component gets a new token added/removed

  • Rosalind includes some utility scripts that can to detect if the core design system css is out of date with the tokens. unused-variables.mjs will detect if a variable is not used in the core design system. For a lot of variables this is ok and expected. validate-system.mjs will check if any variables are used in the core design system that no longer exists. This check runs as part of CI and will stop a build if a token is not found.

⚠️ License

Distributed under the Apache 2-0 License. See LICENSE.txt for more information.

🤝 Contact

Dylan Depass - @dylandepass - [e-mail]