Width Component

Dynamic Width Control with JavaScript

// Dynamic width manipulation
const widthUtils = {
  // Set width dynamically
  setWidth: function(element, widthClass) {
    // Remove existing width classes
    const widthClasses = [
      'uk-width-1-1', 'uk-width-1-2', 'uk-width-1-3', 'uk-width-2-3',
      'uk-width-1-4', 'uk-width-3-4', 'uk-width-1-5', 'uk-width-2-5',
      'uk-width-3-5', 'uk-width-4-5', 'uk-width-auto', 'uk-width-expand',
      'uk-width-small', 'uk-width-medium', 'uk-width-large',
      'uk-width-xlarge', 'uk-width-xxlarge'
    ];
    
    element.classList.remove(...widthClasses);
    
    // Add new width class
    if (widthClass) {
      element.classList.add(widthClass);
    }
    
    return element;
  },
  
  // Toggle between two widths
  toggleWidth: function(element, width1, width2) {
    if (element.classList.contains(width1)) {
      this.setWidth(element, width2);
      return width2;
    } else {
      this.setWidth(element, width1);
      return width1;
    }
  },
  
  // Responsive width based on viewport
  responsiveWidth: function(element) {
    const viewportWidth = window.innerWidth;
    
    if (viewportWidth < 640) {
      this.setWidth(element, 'uk-width-1-1');
    } else if (viewportWidth < 960) {
      this.setWidth(element, 'uk-width-1-2');
    } else if (viewportWidth < 1200) {
      this.setWidth(element, 'uk-width-1-3');
    } else {
      this.setWidth(element, 'uk-width-1-4');
    }
  },
  
  // Animate width change
  animateWidth: function(element, targetWidthClass, duration = 300) {
    const currentWidth = element.offsetWidth;
    element.style.transition = `width ${duration}ms ease`;
    
    this.setWidth(element, targetWidthClass);
    
    // Force reflow
    element.offsetHeight;
    
    const targetWidth = element.offsetWidth;
    element.style.width = currentWidth + 'px';
    
    // Force reflow again
    element.offsetHeight;
    
    // Animate to target width
    element.style.width = targetWidth + 'px';
    
    // Clean up after animation
    setTimeout(() => {
      element.style.transition = '';
      element.style.width = '';
    }, duration);
  }
};

// Example usage
const myElement = document.getElementById('dynamicElement');

// Set width to half
widthUtils.setWidth(myElement, 'uk-width-1-2');

// Toggle between half and full width
widthUtils.toggleWidth(myElement, 'uk-width-1-2', 'uk-width-1-1');

// Make responsive to viewport
window.addEventListener('resize', () => {
  widthUtils.responsiveWidth(myElement);
});

// Animate width change
widthUtils.animateWidth(myElement, 'uk-width-3-4', 500);

// Grid system JavaScript API
const gridManager = {
  // Initialize grid
  initGrid: function(containerSelector, options = {}) {
    const container = document.querySelector(containerSelector);
    if (!container) return;
    
    const defaults = {
      gutter: 'small',
      masonry: false,
      parallax: 0
    };
    
    const settings = { ...defaults, ...options };
    
    // Add grid attributes
    container.setAttribute('uk-grid', '');
    
    if (settings.gutter) {
      container.classList.add(`uk-grid-${settings.gutter}`);
    }
    
    if (settings.masonry) {
      container.setAttribute('uk-grid', 'masonry: true');
    }
    
    return container;
  },
  
  // Add items to grid
  addGridItem: function(container, content, widthClass = 'uk-width-1-2@s') {
    const item = document.createElement('div');
    item.className = widthClass;
    item.innerHTML = content;
    container.appendChild(item);
    
    // Trigger grid update
    UIkit.update(container);
    
    return item;
  },
  
  // Remove grid item
  removeGridItem: function(container, index) {
    const items = container.children;
    if (items[index]) {
      container.removeChild(items[index]);
      UIkit.update(container);
      return true;
    }
    return false;
  },
  
  // Update grid layout
  updateGridLayout: function(container, items) {
    // Clear container
    while (container.firstChild) {
      container.removeChild(container.firstChild);
    }
    
    // Add new items
    items.forEach(item => {
      this.addGridItem(container, item.content, item.widthClass);
    });
    
    UIkit.update(container);
  },
  
  // Responsive grid columns
  setResponsiveColumns: function(container, columnsByBreakpoint) {
    const items = Array.from(container.children);
    
    items.forEach(item => {
      // Remove existing responsive width classes
      const responsiveClasses = [
        'uk-width-1-1', 'uk-width-1-2', 'uk-width-1-3', 'uk-width-1-4', 'uk-width-1-5',
        'uk-width-1-6', 'uk-width-2-3', 'uk-width-2-4', 'uk-width-2-5', 'uk-width-2-6',
        'uk-width-3-4', 'uk-width-3-5', 'uk-width-3-6', 'uk-width-4-5', 'uk-width-4-6',
        'uk-width-5-6'
      ].map(cls => [cls, `${cls}@s`, `${cls}@m`, `${cls}@l`, `${cls}@xl`]).flat();
      
      item.classList.remove(...responsiveClasses);
      
      // Add new responsive classes
      Object.entries(columnsByBreakpoint).forEach(([breakpoint, columns]) => {
        const widthClass = `uk-width-1-${columns}`;
        const breakpointClass = breakpoint === 'default' ? widthClass : `${widthClass}@${breakpoint}`;
        item.classList.add(breakpointClass);
      });
    });
    
    UIkit.update(container);
  }
};

