React ਅਤੇ ਆਧੁਨਿਕ CSS ਨਾਲ ਸ਼ਾਨਦਾਰ ਵੈੱਬ ਇੰਟਰਫੇਸ ਬਣਾਉਣਾ

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header  aside"
    "sidebar main    aside"
    "sidebar footer  aside";
  gap: 1rem;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

:root {
  /* Colors */
  --color-primary: #3b82f6;
  --color-primary-dark: #1d4ed8;
  --color-surface: #ffffff;
  --color-surface-elevated: #f8fafc;
  --color-text: #0f172a;
  --color-text-muted: #64748b;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px rgb(0 0 0 / 0.07);
  --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.1);

  /* Borders */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;
}

/* Button.module.css */
.button {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.primary {
  background: var(--color-primary);
  color: white;
}

.primary:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
}

import styles from './Button.module.css';

function Button({ variant = 'primary', children, ...props }) {
  return (
    <button
      className={`${styles.button} ${styles[variant]}`}
      {...props}
    >
      {children}
    </button>
  );
}

function Card({ title, description, image }) {
  return (
    <div className="rounded-lg shadow-md overflow-hidden
                    bg-white hover:shadow-lg transition-shadow">
      <img src={image} alt={title}
           className="w-full h-48 object-cover" />
      <div className="p-4">
        <h3 className="text-lg font-semibold text-gray-900">
          {title}
        </h3>
        <p className="mt-2 text-gray-600 text-sm">
          {description}
        </p>
      </div>
    </div>
  );
}

import styled from 'styled-components';

const Badge = styled.span`
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: ${props => props.variant === 'success'
    ? '#dcfce7' : '#dbeafe'};
  color: ${props => props.variant === 'success'
    ? '#166534' : '#1e40af'};
`;

ਸਟੋਰੀਬੁੱਕ UI ਕੰਪੋਨੈਂਟ ਦੇ ਵਿਕਾਸ ਅਤੇ ਦਸਤਾਵੇਜ਼ ਬਣਾਉਣ ਲਈ ਇੱਕ ਅਲੱਗ ਵਾਤਾਵਰਣ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ। ਇਹ ਇੱਕ ਵਿਕਾਸ ਟੂਲ ਅਤੇ ਇੱਕ ਜੀਵਣ ਸ਼ੈਲੀ ਗਾਈਡ ਦੋਵਾਂ ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ:

// Button.stories.jsx
import { Button } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: {
      options: ['primary', 'secondary', 'ghost'],
      control: { type: 'select' },
    },
    size: {
      options: ['sm', 'md', 'lg'],
      control: { type: 'select' },
    },
  },
};

export const Primary = {
  args: { variant: 'primary', children: 'Click me' },
};

export const Secondary = {
  args: { variant: 'secondary', children: 'Click me' },
};

ਸਟੋਰੀਬੁੱਕ ਡਿਜ਼ਾਈਨਰਾਂ ਅਤੇ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਸਹਿਯੋਗ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦੀ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਏਕੀਕ੍ਰਿਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਹਰੇਕ ਭਾਗ ਸਹੀ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ।

ਮਾਈਕਰੋ-ਇੰਟਰਐਕਸ਼ਨ ਅਤੇ ਐਨੀਮੇਸ਼ਨਾਂ

ਵਿਚਾਰਸ਼ੀਲ ਐਨੀਮੇਸ਼ਨ ਉਪਭੋਗਤਾਵਾਂ ਦੀ ਅਗਵਾਈ ਕਰਦੇ ਹਨ, ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਅਤੇ ਪਾਲਿਸ਼ ਦੀ ਭਾਵਨਾ ਪੈਦਾ ਕਰਦੇ ਹਨ। Framer Motion React ਲਈ ਪ੍ਰਮੁੱਖ ਐਨੀਮੇਸ਼ਨ ਲਾਇਬ੍ਰੇਰੀ ਹੈ। ਫ੍ਰੇਮਰ ਮੋਸ਼ਨ ਦੇ ਨਾਲ

ਬੇਸਿਕ ਐਨੀਮੇਸ਼ਨਾਂ

import { motion } from 'framer-motion';

function FadeInCard({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut' }}
    >
      {children}
    </motion.div>
  );
}

ਸਟੈਗਰਡ ਲਿਸਟ ਐਨੀਮੇਸ਼ਨਾਂ

