Skip to main content

VIBE BRUTALISM 2.0

A bold, unapologetic, fully accessible neo-brutalist component library

♿ WCAG 2.1 AA ✓ Section 508 ⌨️ Keyboard Nav 🔊 Screen Reader

⚙️ GETTING STARTED

Installation

Simply include the CSS and JavaScript files in your HTML:

<link rel="stylesheet" href="vibe-brutalism.css"> <script src="vibe-brutalism.js"></script>

♿ ACCESSIBILITY

WCAG 2.1 AA & Section 508 Compliant

Every component in Vibe Brutalism is built with accessibility in mind:

  • Keyboard Navigation: All interactive elements can be accessed via keyboard
  • ARIA Labels: Proper semantic HTML and ARIA attributes throughout
  • Screen Reader Support: Live regions and announcements for dynamic content
  • Focus Management: Visible focus indicators and focus trapping in modals
  • Color Contrast: Meets WCAG AA contrast ratios (4.5:1 for text)
  • Skip Links: Skip to main content for keyboard users

🔘 BUTTONS

Button Variants

Button Sizes

<button class="vb-btn vb-btn-primary">Primary</button> <button class="vb-btn vb-btn-lg">Large</button> <button class="vb-btn" disabled>Disabled</button>

🍔 RESPONSIVE HAMBURGER MENU

The navbar automatically converts to a hamburger menu on mobile devices (resize your browser to see it in action).

Accessibility Features:

  • Proper ARIA labels (aria-expanded, aria-controls)
  • ESC key closes the menu
  • Focus returns to toggle button on close
  • Screen reader announcements
<nav class="vb-navbar"> <a href="#" class="vb-navbar-brand">Brand</a> <button class="vb-navbar-toggle"> <span class="vb-navbar-toggle-bar"></span> <span class="vb-navbar-toggle-bar"></span> <span class="vb-navbar-toggle-bar"></span> </button> <ul class="vb-navbar-menu"> <li><a href="#" class="vb-navbar-link">Link</a></li> </ul> </nav>

🎠 CAROUSEL

Image Carousel

Accessibility Features:

  • Left/Right arrow keys navigate slides
  • Autoplay pauses on hover and focus
  • Screen reader announces slide changes
  • All controls have proper ARIA labels
<div class="vb-carousel" id="myCarousel" data-autoplay="true" data-interval="5000"> <div class="vb-carousel-inner"> <div class="vb-carousel-track"> <div class="vb-carousel-item">...</div> </div> </div> <button class="vb-carousel-control vb-carousel-control-prev">‹</button> <button class="vb-carousel-control vb-carousel-control-next">›</button> <div class="vb-carousel-indicators"> <button class="vb-carousel-indicator"></button> </div> </div>

🔔 TOAST NOTIFICATIONS

Toast notifications with auto-dismiss and screen reader support:

Different Positions:

// Show toast notification VB.Toast('Message here', 'success', 5000, 'top-right'); // Types: 'success', 'warning', 'danger', 'info' // Positions: 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left'

📮 SNACKBAR

Snackbar for brief messages with optional action button:

// Simple snackbar VB.Snackbar('Message here'); // With action button VB.Snackbar('Item deleted', 'UNDO', () => { // Undo action }, 5000);

🃏 CARDS

Default Card

This is a standard card with header, body, and footer sections.

Primary Card

Cards can have different color variants to match your design.

Accent Card

Use accent colors to make important cards stand out.

📝 FORMS

📑 TABS

Overview

Tabs organize content into separate views where only one view is visible at a time. Use arrow keys, Home, and End to navigate between tabs.

Features

  • ARIA roles (tablist, tab, tabpanel)
  • Keyboard navigation with arrow keys
  • Screen reader announcements
  • Focus management

Keyboard Navigation

  • Arrow Right/Down: Next tab
  • Arrow Left/Up: Previous tab
  • Home: First tab
  • End: Last tab

📋 ACCORDION

Vibe Brutalism is a fully accessible neo-brutalist component library that embraces bold design, thick borders, and high contrast colors. Version 2.0 is WCAG 2.1 AA and Section 508 compliant.

Every component includes proper ARIA attributes, keyboard navigation, screen reader support, and focus management. All components meet WCAG 2.1 AA standards.

Use arrow keys to navigate between accordion headers, and Enter/Space to toggle sections. Home and End keys jump to first and last sections.

🪟 MODALS

Accessibility Features:

  • Focus trapped within modal
  • ESC key closes modal
  • Focus returns to trigger element on close
  • Proper ARIA attributes (role="dialog", aria-modal="true")

📂 DROPDOWNS

Action 1 Action 2 Action 3 Action 4

Keyboard Navigation:

  • Arrow Down / Enter / Space: Open menu
  • Arrow Up/Down: Navigate items
  • ESC: Close menu

📊 PROGRESS BARS

Dynamic Progress

0%

Colored Progress Bars

100%
75%
50%

⚠️ ALERTS

📐 GRID SYSTEM

12 Columns
6 Columns
6 Columns
4 Cols
4 Cols
4 Cols

Accessible Modal Example

This modal demonstrates full accessibility support:

  • Focus is trapped within the modal
  • ESC key closes the modal
  • Focus returns to the trigger button on close
  • Proper ARIA attributes for screen readers