// Example usage
const myGrid = gridManager.initGrid('#myGrid', {
  gutter: 'small',
  masonry: true
});

// Add items dynamically
gridManager.addGridItem(myGrid, '<div>New Item</div>', 'uk-width-1-3@m');

// Update layout
gridManager.updateGridLayout(myGrid, [
  { content: '<div>Item 1</div>', widthClass: 'uk-width-1-2@s' },
  { content: '<div>Item 2</div>', widthClass: 'uk-width-1-2@s' },
  { content: '<div>Item 3</div>', widthClass: 'uk-width-1-1@s uk-width-1-3@m' }
]);

// Set responsive columns
gridManager.setResponsiveColumns(myGrid, {
  default: '1',  // 1 column on mobile
  s: '2',        // 2 columns on small screens
  m: '3',        // 3 columns on medium screens
  l: '4'         // 4 columns on large screens
});

// Width calculator utility
const widthCalculator = {
  // Calculate percentage width
  calculatePercentage: function(element, parentElement) {
    const elementWidth = element.offsetWidth;
    const parentWidth = parentElement.offsetWidth;
    return (elementWidth / parentWidth * 100).toFixed(2);
  },
  
  // Convert pixels to grid columns
  pixelsToGrid: function(pixels, totalColumns = 12, gutter = 20) {
    // Assuming standard grid with gutters
    const columnWidth = (pixels - gutter) / totalColumns;
    return Math.round(pixels / columnWidth);
  },
  
  // Get recommended width class
  getRecommendedWidth: function(desiredWidth, containerWidth) {
    const percentage = (desiredWidth / containerWidth * 100);
    
    if (percentage >= 100) return 'uk-width-1-1';
    if (percentage >= 75) return 'uk-width-3-4';
    if (percentage >= 66) return 'uk-width-2-3';
    if (percentage >= 50) return 'uk-width-1-2';
    if (percentage >= 33) return 'uk-width-1-3';
    if (percentage >= 25) return 'uk-width-1-4';
    if (percentage >= 20) return 'uk-width-1-5';
    return 'uk-width-auto';
  },
  
  // Generate responsive width classes
  generateResponsiveClasses: function(widths) {
    return Object.entries(widths)
      .map(([breakpoint, width]) => 
        breakpoint === 'default' ? `uk-width-${width}` : `uk-width-${width}@${breakpoint}`
      )
      .join(' ');
  }
};

// Example: Generate responsive classes
const responsiveClasses = widthCalculator.generateResponsiveClasses({
  default: '1-1',  // Full width on mobile
  s: '1-2',        // Half width on small
  m: '1-3',        // One third on medium
  l: '1-4'         // One quarter on large
});

console.log(responsiveClasses); // "uk-width-1-1 uk-width-1-2@s uk-width-1-3@m uk-width-1-4@l"