import { motion } from 'framer-motion';

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 },
  },
};

const item = {
  hidden: { opacity: 0, x: -20 },
  show: { opacity: 1, x: 0 },
};

function AnimatedList({ items }) {
  return (
    <motion.ul variants={container}
      initial="hidden" animate="show">
      {items.map(i => (
        <motion.li key={i.id} variants={item}>
          {i.label}
        </motion.li>
      ))}
    </motion.ul>
  );
}

CSS-ਸਿਰਫ ਮਾਈਕ੍ਰੋ-ਇੰਟਰਐਕਸ਼ਨ

ਹਰ ਇੱਕ ਐਨੀਮੇਸ਼ਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। CSS ਪਰਿਵਰਤਨ ਅਤੇ ਪਰਿਵਰਤਨ ਬਹੁਤ ਸਾਰੇ ਆਮ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਸੰਭਾਲਦੇ ਹਨ:

.interactive-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.interactive-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.button-press:active {
  transform: scale(0.97);
}

ਪਹੁੰਚਯੋਗ ਕੰਪੋਨੈਂਟ ਪੈਟਰਨ

ਪਹੁੰਚਯੋਗਤਾ ਵਿਕਲਪਿਕ ਨਹੀਂ ਹੈ — ਇਹ ਪੇਸ਼ੇਵਰ ਵੈੱਬ ਇੰਟਰਫੇਸਾਂ ਲਈ ਇੱਕ ਲੋੜ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਇਹਨਾਂ ਪੈਟਰਨਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ ਕਿ ਤੁਹਾਡੇ ਹਿੱਸੇ ਹਰੇਕ ਲਈ ਕੰਮ ਕਰਦੇ ਹਨ।

ਫੋਕਸ ਪ੍ਰਬੰਧਨ

ਜਦੋਂ ਮਾਡਲ ਖੁੱਲ੍ਹਦੇ ਹਨ, ਤਾਂ ਫੋਕਸ ਨੂੰ ਮਾਡਲ 'ਤੇ ਲੈ ਜਾਓ। ਜਦੋਂ ਉਹ ਬੰਦ ਹੋ ਜਾਂਦੇ ਹਨ, ਫੋਕਸ ਨੂੰ ਟਰਿੱਗਰ ਐਲੀਮੈਂਟ 'ਤੇ ਵਾਪਸ ਕਰੋ। ਬੈਕਗ੍ਰਾਊਂਡ ਸਮਗਰੀ ਦੇ ਨਾਲ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਨੂੰ ਰੋਕਣ ਲਈinertਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰੋ:

