rainbow-sprinkles

Introduction to Rainbow Sprinkles 🧁

Rainbow Sprinkles is an innovative tool designed to enhance CSS styling for web projects. It pairs seamlessly with the popular CSS library, Vanilla Extract, and introduces dynamic, theme-driven style properties. This project aims to simplify and empower developers to use custom CSS utility classes more efficiently.

What is Rainbow Sprinkles?

Rainbow Sprinkles functions similarly to the @vanilla-extract/sprinkles by generating custom CSS utility classes during the build process. However, it steps up its game by utilizing CSS custom properties, which allow developers to assign dynamic values through inline style variables, adding flexibility and reducing the reliance on predefined lists.

Key Features

• Efficient CSS Generation: Rainbow Sprinkles reduces the amount of CSS generated as it scales only with the number of conditions set, rather than a combination of predefined values and possible conditions as seen with other tools.
• Dynamic Styling Capabilities: It supports dynamic inline style assignments, enabling the use of any valid CSS value, without losing the helpful TypeScript editor suggestions.

How to Set Up

To get started with Rainbow Sprinkles, follow these setup instructions:

1. Install Rainbow Sprinkles:

   Begin by installing the package via npm with the command:

   npm install rainbow-sprinkles
   

2. Create a Styling File:

   Set up a file named rainbow-sprinkles.css.ts and create your rainbowSprinkles function by defining responsive properties and dynamic styling options. This can include theme-driven spacing and color properties.

3. Integrate into Your Components:

   Add the rainbowSprinkles into your components, such as a Box component. This allows you to utilize the dynamic styles within your application efficiently.

   import { Box } from './Box';
   
   function App() {
     return (
       <Box bg="$blue50" margin="$medium $large">
         <Box textAlign="center" fontSize={{ mobile: '16px', desktop: '32px' }}>
           Hello world!
         </Box>
       </Box>
     );
   }
   

CSS Layers and Properties

Rainbow Sprinkles also allows the use of CSS layers, where you can define specific layers for property sets. Additionally, users can decide between dynamicProperties and staticProperties, depending on whether a property should have dynamic values or be optimized as a utility class.

Contribution and Community

The project thrives on collaboration. Contributions from the open-source community are highly welcomed and appreciated. Potential contributors can refer to the detailed guidelines provided in the contributing documentation.

Gratitude and Licensing

Rainbow Sprinkles is grateful for the inspirations from Vanilla Extract and Styled System, along with the design challenges from Homebase, Wayfair's design system. The project is distributed under the MIT License, promoting transparency and collaboration.

For any inquiries, the Homebase Engineering Team and key contributors are reachable via email and social media.

This exciting project invites developers to engage, innovate, and contribute, making it a vibrant part of the CSS styling toolkit!