UX-Central Documentation

Everything you need to know about our components and how to use them effectively

Getting Started

Introduction

Welcome to the UX-Central documentation! This comprehensive guide will help you understand how to use our UI component library effectively in your projects.

UX-Central provides a robust collection of responsive, accessible, and customizable UI components built with pure HTML, CSS, and vanilla JavaScript. Our library is designed to be lightweight, framework-agnostic, and easy to integrate into any web project.

Why Choose UX-Central?

  • No dependencies or frameworks required
  • Lightweight and performance optimized
  • Fully responsive across all device sizes
  • Accessibility built-in following WCAG guidelines
  • Easy theming with CSS variables
  • Dark mode support

Installation

There are several ways to add UX-Central components to your project:

Option 1: Direct Download

Download individual components or the entire library directly from our website:

  1. Browse components on the Components page
  2. Click the "View Code" button on any component
  3. Use the "Download ZIP" button to get the component files
Browse Components

Option 2: CDN

Include our CDN links in your HTML:

<!-- UX-Central CSS -->
<link rel="stylesheet" href="https://cdn.uxcentral.com/1.0.0/uxcentral.min.css">

<!-- Optional JavaScript -->
<script src="https://cdn.uxcentral.com/1.0.0/uxcentral.min.js"></script>

Option 3: NPM

Install via NPM for modern JavaScript projects:

npm install uxcentral --save

Then import in your project:

// Import CSS
import 'uxcentral/dist/uxcentral.min.css';

// Optional JavaScript
import { initComponents } from 'uxcentral';

Quick Start

Follow these simple steps to integrate UX-Central components into your project:

1

Choose Components

Browse the component library and select the components you need for your project.

Browse Components
2

Copy or Download Code

Get the HTML, CSS, and optional JavaScript for each component.

<!-- Example: Button Component -->
<button class="ux-button ux-button--primary">
  <span>Button Text</span>
</button>
3

Customize with CSS Variables

Tailor the components to match your brand using CSS variables:

:root {
  --ux-primary-color: #3b82f6;
  --ux-text-color: #1f2937;
  --ux-border-radius: 8px;
}
4

Test & Implement

Add components to your project and test across different devices and browsers.

Use browser developer tools to view responsive behavior at different screen sizes.

Guidelines

Code Standards

Following these code standards ensures all components in our library maintain high quality and consistency.

HTML Standards

  • Use semantic HTML5 elements (<header>, <nav>, <main>, etc.)
  • Ensure proper nesting of elements
  • Use descriptive class names following BEM methodology
  • Include appropriate ARIA attributes for accessibility
  • Maintain valid HTML markup that passes W3C validation

CSS Standards

  • Follow BEM (Block Element Modifier) naming convention
  • Use CSS custom properties (variables) for theming
  • Maintain a mobile-first responsive approach
  • Group related properties together
  • Avoid using !important declarations
  • Ensure selector specificity is appropriate

JavaScript Standards

  • Keep JavaScript unobtrusive and optional when possible
  • Use modern ES6+ features (with appropriate fallbacks)
  • Prefer vanilla JavaScript over dependencies
  • Implement proper error handling
  • Add descriptive comments for complex logic
  • Follow the principle of progressive enhancement

Code Example

<!-- Example of button with icon following our standards -->
<button class="ux-button ux-button--primary" type="button" aria-label="Add new item">
  <span class="ux-button__icon">
    <i class="fa-solid fa-plus" aria-hidden="true"></i>
  </span>
  <span class="ux-button__text">Add Item</span>
</button>
/* Example CSS following our standards */
.ux-button {
  /* Use CSS variables for theming */
  --button-bg: var(--ux-primary-color, #3b82f6);
  --button-text: var(--ux-text-on-primary, #ffffff);
  --button-radius: var(--ux-border-radius, 6px);
  
  /* Base styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--button-radius);
  background-color: var(--button-bg);
  color: var(--button-text);
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Modifier for primary variant */
.ux-button--primary {
  --button-bg: var(--ux-primary-color, #3b82f6);
  --button-text: var(--ux-text-on-primary, #ffffff);
}

/* Button icon */
.ux-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Interactive states */
.ux-button:hover {
  filter: brightness(1.1);
}

.ux-button:focus-visible {
  outline: 2px solid var(--ux-primary-color);
  outline-offset: 2px;
}
/**
 * Example JavaScript following our standards
 * Adds a subtle ripple effect to buttons
 */
function initButtonRippleEffect() {
  // Select all buttons with the ux-button class
  const buttons = document.querySelectorAll('.ux-button');
  
  buttons.forEach(button => {
    button.addEventListener('click', function(e) {
      // Create ripple element
      const ripple = document.createElement('span');
      ripple.classList.add('ux-button__ripple');
      
      // Position the ripple at click coordinates
      const rect = this.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      ripple.style.left = `${x}px`;
      ripple.style.top = `${y}px`;
      
      // Add ripple to button
      this.appendChild(ripple);
      
      // Remove ripple after animation completes
      setTimeout(() => {
        ripple.remove();
      }, 600);
    });
  });
}

Accessibility Guidelines

We're committed to creating components that are accessible to all users, including those with disabilities. Follow these guidelines to ensure your implementations remain accessible:

Semantic HTML

Use appropriate semantic elements that reflect their purpose:

  • Use <button> for interactive controls that trigger actions
  • Use <a> for navigation to different pages or views
  • Use heading elements (<h1>-<h6>) in logical order
  • Use <nav>, <header>, <main>, <footer>, etc.

ARIA Attributes

Use ARIA (Accessible Rich Internet Applications) attributes when necessary:

  • Add aria-label for elements without visible text
  • Use aria-expanded for collapsible elements
  • Set aria-hidden="true" for decorative elements
  • Include aria-controls to associate controls with their targets
  • Use aria-live regions for dynamic content updates

Keyboard Navigation

Ensure all interactive elements are keyboard accessible:

  • Maintain a logical tab order
  • Provide visible focus styles for all interactive elements
  • Ensure dropdown menus are navigable with keyboard
  • Implement keyboard shortcuts for complex widgets (with proper documentation)

Color Contrast

Ensure sufficient color contrast for readability:

  • Maintain at least 4.5:1 contrast ratio for normal text (WCAG AA)
  • Maintain at least 3:1 contrast ratio for large text (WCAG AA)
  • Don't rely on color alone to convey information
  • Test your color combinations with contrast checking tools

Important Accessibility Testing

Always test your implementations with:

  • Keyboard navigation only (no mouse)
  • Screen readers (such as NVDA, JAWS, or VoiceOver)
  • High contrast mode or color blindness simulators
  • Zoom levels up to 200%

Responsive Design

Our components are built with a mobile-first approach, ensuring they display correctly on all device sizes.

Key Principles

Mobile First

Start with the mobile layout as the base, then enhance for larger screens:

/* Mobile first approach */
.component {
  /* Base mobile styles */
  padding: 1rem;
  flex-direction: column;
}

/* Then add breakpoints for larger screens */
@media (min-width: 768px) {
  .component {
    padding: 2rem;
    flex-direction: row;
  }
}

Fluid Layouts

Use relative units and fluid containers:

  • Use percentages for widths where appropriate
  • Use rem for font sizes and spacing
  • Use em for padding/margins related to text
  • Use vw/vh for viewport-relative sizing
  • Consider using CSS Grid and Flexbox for layouts

Standard Breakpoints

Our components use these standard breakpoints:

Breakpoint Name Minimum Width Device Types
Small (sm) 576px Small phones, portrait phones
Medium (md) 768px Tablets, large phones
Large (lg) 992px Desktops, laptops
Extra Large (xl) 1200px Large desktops, wide screens
2XL (2xl) 1400px Very large desktops, ultra-wide screens

Testing Responsiveness

To ensure your implementation responds correctly across all device sizes:

  • Test on actual devices when possible
  • Use browser developer tools to simulate different screen sizes
  • Check both portrait and landscape orientations on mobile devices
  • Verify touch targets are at least 44px × 44px on mobile
  • Ensure text remains readable at all screen sizes (min 16px for body text)

Contribution Guidelines

We welcome contributions to UX-Central! This guide explains how to submit your own components and help improve the library.

Ways to Contribute

  • Submit new components to expand the library
  • Report bugs or issues with existing components
  • Suggest improvements or enhancements
  • Improve documentation or add examples

Component Submission Process

1

Build Your Component

Create your component following our code standards and guidelines.

Ensure your component is:

  • Accessible
  • Responsive
  • Cross-browser compatible
  • Well-documented
  • Optimized for performance
2

Test Thoroughly

Test your component across different browsers and devices.

  • Verify keyboard navigation
  • Test with screen readers
  • Check responsive behavior
  • Validate HTML and CSS
3

Structure Your Files

Organize your component files according to our standard structure:

component-name/
├── component-name.html
├── component-name.css
├── component-name.js (if needed)
├── README.md
└── variants/ (optional)
    ├── variant-1.html
    └── variant-1.css
4

Submit Your Component

Use our submission form to send your component for review:

Submit Component

Review Process

After submission, our team will:

  1. Review your component for quality and adherence to guidelines
  2. Test functionality, accessibility, and responsiveness
  3. Provide feedback or request revisions if needed
  4. Integrate approved components into the library

Approved components will include attribution to you as the creator.