Styling API

On this page 20

stx provides a powerful and flexible styling system that combines the best of modern CSS approaches. This guide covers all styling capabilities available in stx.

Basic Styling

Inline Styles

<div x-style="{ color: activeColor, fontSize: fontSize + 'px' }">
  Dynamic Styling
</div>

Class Bindings

<div x-class="{ active: isActive, 'text-danger': hasError }">
  Dynamic Classes
</div>

CSS Modules

Usage

import styles from './MyComponent.module.css'

<div x-class="styles.container">
  Scoped Styling
</div>

TypeScript Support

// style.d.ts
declare module '*.module.css' {
  const classes: { [key: string]: string }
  export default classes
}

Utility Classes

stx includes a comprehensive set of utility classes for rapid styling:

<div class="flex items-center justify-between p-4 bg-white shadow-md">
  <h2 class="text-xl font-bold text-gray-800">Title</h2>
  <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    Action
  </button>
</div>

Theme System

Theme Configuration

// stx.config.ts
export default {
  theme: {
    colors: {
      primary: '#3B82F6',
      secondary: '#10B981',
      // ...
    },
    spacing: {
      sm: '0.5rem',
      md: '1rem',
      lg: '1.5rem',
      // ...
    }
  }
}

Theme Usage

<div class="bg-primary p-md">
  Themed Component
</div>

Dynamic Styling

Reactive Styles

const theme = reactive({
  color: 'blue',
  fontSize: '16px'
})

<div x-style="theme">
  Reactive Styling
</div>

Computed Styles

const buttonClasses = computed(() => ({
  'btn': true,
  'btn-primary': isPrimary.value,
  'btn-disabled': isDisabled.value
}))

CSS-in-JS

Styled Components

const StyledButton = styled.button`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'black'};
  padding: 0.5em 1em;
  border-radius: 4px;
`

Responsive Design

Breakpoint Utilities

<div class="hidden sm:block md:flex lg:grid">
  Responsive Layout
</div>

Custom Media Queries

// stx.config.ts
export default {
  theme: {
    screens: {
      tablet: '640px',
      laptop: '1024px',
      desktop: '1280px',
    }
  }
}

Best Practices

Use CSS Modules for component-specific styles
Leverage utility classes for rapid development
Maintain consistent theming through configuration
Follow responsive design principles
Keep styles modular and reusable