// Drag to resize functionality
const resizableWidth = {
  init: function(element, options = {}) {
    const defaults = {
      minWidth: 100,
      maxWidth: 800,
      handleSize: 10,
      onResize: null
    };
    
    const settings = { ...defaults, ...options };
    const handle = document.createElement('div');
    
    handle.style.cssText = `
      position: absolute;
      right: -${settings.handleSize / 2}px;
      top: 0;
      width: ${settings.handleSize}px;
      height: 100%;
      cursor: col-resize;
      z-index: 10;
    `;
    
    element.style.position = 'relative';
    element.appendChild(handle);
    
    let isResizing = false;
    let startX = 0;
    let startWidth = 0;
    
    handle.addEventListener('mousedown', startResize);
    document.addEventListener('mousemove', doResize);
    document.addEventListener('mouseup', stopResize);
    
    function startResize(e) {
      isResizing = true;
      startX = e.clientX;
      startWidth = element.offsetWidth;
      element.style.transition = 'none';
    }
    
    function doResize(e) {
      if (!isResizing) return;
      
      const deltaX = e.clientX - startX;
      let newWidth = startWidth + deltaX;
      
      // Constrain width
      newWidth = Math.max(settings.minWidth, Math.min(newWidth, settings.maxWidth));
      
      element.style.width = newWidth + 'px';
      
      if (settings.onResize) {
        settings.onResize(newWidth);
      }
    }
    
    function stopResize() {
      if (!isResizing) return;
      isResizing = false;
      element.style.transition = '';
      
      // Convert to nearest grid class
      const containerWidth = element.parentElement.offsetWidth;
      const recommendedClass = widthCalculator.getRecommendedWidth(
        element.offsetWidth,
        containerWidth
      );
      
      widthUtils.setWidth(element, recommendedClass);
    }
    
    return {
      destroy: function() {
        handle.removeEventListener('mousedown', startResize);
        document.removeEventListener('mousemove', doResize);
        document.removeEventListener('mouseup', stopResize);
        element.removeChild(handle);
      }
    };
  }
};

// Example: Make element resizable
const resizableElement = document.getElementById('resizableBox');
const resizeInstance = resizableWidth.init(resizableElement, {
  minWidth: 200,
  maxWidth: 600,
  onResize: function(newWidth) {
    console.log(`New width: ${newWidth}px`);
  }
});

Responsive Dashboard Layout

