Documentation

Getting Started

Welcome to the Style documentation! This guide will help you build stunning designs with our styling platform. Follow the steps below to start creating.

Installation

npm install @style/core

Once installed, you can import Style components into your project or start using our web-based editor at /style.php/try.html.

API Reference

createStyle({})

Parameters:

theme - Define global design system colors, fonts, and spacing
breakpoints - Configure responsive design thresholds
effects - Enable animations and transitions


// Example usage
createStyle({ theme: { primary: '#8B5CF6' } });

applyStyles()

Returns: StyleSheet object with compiled CSS

Code Examples

Responsive Grid Layout


styleSheet.create({
  grid: {
    base: "grid gap-4 p-6",
    sm: "grid-cols-1",
    md: "grid-cols-2",
    lg: "grid-cols-3"
  }
})

Animated Button


styleSheet.create({
  button: {
    base: "px-6 py-3 rounded-full font-medium transition-all",
    hover: "scale-105 bg-purple-600 text-white",
    active: "scale-95 bg-purple-700"
  }
})

Best Practices

Use Design Tokens

Create reusable color variables and spacing values rather than hardcoding values throughout your styles.

Modular Components

Break UI into reusable components with styles that can be shared across different screens and layouts.

Document Everything

Use comment blocks in code and maintain an updated documentation site for design team collaboration.

Troubleshooting

Styles not applying to components ▼

Make sure:

You're using the latest version
Your styles are correctly imported
No conflicting styles in global CSS

If still having issues, try using !important temporarily for debugging.

Performance issues with many components ▼

Optimization tips:

Use memoization for static styles
Collapse nested selectors
Remove unused styles with PurgeCSS