Breakpoints

Responsive design breakpoints configuration and active state monitoring.

Interactive Playground

xs≥ 0px

sm≥ 640px

md≥ 768px

lg≥ 1024px

xl≥ 1280px

Adjust Breakpoints

Window Width0px

Active TokenXS

Resize your browser window to see the active token change in real-time.

Fluid Layout Example

This component uses UXDSL's responsive syntax to switch from a single-column layout (flex-direction: column) to a row layout (flex-direction: row) when the viewport exceeds the md breakpoint.

#DemoBreakpointsCards {
display: flex;
flex-direction: xs(column) md(row);
gap: xs(space(2)) md(space(4));
padding: xs(space(3)) md(space(6));
}

Try it: Adjust the md slider above to see the cards below switch between column and row layout in real-time.

Fluid Layout

Layouts that flow naturally across device sizes.

Adaptive

Styles that change based on the viewport width.

Modular

Component-based design for maximum reusability.

Developer Guide

UXDSL Syntax

UXDSL uses a concise function-like syntax for responsive values. This works on any CSS property.

.my-component {
/* property: xs(val) md(val) lg(val); */

/* Example: Flex Direction */
flex-direction: xs(column) md(row);

/* Example: Spacing */
padding: xs(space(2)) md(space(4));
}

Default Values

Token	Value	Description
`xs`	0px	Mobile Portrait
`sm`	640px	Mobile Landscape
`md`	768px	Tablet Portrait
`lg`	1024px	Tablet Landscape / Laptop
`xl`	1280px	Desktop

Syntax Examples

UXDSL allows you to apply responsive styles using a function-like syntax for each breakpoint. This works on any CSS property.

Responsive Typography

Adjust font size based on screen width.

/* UXDSL Code */
.title {
font-size: xs(1rem) sm(1.25rem) md(1.5rem) lg(2rem);
}

Responsive Spacing

Change padding dynamically.

/* UXDSL Code */
.card {
padding: xs(space(2)) md(space(4));
}

Resize the window to see the padding change from space(2) to space(4).

Hiding Elements

Conditionally display elements.

.sidebar {
display: xs(none) lg(block);
}

Configuration

To customize the default breakpoints for your project, update the breakpoints object in your uxdsl.config.js file.

// uxdsl.config.js
module.exports = {
// ...
breakpoints: {
  xs: 0,
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280
}
}

Runtime Updates

You can update breakpoints dynamically in the browser using the ds-runtime module. This allows for building live theme editors or testing responsiveness instantly.

API Usage

import { breakpoints } from 'postcss-uxdsl/ds-runtime'

// Get current values
const current = breakpoints.get()

// Update 'md' breakpoint to 800px live
breakpoints.update('md', 800)

// Reset all breakpoints to initial config
breakpoints.reset()

Reacting to Changes

You can subscribe to breakpoint changes to keep your application state in sync. This is useful if you need to display the current values in your UI or perform logic based on the active configuration.

import { useEffect, useState } from 'react'
import { breakpoints } from 'postcss-uxdsl/ds-runtime'

export function useBreakpoints() {
const [values, setValues] = useState(breakpoints.get())

useEffect(() => {
  // Ensure runtime is initialized (handles <link> tag conversion if needed)
  breakpoints.get()
  
  // Sync after a short delay to catch any async initialization
  const timer = setTimeout(() => {
    setValues(breakpoints.get())
  }, 100)

  // Subscribe to updates
  const unsubscribe = breakpoints.subscribe((event) => {
    if (event.type === 'breakpoint') {
      setValues(breakpoints.get())
    }
  })
  
  return () => {
    clearTimeout(timer)
    unsubscribe()
  }
}, [])

return values
}