<!-- Responsive Dashboard -->
<div class="uk-container uk-container-expand">
  <!-- Header -->
  <header class="uk-section uk-section-small uk-background-primary uk-light">
    <div class="uk-container">
      <div class="uk-grid-medium uk-flex-middle" uk-grid>
        <div class="uk-width-auto">
          <h1 class="uk-margin-remove">Dashboard</h1>
        </div>
        <div class="uk-width-expand">
          <div class="uk-float-right">
            <button class="uk-button uk-button-default">Notifications</button>
            <button class="uk-button uk-button-default">User Profile</button>
          </div>
        </div>
      </div>
    </div>
  </header>
  
  <!-- Main Content -->
  <div class="uk-container uk-margin-top">
    <div class="uk-grid-medium" uk-grid>
      <!-- Sidebar -->
      <aside class="uk-width-1-1 uk-width-1-4@m">
        <div class="uk-card uk-card-default uk-card-body">
          <h3 class="uk-card-title">Navigation</h3>
          <ul class="uk-nav uk-nav-default">
            <li class="uk-active"><a href="#"><span uk-icon="icon: home"></span> Dashboard</a></li>
            <li><a href="#"><span uk-icon="icon: users"></span> Users</a></li>
            <li><a href="#"><span uk-icon="icon: settings"></span> Settings</a></li>
            <li><a href="#"><span uk-icon="icon: database"></span> Analytics</a></li>
            <li><a href="#"><span uk-icon="icon: file-text"></span> Reports</a></li>
          </ul>
        </div>
        
        <!-- Quick Stats -->
        <div class="uk-card uk-card-default uk-card-body uk-margin-top">
          <h3 class="uk-card-title">Quick Stats</h3>
          <div class="uk-grid-small" uk-grid>
            <div class="uk-width-1-2">
              <div class="uk-text-center">
                <div class="uk-text-large uk-text-bold">1,234</div>
                <div class="uk-text-small">Visitors</div>
              </div>
            </div>
            <div class="uk-width-1-2">
              <div class="uk-text-center">
                <div class="uk-text-large uk-text-bold">567</div>
                <div class="uk-text-small">Orders</div>
              </div>
            </div>
          </div>
        </div>
      </aside>
      
      <!-- Main Dashboard -->
      <main class="uk-width-1-1 uk-width-3-4@m">
        <!-- Stats Cards -->
        <div class="uk-grid-small" uk-grid>
          <div class="uk-width-1-2 uk-width-1-4@m">
            <div class="uk-card uk-card-primary uk-card-body uk-light">
              <div class="uk-flex uk-flex-middle">
                <div class="uk-width-auto">
                  <span uk-icon="icon: users; ratio: 2"></span>
                </div>
                <div class="uk-width-expand uk-text-right">
                  <div class="uk-text-large uk-text-bold">1,234</div>
                  <div class="uk-text-small">Total Users</div>
                </div>
              </div>
            </div>
          </div>
          <div class="uk-width-1-2 uk-width-1-4@m">
            <div class="uk-card uk-card-secondary uk-card-body uk-light">
              <div class="uk-flex uk-flex-middle">
                <div class="uk-width-auto">
                  <span uk-icon="icon: cart; ratio: 2"></span>
                </div>
                <div class="uk-width-expand uk-text-right">
                  <div class="uk-text-large uk-text-bold">567</div>
                  <div class="uk-text-small">Total Sales</div>
                </div>
              </div>
            </div>
          </div>
          <div class="uk-width-1-2 uk-width-1-4@m">
            <div class="uk-card uk-card-danger uk-card-body uk-light">
              <div class="uk-flex uk-flex-middle">
                <div class="uk-width-auto">
                  <span uk-icon="icon: clock; ratio: 2"></span>
                </div>
                <div class="uk-width-expand uk-text-right">
                  <div class="uk-text-large uk-text-bold">12.5</div>
                  <div class="uk-text-small">Avg. Time</div>
                </div>
              </div>
            </div>
          </div>
          <div class="uk-width-1-2 uk-width-1-4@m">
            <div class="uk-card uk-card-success uk-card-body uk-light">
              <div class="uk-flex uk-flex-middle">
                <div class="uk-width-auto">
                  <span uk-icon="icon: credit-card; ratio: 2"></span>
                </div>
                <div class="uk-width-expand uk-text-right">
                  <div class="uk-text-large uk-text-bold">$12,345</div>
                  <div class="uk-text-small">Revenue</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Charts & Graphs -->
        <div class="uk-grid-medium uk-margin-top" uk-grid>
          <div class="uk-width-1-1 uk-width-2-3@m">
            <div class="uk-card uk-card-default uk-card-body">
              <h3 class="uk-card-title">Revenue Chart</h3>
              <!-- Chart would go here -->
              <div class="uk-placeholder uk-height-large"></div>
            </div>
          </div>
          <div class="uk-width-1-1 uk-width-1-3@m">
            <div class="uk-card uk-card-default uk-card-body">
              <h3 class="uk-card-title">Top Products</h3>
              <ul class="uk-list uk-list-divider">
                <li>
                  <div class="uk-flex uk-flex-between">
                    <span>Product A</span>
                    <span class="uk-label">234 sales</span>
                  </div>
                </li>
                <li>
                  <div class="uk-flex uk-flex-between">
                    <span>Product B</span>
                    <span class="uk-label">189 sales</span>
                  </div>
                </li>
                <li>
                  <div class="uk-flex uk-flex-between">
                    <span>Product C</span>
                    <span class="uk-label">156 sales</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        
        <!-- Recent Activity -->
        <div class="uk-card uk-card-default uk-card-body uk-margin-top">
          <h3 class="uk-card-title">Recent Activity</h3>
          <div class="uk-overflow-auto">
            <table class="uk-table uk-table-divider uk-table-small">
              <thead>
                <tr>
                  <th class="uk-width-1-4">User</th>
                  <th class="uk-width-1-4">Action</th>
                  <th class="uk-width-1-4">Time</th>
                  <th class="uk-width-1-4">Status</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>John Doe</td>
                  <td>Placed Order</td>
                  <td>10:30 AM</td>
                  <td><span class="uk-label uk-label-success">Completed</span></td>
                </tr>
                <tr>
                  <td>Jane Smith</td>
                  <td>Updated Profile</td>
                  <td>09:45 AM</td>
                  <td><span class="uk-label uk-label-warning">Pending</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </main>
    </div>
  </div>
</div>

<script>
// Dynamic dashboard functionality
class DashboardManager {
  constructor() {
    this.stats = {
      users: 1234,
      sales: 567,
      time: 12.5,
      revenue: 12345
    };
    
    this.initialize();
  }
  
