or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

breakpoints.mdcontainers.mdindex.mdscss-api.mdspacing.mdunit-conversion.md
tile.json

breakpoints.mddocs/

Responsive Breakpoints

Comprehensive breakpoint system providing predefined responsive breakpoints and utility functions for creating consistent media queries across Carbon Design System applications.

Capabilities

Breakpoint Configuration

Predefined breakpoints with width, column count, and margin specifications following the Carbon Design System grid.

interface BreakpointConfig {
  width: string;
  columns: number;
  margin: string;
}

const breakpoints: {
  sm: BreakpointConfig;
  md: BreakpointConfig;
  lg: BreakpointConfig;
  xlg: BreakpointConfig;
  max: BreakpointConfig;
};

Breakpoint Values:

NameWidthColumnsMarginDescription
sm20rem (320px)40Small mobile devices
md42rem (672px)81remTablets
lg66rem (1056px)161remSmall desktop
xlg82rem (1312px)161remLarge desktop
max99rem (1584px)161.5remExtra large desktop

Usage Examples:

import { breakpoints } from '@carbon/layout';

// Access breakpoint configuration
const tabletWidth = breakpoints.md.width; // "42rem"
const desktopColumns = breakpoints.lg.columns; // 16
const mobileMargin = breakpoints.sm.margin; // "0"

// Use in component logic
const isMobile = window.innerWidth < parseFloat(breakpoints.md.width) * 16;

Min-Width Media Queries

Creates media queries for minimum width breakpoints (mobile-first approach).

type BreakpointName = 'sm' | 'md' | 'lg' | 'xlg' | 'max';

/**
 * Generate min-width media query for given breakpoint
 * @param name - Breakpoint name
 * @returns CSS media query string
 */
function breakpointUp(name: BreakpointName): string;

Usage Examples:

import { breakpointUp } from '@carbon/layout';

const tabletAndUp = breakpointUp('md'); 
// "@media (min-width: 42rem)"

const desktopAndUp = breakpointUp('lg'); 
// "@media (min-width: 66rem)"

// Use in CSS-in-JS
const styles = {
  component: {
    padding: '1rem',
    [tabletAndUp]: {
      padding: '2rem',
    },
  },
};

Max-Width Media Queries

Creates media queries for maximum width breakpoints.

/**
 * Generate max-width media query for given breakpoint
 * @param name - Breakpoint name
 * @returns CSS media query string
 */
function breakpointDown(name: BreakpointName): string;

Usage Examples:

import { breakpointDown } from '@carbon/layout';

const mobileOnly = breakpointDown('sm'); 
// "@media (max-width: 20rem)"

const tabletAndBelow = breakpointDown('md'); 
// "@media (max-width: 42rem)"

// Use for mobile-specific styles
const mobileStyles = {
  [mobileOnly]: {
    fontSize: '14px',
    padding: '0.5rem',
  },
};

Breakpoint Alias

Convenience function that aliases breakpointUp for shorter syntax.

/**
 * Alias for breakpointUp function
 * @param name - Breakpoint name
 * @returns CSS media query string
 */
function breakpoint(name: BreakpointName): string;

Usage Examples:

import { breakpoint } from '@carbon/layout';

const tablet = breakpoint('md'); // Same as breakpointUp('md')
const desktop = breakpoint('lg'); // Same as breakpointUp('lg')

SCSS Breakpoint Integration

While JavaScript provides programmatic access to breakpoint values, SCSS integration works through imported variables:

SCSS Usage Examples:

@use '@carbon/layout' as layout;

.component {
  padding: 1rem;
  
  // Access breakpoint configuration
  width: layout.$md-width; // Requires SCSS variable generation
  
  // Manual media queries (recommended approach)
  @media (min-width: 42rem) { // md breakpoint
    padding: 2rem;
  }
  
  @media (min-width: 66rem) { // lg breakpoint
    padding: 3rem;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
  }
}

Responsive Design Patterns

Mobile-First Approach

Using breakpointUp for progressive enhancement:

import { breakpointUp } from '@carbon/layout';

const responsiveStyles = {
  // Base styles (mobile)
  fontSize: '14px',
  padding: '0.5rem',
  
  // Tablet and up
  [breakpointUp('md')]: {
    fontSize: '16px',
    padding: '1rem',
  },
  
  // Desktop and up
  [breakpointUp('lg')]: {
    fontSize: '18px',
    padding: '1.5rem',
    display: 'grid',
    gridTemplateColumns: 'repeat(16, 1fr)',
  },
};

Breakpoint-Specific Styles

Using both min and max width queries for specific ranges:

import { breakpointUp, breakpointDown } from '@carbon/layout';

// Tablet only (between md and lg)
const tabletOnlyQuery = `${breakpointUp('md')} and (max-width: 65.99rem)`;

const styles = {
  [tabletOnlyQuery]: {
    gridTemplateColumns: 'repeat(8, 1fr)',
    padding: '1rem',
  },
};

Grid System Integration

Combining breakpoints with grid column specifications:

import { breakpoints, breakpointUp } from '@carbon/layout';

const GridComponent = () => {
  const getColumns = (breakpoint) => breakpoints[breakpoint].columns;
  
  return {
    display: 'grid',
    gap: '1rem',
    gridTemplateColumns: `repeat(${getColumns('sm')}, 1fr)`,
    
    [breakpointUp('md')]: {
      gridTemplateColumns: `repeat(${getColumns('md')}, 1fr)`,
    },
    
    [breakpointUp('lg')]: {
      gridTemplateColumns: `repeat(${getColumns('lg')}, 1fr)`,
    },
  };
};

Common Breakpoint Patterns

Container Queries Compatibility

When using with CSS Container Queries:

import { breakpoints } from '@carbon/layout';

// Convert breakpoint values for container queries
const containerBreakpoints = {
  sm: parseFloat(breakpoints.sm.width) * 16, // Convert rem to px
  md: parseFloat(breakpoints.md.width) * 16,
  lg: parseFloat(breakpoints.lg.width) * 16,
};

const containerStyles = {
  '@container (min-width: 672px)': { // md breakpoint in px
    gridTemplateColumns: 'repeat(8, 1fr)',
  },
};