function Modal({ isOpen, onClose, children }) {
  const closeRef = useRef();
  const previousFocus = useRef();

  useEffect(() => {
    if (isOpen) {
      previousFocus.current = document.activeElement;
      closeRef.current?.focus();
    } else {
      previousFocus.current?.focus();
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div role="dialog" aria-modal="true">
      <button ref={closeRef} onClick={onClose}
        aria-label="Close dialog">X</button>
      {children}
    </div>
  );
}

ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ

ਸਾਰੇ ਇੰਟਰਐਕਟਿਵ ਤੱਤ ਕੀਬੋਰਡ ਪਹੁੰਚਯੋਗ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। ਕਸਟਮ ਕੰਪੋਨੈਂਟ ਜਿਵੇਂ ਕਿ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ, ਟੈਬਾਂ ਅਤੇ ਕੈਰੋਜ਼ਲ ਨੂੰ ਕੀਬੋਰਡ ਇੰਟਰੈਕਸ਼ਨ ਲਈ WAI-ARIA ਡਿਜ਼ਾਈਨ ਪੈਟਰਨਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।

ਕਲਰ ਕੰਟ੍ਰਾਸਟ ਅਤੇ ਵਿਜ਼ੂਅਲ ਡਿਜ਼ਾਈਨ

ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਟੈਕਸਟ WCAG 2.1 ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ: ਆਮ ਟੈਕਸਟ ਲਈ 4.5:1, ਵੱਡੇ ਟੈਕਸਟ ਲਈ 3:1। ਜਾਣਕਾਰੀ ਦੇਣ ਲਈ ਇਕੱਲੇ ਰੰਗ 'ਤੇ ਭਰੋਸਾ ਨਾ ਕਰੋ — ਪੂਰਕ ਸੂਚਕਾਂ ਵਜੋਂ ਆਈਕਾਨਾਂ, ਟੈਕਸਟ ਲੇਬਲਾਂ, ਜਾਂ ਪੈਟਰਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨ ਰਣਨੀਤੀਆਂ

ਆਧੁਨਿਕ ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨ ਬ੍ਰੇਕਪੁਆਇੰਟ ਤੋਂ ਪਰੇ ਹੈ। ਇੱਕ ਤਰਲ ਡਿਜ਼ਾਈਨ ਪਹੁੰਚ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੋ ਸਾਰੇ ਸਕ੍ਰੀਨ ਆਕਾਰਾਂ ਵਿੱਚ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਅਨੁਕੂਲ ਹੋਵੇ।

ਫਲੂਇਡ ਟਾਈਪੋਗ੍ਰਾਫੀ

ਟਾਈਪੋਗ੍ਰਾਫੀ ਬਣਾਉਣ ਲਈclamp()ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੋ ਘੱਟੋ-ਘੱਟ ਅਤੇ ਵੱਧ ਤੋਂ ਵੱਧ ਆਕਾਰਾਂ ਦੇ ਵਿਚਕਾਰ ਆਸਾਨੀ ਨਾਲ ਸਕੇਲ ਕਰੇ:

h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.2;
}

p {
  font-size: clamp(0.9rem, 1.5vw, 1.125rem);
  line-height: 1.6;
}

ਰਿਸਪਾਂਸਿਵ ਸਪੇਸਿੰਗ

.section {
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

ਡਾਰਕ ਮੋਡ ਲਾਗੂ ਕਰਨਾ

ਡਾਰਕ ਮੋਡ ਲਈ ਰੰਗਾਂ ਨੂੰ ਉਲਟਾਉਣ ਤੋਂ ਵੱਧ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇੱਕ ਵੱਖਰਾ ਰੰਗ ਪੈਲਅਟ ਡਿਜ਼ਾਈਨ ਕਰੋ ਜੋ ਸਹੀ ਕੰਟ੍ਰਾਸਟ ਅਤੇ ਵਿਜ਼ੂਅਲ ਲੜੀ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ:

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --border-color: #e2e8f0;
}

[data-theme='dark'] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --border-color: #334155;
}

React ਵਿੱਚ, ਇੱਕ ਪ੍ਰਸੰਗ ਪ੍ਰਦਾਤਾ ਦੇ ਨਾਲ ਥੀਮ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰੋ ਅਤੇ ਲੋਕਲ ਸਟੋਰੇਜ ਲਈ ਉਪਭੋਗਤਾ ਤਰਜੀਹ ਨੂੰ ਜਾਰੀ ਰੱਖੋ:

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState(() => {
    if (typeof window === 'undefined') return 'light';
    return localStorage.getItem('theme') ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches
        ? 'dark' : 'light');
  });

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }, [theme]);

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

ਪਰਫਾਰਮੈਂਸ

ਪਰਫਾਰਮੈਂਸ ਆਪਟੀਮਫੁੱਲ ਐਕਸਟੈਗ 252X

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState(() => {
    if (typeof window === 'undefined') return 'light';
    return localStorage.getItem('theme') ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches
        ? 'dark' : 'light');
  });

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }, [theme]);

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

. ਵੀ ਤੇਜ਼ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ. ਆਪਣੇ UI ਨੂੰ ਜਵਾਬਦੇਹ ਰੱਖਣ ਲਈ ਇਹਨਾਂ CSS ਪ੍ਰਦਰਸ਼ਨ ਤਕਨੀਕਾਂ ਨੂੰ ਲਾਗੂ ਕਰੋ।

CSS ਕੰਟੇਨਮੈਂਟ

containਵਿਸ਼ੇਸ਼ਤਾ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦੱਸਦੀ ਹੈ ਕਿ ਇੱਕ ਤੱਤ ਦੀ ਸਮੱਗਰੀ ਬਾਕੀ ਦੇ ਪੰਨੇ ਤੋਂ ਸੁਤੰਤਰ ਹੈ, ਰੈਂਡਰਿੰਗ ਓਪਟੀਮਾਈਜੇਸ਼ਨ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦੀ ਹੈ:

.card {
  contain: layout style paint;
}