  initialize() {
    this.updateStats();
    this.setupResponsiveBehavior();
    this.setupDynamicGrid();
  }
  
  updateStats() {
    // Update stat cards
    document.querySelectorAll('.uk-card-primary .uk-text-large').textContent = 
      this.formatNumber(this.stats.users);
    document.querySelectorAll('.uk-card-secondary .uk-text-large').textContent = 
      this.formatNumber(this.stats.sales);
    document.querySelectorAll('.uk-card-danger .uk-text-large').textContent = 
      `${this.stats.time}m`;
    document.querySelectorAll('.uk-card-success .uk-text-large').textContent = 
      this.formatCurrency(this.stats.revenue);
  }
  
  formatNumber(num) {
    return num.toLocaleString();
  }
  
  formatCurrency(num) {
    return `$${num.toLocaleString()}`;
  }
  
  setupResponsiveBehavior() {
    // Adjust layout based on viewport
    const adjustLayout = () => {
      const viewportWidth = window.innerWidth;
      const sidebar = document.querySelector('aside');
      const mainContent = document.querySelector('main');
      
      if (viewportWidth < 960) {
        // Stack layout on mobile
        sidebar.classList.remove('uk-width-1-4@m');
        sidebar.classList.add('uk-width-1-1');
        mainContent.classList.remove('uk-width-3-4@m');
        mainContent.classList.add('uk-width-1-1');
      } else {
        // Sidebar layout on desktop
        sidebar.classList.remove('uk-width-1-1');
        sidebar.classList.add('uk-width-1-4@m');
        mainContent.classList.remove('uk-width-1-1');
        mainContent.classList.add('uk-width-3-4@m');
      }
    };
    
    // Initial adjustment
    adjustLayout();
    
    // Adjust on resize
    window.addEventListener('resize', adjustLayout);
  }
  
  setupDynamicGrid() {
    // Make stat cards resizable
    const statCards = document.querySelectorAll('.uk-card-primary, .uk-card-secondary, .uk-card-danger, .uk-card-success');
    
    statCards.forEach(card => {
      card.addEventListener('click', () => {
        this.toggleCardSize(card);
      });
    });
  }
  
  toggleCardSize(card) {
    const currentWidth = card.parentElement.className;
    
    if (currentWidth.includes('uk-width-1-4@m')) {
      card.parentElement.classList.remove('uk-width-1-4@m');
      card.parentElement.classList.add('uk-width-1-2@m');
    } else if (currentWidth.includes('uk-width-1-2@m')) {
      card.parentElement.classList.remove('uk-width-1-2@m');
      card.parentElement.classList.add('uk-width-1-1@m');
    } else {
      card.parentElement.classList.remove('uk-width-1-1@m');
      card.parentElement.classList.add('uk-width-1-4@m');
    }
    
    // Update grid
    UIkit.update(card.closest('[uk-grid]'));
  }
}

// Initialize dashboard
const dashboard = new DashboardManager();
</script>

E-commerce Product Grid

<!-- E-commerce Product Grid -->
<div class="uk-container">
  <!-- Filter Bar -->
  <div class="uk-grid-medium uk-flex-middle uk-margin-bottom" uk-grid>
    <div class="uk-width-expand">
      <h1 class="uk-margin-remove">Products</h1>
      <p class="uk-text-meta uk-margin-remove-top">Showing 24 products</p>
    </div>
    <div class="uk-width-auto">
      <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">
          Filter <span uk-icon="icon: triangle-down"></span>
        </button>
        <div uk-dropdown>
          <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">All Products</a></li>
            <li><a href="#">New Arrivals</a></li>
            <li><a href="#">Best Sellers</a></li>
            <li><a href="#">On Sale</a></li>
          </ul>
        </div>
      </div>
      <div class="uk-button-group uk-margin-left">
        <button class="uk-button uk-button-default" id="gridView">
          <span uk-icon="icon: grid"></span>
        </button>
        <button class="uk-button uk-button-default" id="listView">
          <span uk-icon="icon: list"></span>
        </button>
      </div>
    </div>
  </div>
  
  <!-- Products Grid -->
  <div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@m uk-child-width-1-4@l" uk-grid id="productsGrid">
    <!-- Product items will be dynamically added -->
  </div>
  
  <!-- Pagination -->
  <div class="uk-margin-large-top">
    <ul class="uk-pagination uk-flex-center">
      <li><a href="#"><span uk-pagination-previous></span></a></li>
      <li class="uk-active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#"><span uk-pagination-next></span></a></li>
    </ul>
  </div>
</div>

<script>
// Product grid manager
class ProductGrid {
  constructor() {
    this.products = [];
    this.currentView = 'grid'; // 'grid' or 'list'
    this.currentFilter = 'all';
    this.loadProducts();
    this.initializeViewToggle();
  }
  
  loadProducts() {
    // Simulated product data
    this.products = [
      { id: 1, name: 'Wireless Headphones', price: 99.99, category: 'electronics', image: 'product1.jpg' },
      { id: 2, name: 'Smart Watch', price: 199.99, category: 'electronics', image: 'product2.jpg' },
      { id: 3, name: 'Laptop Backpack', price: 49.99, category: 'accessories', image: 'product3.jpg' },
      { id: 4, name: 'Bluetooth Speaker', price: 79.99, category: 'electronics', image: 'product4.jpg' },
      { id: 5, name: 'USB-C Cable', price: 19.99, category: 'accessories', image: 'product5.jpg' },
      { id: 6, name: 'Phone Case', price: 29.99, category: 'accessories', image: 'product6.jpg' },
      { id: 7, name: 'Tablet Stand', price: 39.99, category: 'accessories', image: 'product7.jpg' },
      { id: 8, name: 'Wireless Mouse', price: 34.99, category: 'electronics', image: 'product8.jpg' }
    ];
    
    this.renderProducts();
  }
  
  renderProducts() {
    const gridContainer = document.getElementById('productsGrid');
    gridContainer.innerHTML = '';
    
    const filteredProducts = this.filterProducts();
    
    filteredProducts.forEach(product => {
      const productElement = this.createProductElement(product);
      gridContainer.appendChild(productElement);
    });
    
    // Update grid
    UIkit.update(gridContainer);
  }
  
  createProductElement(product) {
    const div = document.createElement('div');
    
    if (this.currentView === 'grid') {
      div.className = 'uk-width-1-2 uk-width-1-3@m uk-width-1-4@l';
      div.innerHTML = `
        <div class="uk-card uk-card-default">
          <div class="uk-card-media-top">
            <img src="${product.image}" alt="${product.name}">
          </div>
          <div class="uk-card-body">
            <h3 class="uk-card-title uk-text-small">${product.name}</h3>
            <div class="uk-flex uk-flex-between uk-flex-middle">
              <span class="uk-text-bold">$${product.price.toFixed(2)}</span>
              <button class="uk-button uk-button-primary uk-button-small">Add to Cart</button>
            </div>
          </div>
        </div>
      `;
    } else {
      // List view
      div.className = 'uk-width-1-1';
      div.innerHTML = `
        <div class="uk-card uk-card-default">
          <div class="uk-card-body">
            <div class="uk-grid-small uk-flex-middle" uk-grid>
              <div class="uk-width-auto">
                <img src="${product.image}" alt="${product.name}" width="100">
              </div>
              <div class="uk-width-expand">
                <h3 class="uk-card-title uk-margin-remove">${product.name}</h3>
                <p class="uk-text-meta uk-margin-remove-top">${product.category}</p>
                <p>${product.description || 'No description available'}</p>
              </div>
              <div class="uk-width-auto">
                <div class="uk-text-right">
                  <div class="uk-text-large uk-text-bold">$${product.price.toFixed(2)}</div>
                  <button class="uk-button uk-button-primary uk-margin-small-top">Add to Cart</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      `;
    }
    
    return div;
  }
  
  filterProducts() {
    if (this.currentFilter === 'all') {
      return this.products;
    }
    return this.products.filter(product => product.category === this.currentFilter);
  }
  
  initializeViewToggle() {
    const gridViewBtn = document.getElementById('gridView');
    const listViewBtn = document.getElementById('listView');
    
    gridViewBtn.addEventListener('click', () => {
      this.setView('grid');
      gridViewBtn.classList.add('uk-active');
      listViewBtn.classList.remove('uk-active');
    });
    
    listViewBtn.addEventListener('click', () => {
      this.setView('list');
      listViewBtn.classList.add('uk-active');
      gridViewBtn.classList.remove('uk-active');
    });
    
    // Set initial active button
    gridViewBtn.classList.add('uk-active');
  }
  
  setView(view) {
    this.currentView = view;
    this.renderProducts();
  }
  
  setFilter(filter) {
    this.currentFilter = filter;
    this.renderProducts();
  }
  
  // Dynamic grid adjustment
  adjustGridColumns(columns) {
    const gridContainer = document.getElementById('productsGrid');
    const items = gridContainer.children;
    
    Array.from(items).forEach(item => {
      // Remove existing width classes
      const classes = item.className.split(' ');
      const newClasses = classes.filter(cls => !cls.startsWith('uk-width-'));
      item.className = newClasses.join(' ');
      
      // Add new width class
      item.classList.add(`uk-width-1-${columns}`);
    });
    
    UIkit.update(gridContainer);
  }
}

// Initialize product grid
const productGrid = new ProductGrid();

// Responsive column adjustment
window.addEventListener('resize', () => {
  const width = window.innerWidth;
  const gridContainer = document.getElementById('productsGrid');
  
  if (width < 640) {
    productGrid.adjustGridColumns(1);
  } else if (width < 960) {
    productGrid.adjustGridColumns(2);
  } else if (width < 1200) {
    productGrid.adjustGridColumns(3);
  } else {
    productGrid.adjustGridColumns(4);
  }
});

// Filter functionality
document.querySelectorAll('[uk-dropdown-nav] a').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const filter = e.target.textContent.toLowerCase();
    productGrid.setFilter(filter);
    
    // Update active state
    document.querySelectorAll('[uk-dropdown-nav] li').forEach(li => {
      li.classList.remove('uk-active');
    });
    e.target.parentElement.classList.add('uk-active');
  });
});
</script>

/* Custom Width Utilities */
/* Fluid Width System */
.uk-width-fluid-10 { width: 10%; }
.uk-width-fluid-20 { width: 20%; }
.uk-width-fluid-30 { width: 30%; }
.uk-width-fluid-40 { width: 40%; }
.uk-width-fluid-60 { width: 60%; }
.uk-width-fluid-70 { width: 70%; }
.uk-width-fluid-80 { width: 80%; }
.uk-width-fluid-90 { width: 90%; }

/* Viewport Width Units */
.uk-width-vw-25 { width: 25vw; }
.uk-width-vw-50 { width: 50vw; }
.uk-width-vw-75 { width: 75vw; }
.uk-width-vw-100 { width: 100vw; }

/* Min/Max Width Constraints */
.uk-width-min-200 { min-width: 200px; }
.uk-width-min-300 { min-width: 300px; }
.uk-width-min-400 { min-width: 400px; }
.uk-width-max-200 { max-width: 200px; }
.uk-width-max-300 { max-width: 300px; }
.uk-width-max-400 { max-width: 400px; }

/* Aspect Ratio Widths */
.uk-width-square { width: 100%; padding-bottom: 100%; }
.uk-width-16-9 { width: 100%; padding-bottom: 56.25%; }
.uk-width-4-3 { width: 100%; padding-bottom: 75%; }
.uk-width-3-2 { width: 100%; padding-bottom: 66.66%; }

/* Animation Width Classes */
.uk-width-animate {
  transition: width 0.3s ease;
}

.uk-width-slide-in {
  animation: slideInWidth 0.5s ease;
}

@keyframes slideInWidth {
  from { width: 0; opacity: 0; }
  to { width: 100%; opacity: 1; }
}

/* Gradient Width Backgrounds */
.uk-width-gradient {
  background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
  background-size: 200% 100%;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Custom Grid System */
.uk-grid-custom {
  --columns: 12;
  --gutter: 20px;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter) * -1);
  margin-top: calc(var(--gutter) * -1);
}

.uk-grid-custom > * {
  padding-left: var(--gutter);
  padding-top: var(--gutter);
}

.uk-col-1 { width: calc(100% / var(--columns)); }
.uk-col-2 { width: calc(100% / var(--columns) * 2); }
.uk-col-3 { width: calc(100% / var(--columns) * 3); }
.uk-col-4 { width: calc(100% / var(--columns) * 4); }
.uk-col-5 { width: calc(100% / var(--columns) * 5); }
.uk-col-6 { width: calc(100% / var(--columns) * 6); }
.uk-col-7 { width: calc(100% / var(--columns) * 7); }
.uk-col-8 { width: calc(100% / var(--columns) * 8); }
.uk-col-9 { width: calc(100% / var(--columns) * 9); }
.uk-col-10 { width: calc(100% / var(--columns) * 10); }
.uk-col-11 { width: calc(100% / var(--columns) * 11); }
.uk-col-12 { width: 100%; }

/* Masonry Layout */
.uk-width-masonry {
  column-count: 3;
  column-gap: 20px;
}

.uk-width-masonry-item {
  break-inside: avoid;
  margin-bottom: 20px;
}

/* Flexbox Width Utilities */
.uk-width-flex-1 { flex: 1; }
.uk-width-flex-2 { flex: 2; }
.uk-width-flex-3 { flex: 3; }
.uk-width-flex-4 { flex: 4; }
.uk-width-flex-none { flex: none; }
.uk-width-flex-auto { flex: 0 0 auto; }

/* CSS Grid Width */
.uk-width-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.uk-width-grid-span-2 { grid-column: span 2; }
.uk-width-grid-span-3 { grid-column: span 3; }
.uk-width-grid-full { grid-column: 1 / -1; }

/* Print Width Adjustments */
@media print {
  .uk-width-print-1-2 { width: 50% !important; }
  .uk-width-print-1-3 { width: 33.33% !important; }
  .uk-width-print-2-3 { width: 66.66% !important; }
  .uk-width-print-full { width: 100% !important; }
}

/* Dark Mode Width Adjustments */
@media (prefers-color-scheme: dark) {
  .uk-width-dark-mode {
    background-color: #1a1a1a;
    border-color: #333;
  }
}

/* Custom Breakpoints */
@media (min-width: 768px) and (max-width: 1023px) {
  .uk-width-tablet-1-2 { width: 50%; }
  .uk-width-tablet-1-3 { width: 33.33%; }
  .uk-width-tablet-hide { display: none; }
}

/* Utility Mixins for Sass/Less */
/*
@mixin width-class($breakpoint: null) {
  $suffix: if($breakpoint, '\@#{$breakpoint}', '');
  
  .uk-width-1-1#{$suffix} { width: 100%; }
  .uk-width-1-2#{$suffix} { width: 50%; }
  .uk-width-1-3#{$suffix} { width: 33.33%; }
  .uk-width-2-3#{$suffix} { width: 66.66%; }
  .uk-width-1-4#{$suffix} { width: 25%; }
  .uk-width-3-4#{$suffix} { width: 75%; }
}

// Generate all width classes
@include width-class;
@include width-class('s');
@include width-class('m');
@include width-class('l');
@include width-class('xl');
*/

/* Custom Width Variables */
:root {
  --width-small: 150px;
  --width-medium: 300px;
  --width-large: 450px;
  --width-xlarge: 600px;
  --width-xxlarge: 750px;
}

.uk-width-custom-small { width: var(--width-small); }
.uk-width-custom-medium { width: var(--width-medium); }
.uk-width-custom-large { width: var(--width-large); }
.uk-width-custom-xlarge { width: var(--width-xlarge); }
.uk-width-custom-xxlarge { width: var(--width-xxlarge); }

/* Width with Shadows */
.uk-width-shadow {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

.uk-width-shadow:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* Rounded Width Containers */
.uk-width-rounded {
  border-radius: 10px;
  overflow: hidden;
}

.uk-width-rounded-small { border-radius: 5px; }
.uk-width-rounded-large { border-radius: 20px; }
.uk-width-rounded-full { border-radius: 9999px; }

/* Width with Borders */
.uk-width-border {
  border: 1px solid #e5e5e5;
}

.uk-width-border-thick {
  border: 2px solid #333;
}

.uk-width-border-dashed {
  border: 1px dashed #ccc;
}

/* Usage Examples */
<div class="uk-width-fluid-30 uk-width-animate">
  <!-- 30% width with animation -->
</div>

<div class="uk-width-vw-50 uk-width-gradient">
  <!-- 50vw width with gradient -->
</div>

<div class="uk-width-min-300 uk-width-max-500">
  <!-- Min 300px, max 500px -->
</div>

<div class="uk-width-square uk-background-muted">
  <!-- Square aspect ratio -->
</div>

<div class="uk-grid-custom">
  <div class="uk-col-4">Column 1</div>
  <div class="uk-col-8">Column 2</div>
</div>

<div class="uk-width-masonry">
  <div class="uk-width-masonry-item">Item 1</div>
  <div class="uk-width-masonry-item">Item 2</div>
</div>