.sidebar {
  contain: layout size style;
}

TAG267X ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈwill-change2 ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਬਦਲ ਦੇਵੇਗੀ। ਆਉਣ ਵਾਲੇ ਐਨੀਮੇਸ਼ਨਾਂ ਬਾਰੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਸੰਕੇਤ. ਇਸ ਨੂੰ ਥੋੜ੍ਹੇ ਜਿਹੇ ਢੰਗ ਨਾਲ ਲਾਗੂ ਕਰੋ — ਜ਼ਿਆਦਾ ਵਰਤੋਂ ਨਾਲ ਮੈਮੋਰੀ ਦੀ ਖਪਤ ਵਧ ਸਕਦੀ ਹੈ:

.animated-element {
  will-change: transform, opacity;
}

/* Remove after animation completes */
.animated-element.done {
  will-change: auto;
}

ਸਮਗਰੀ ਦੀ ਦਿੱਖ

ਬਹੁਤ ਸਾਰੇ ਭਾਗਾਂ ਵਾਲੇ ਲੰਬੇ ਪੰਨਿਆਂ ਲਈ,content-visibility: autoਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਆਫ-ਸਕ੍ਰੀਨ ਸਮਗਰੀ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਨਾਲ ਰੈਂਡਰ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ: XTAG2747X7TAG27 Content

ਸ਼ਾਨਦਾਰ ਵੈੱਬ ਇੰਟਰਫੇਸ ਬਣਾਉਣਾ ਇੱਕ ਕਲਾ ਹੈ ਜੋ ਵਿਜ਼ੂਅਲ ਡਿਜ਼ਾਈਨ, ਤਕਨੀਕੀ ਹੁਨਰ, ਅਤੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਹਮਦਰਦੀ ਨੂੰ ਮਿਲਾਉਂਦੀ ਹੈ। ਆਧੁਨਿਕ CSS ਸ਼ਕਤੀਸ਼ਾਲੀ ਲੇਆਉਟ ਪ੍ਰਣਾਲੀਆਂ, ਤਰਲ ਡਿਜ਼ਾਈਨ ਤਕਨੀਕਾਂ, ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਅਨੁਕੂਲਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। React ਦਾ ਕੰਪੋਨੈਂਟ ਮਾਡਲ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਬਿਲਡਿੰਗ ਬਲਾਕਾਂ ਵਿੱਚ ਸਟਾਈਲ, ਵਿਹਾਰ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ। ਇਹਨਾਂ ਤਕਨਾਲੋਜੀਆਂ ਨੂੰ ਵਿਚਾਰਸ਼ੀਲ ਐਨੀਮੇਸ਼ਨ, ਮਜ਼ਬੂਤ ​​ਪਹੁੰਚਯੋਗਤਾ ਅਭਿਆਸਾਂ, ਅਤੇ ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਟ੍ਰਕਚਰਡ ਡਿਜ਼ਾਇਨ ਸਿਸਟਮ ਨਾਲ ਜੋੜ ਕੇ, ਤੁਸੀਂ ਅਜਿਹੇ ਇੰਟਰਫੇਸ ਬਣਾ ਸਕਦੇ ਹੋ ਜੋ ਨਾ ਸਿਰਫ਼ ਸੁੰਦਰ ਹਨ, ਸਗੋਂ ਤੇਜ਼, ਪਹੁੰਚਯੋਗ ਅਤੇ ਸਾਂਭਣਯੋਗ ਵੀ ਹਨ। ਡਿਜ਼ਾਇਨ ਟੋਕਨਾਂ ਅਤੇ ਲੇਆਉਟ ਪ੍ਰਾਈਮਿਟਿਵਜ਼, ਇੰਟਰਐਕਟੀਵਿਟੀ ਅਤੇ ਐਨੀਮੇਸ਼ਨ ਵਿੱਚ ਪਰਤ, ਡਿਵਾਈਸਾਂ ਅਤੇ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਵਿੱਚ ਟੈਸਟ, ਅਤੇ ਅਸਲ ਉਪਭੋਗਤਾ ਫੀਡਬੈਕ ਦੇ ਅਧਾਰ ਤੇ ਦੁਹਰਾਉਣ ਦੀ ਇੱਕ ਠੋਸ ਬੁਨਿਆਦ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰੋ।